Merge branch 'javascripts-i-tailwind' into 'master'

Migrate utility classes in dirs starting with I

See merge request !163665



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Co-authored-by: Paul Gascou-Vaillancourt <paul.gascvail@gmail.com>

app/assets/javascripts/ide/components/activity_bar.vue

@@ -87,7 +87,7 @@ export default {
           <gl-icon name="commit" />
           <gl-badge
             v-if="stagedFiles.length"
-            class="gl-absolute gl-px-2 gl-top-3 gl-right-3 gl-font-bold gl-bg-gray-900! gl-text-white!"
+            class="gl-absolute gl-right-3 gl-top-3 !gl-bg-gray-900 gl-px-2 gl-font-bold !gl-text-white"
           >
             {{ stagedFiles.length }}
           </gl-badge>

app/assets/javascripts/ide/components/branches/item.vue

@@ -34,12 +34,12 @@ export default {
 
 <template>
   <a :href="branchHref" class="btn-link gl-button gl-flex gl-items-center">
-    <span class="gl-flex gl-mr-3 ide-search-list-current-icon">
+    <span class="ide-search-list-current-icon gl-mr-3 gl-flex">
       <gl-icon v-if="isActive" :size="16" name="mobile-issue-close" />
     </span>
     <span>
       <strong> {{ item.name }} </strong>
-      <span class="ide-merge-request-project-path gl-block mt-1">
+      <span class="ide-merge-request-project-path mt-1 gl-block">
         Updated <timeago :time="item.committedDate || ''" />
       </span>
     </span>

app/assets/javascripts/ide/components/branches/search_list.vue

@@ -59,7 +59,7 @@ export default {
 <template>
   <div>
     <label
-      class="dropdown-input gl-pt-3 gl-pb-5 gl-mb-0 gl-border-b-1 gl-border-b-solid gl-block"
+      class="dropdown-input gl-mb-0 gl-block gl-border-b-1 gl-pb-5 gl-pt-3 gl-border-b-solid"
       @click.stop
     >
       <input
@@ -70,7 +70,7 @@ export default {
         class="form-control dropdown-input-field"
         @input="searchBranches"
       />
-      <gl-icon name="search" class="gl-ml-5 gl-mt-1 input-icon" />
+      <gl-icon name="search" class="input-icon gl-ml-5 gl-mt-1" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content !gl-flex">
       <gl-loading-icon

app/assets/javascripts/ide/components/commit_sidebar/actions.vue

@@ -72,7 +72,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mb-5 ide-commit-options">
+  <div class="ide-commit-options gl-mb-5">
     <radio-group
       :value="$options.commitToCurrentBranch"
       :disabled="!canPushToBranch"

app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue

@@ -58,7 +58,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex ide-commit-editor-header gl-align-items-center">
+  <div class="ide-commit-editor-header gl-flex gl-items-center">
     <file-icon :file-name="activeFile.name" :size="16" class="gl-mr-3" />
     <strong class="gl-mr-3">
       <template v-if="activeFile.prevPath && activeFile.prevPath !== activeFile.path">

app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue

@@ -13,7 +13,7 @@ export default {
   <div v-if="!lastCommitMsg" class="multi-file-commit-panel-section ide-commit-empty-state">
     <div class="ide-commit-empty-state-container">
       <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
-      <div class="gl-mr-3 gl-ml-3">
+      <div class="gl-ml-3 gl-mr-3">
         <div class="text-content text-center">
           <h4>{{ __('No changes') }}</h4>
           <p>{{ __('Edit files in the editor and commit changes here') }}</p>

app/assets/javascripts/ide/components/commit_sidebar/list.vue

@@ -77,10 +77,10 @@ export default {
 
 <template>
   <div class="ide-commit-list-container">
-    <header class="multi-file-commit-panel-header gl-display-flex gl-mb-0">
-      <div class="gl-display-flex gl-align-items-center flex-fill">
+    <header class="multi-file-commit-panel-header gl-mb-0 gl-flex">
+      <div class="flex-fill gl-flex gl-items-center">
         <strong> {{ __('Changes') }} </strong>
-        <div class="gl-display-flex gl-ml-auto">
+        <div class="gl-ml-auto gl-flex">
           <gl-button
             v-if="!stagedList"
             v-gl-tooltip
@@ -111,7 +111,7 @@ export default {
         />
       </li>
     </ul>
-    <p v-else class="multi-file-commit-list form-text gl-text-gray-600 gl-text-center">
+    <p v-else class="multi-file-commit-list form-text gl-text-center gl-text-gray-600">
       {{ emptyStateText }}
     </p>
     <gl-modal

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -82,7 +82,7 @@ export default {
       :class="{
         'is-active': isActive,
       }"
-      class="multi-file-commit-list-path gl-w-full border-0 ml-0 mr-0"
+      class="multi-file-commit-list-path border-0 ml-0 mr-0 gl-w-full"
       role="button"
       @click="openFileInEditor"
     >
@@ -94,7 +94,7 @@ export default {
         {{ file.name }}
       </span>
       <div class="ml-auto gl-flex gl-items-center">
-        <div class="gl-flex gl-items-center ide-commit-list-changed-icon">
+        <div class="ide-commit-list-changed-icon gl-flex gl-items-center">
           <gl-icon :name="iconName" :size="16" :class="iconClass" />
         </div>
       </div>

app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue

@@ -38,7 +38,7 @@ export default {
     class="js-ide-commit-new-mr"
     :class="{ 'is-disabled': shouldDisableNewMrOption }"
   >
-    <hr class="gl-mt-3 gl-mb-4" />
+    <hr class="gl-mb-4 gl-mt-3" />
 
     <gl-form-checkbox
       :disabled="shouldDisableNewMrOption"

app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue

@@ -89,7 +89,7 @@ export default {
       v-if="commitAction === value && showInput"
       :label="placeholderBranchName"
       :label-sr-only="true"
-      class="gl-ml-6 gl-mb-0"
+      class="gl-mb-0 gl-ml-6"
     >
       <gl-form-input
         :placeholder="placeholderBranchName"

app/assets/javascripts/ide/components/commit_sidebar/success_message.vue

@@ -18,7 +18,7 @@ export default {
     <div class="svg-content svg-80">
       <img :src="committedStateSvgPath" :alt="s__('IDE|Successful commit')" />
     </div>
-    <div class="gl-mr-3 gl-ml-3">
+    <div class="gl-ml-3 gl-mr-3">
       <div class="text-content text-center">
         <h4>{{ __('All changes are committed') }}</h4>
         <p v-safe-html="lastCommitMsg"></p>

app/assets/javascripts/ide/components/file_row_extra.vue

@@ -65,7 +65,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-float-right ide-file-icon-holder">
+  <div class="ide-file-icon-holder gl-float-right">
     <mr-file-icon v-if="file.mrChange" />
     <span v-if="showTreeChangesCount" class="ide-tree-changes">
       {{ changesCount }}
@@ -76,7 +76,7 @@ export default {
         data-container="body"
         data-placement="right"
         name="file-modified"
-        class="gl-ml-2 ide-file-modified"
+        class="ide-file-modified gl-ml-2"
       />
     </span>
     <changed-file-icon

app/assets/javascripts/ide/components/file_templates/bar.vue

@@ -82,7 +82,7 @@ export default {
 
 <template>
   <div
-    class="gl-display-flex gl-align-items-center ide-file-templates gl-relative gl-z-1"
+    class="ide-file-templates gl-relative gl-z-1 gl-flex gl-items-center"
     data-testid="file-templates-bar"
   >
     <strong class="gl-mr-3"> {{ $options.i18n.barLabel }} </strong>

app/assets/javascripts/ide/components/ide.vue

@@ -134,7 +134,7 @@ export default {
 
 <template>
   <article
-    class="ide position-relative gl-flex flex-column align-items-stretch"
+    class="ide position-relative flex-column align-items-stretch gl-flex"
     :class="{ [`theme-${themeName}`]: themeName }"
   >
     <cannot-push-code-alert

app/assets/javascripts/ide/components/ide_review.vue

@@ -60,7 +60,7 @@ export default {
           @click="updateViewer"
         />
       </div>
-      <div class="gl-mt-2 ide-review-sub-header">
+      <div class="ide-review-sub-header gl-mt-2">
         <template v-if="showLatestChangesText">
           {{ __('Latest changes') }}
         </template>

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -45,7 +45,7 @@ export default {
     </template>
     <template v-else>
       <ide-project-header :project="currentProject" />
-      <div class="ide-context-body gl-flex flex-fill">
+      <div class="ide-context-body flex-fill gl-flex">
         <activity-bar />
         <div class="multi-file-commit-panel-inner" data-testid="ide-side-bar-inner">
           <div class="multi-file-commit-panel-inner-content">

app/assets/javascripts/ide/components/ide_status_mr.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex-center gl-flex-nowrap text-nowrap js-ide-status-mr">
+  <div class="d-flex-center text-nowrap js-ide-status-mr gl-flex-nowrap">
     <gl-icon name="merge-request" />
     <span class="ml-1 gl-hidden sm:gl-block">{{ s__('WebIDE|Merge request') }}</span>
     <gl-link class="ml-1" :href="url">{{ text }}</gl-link>

app/assets/javascripts/ide/components/ide_tree.vue

@@ -55,24 +55,24 @@ export default {
   <ide-tree-list @tree-ready="$emit('tree-ready')">
     <template #header>
       {{ __('Edit') }}
-      <div class="ide-tree-actions gl-ml-auto gl-display-flex" data-testid="ide-root-actions">
+      <div class="ide-tree-actions gl-ml-auto gl-flex" data-testid="ide-root-actions">
         <new-entry-button
           :label="__('New file')"
           :show-label="false"
-          class="gl-display-flex gl-border-0 gl-p-0 gl-mr-5"
+          class="gl-mr-5 gl-flex gl-border-0 gl-p-0"
           icon="doc-new"
           @click="createNewFile()"
         />
         <upload
           :show-label="false"
-          class="gl-display-flex gl-mr-5"
+          class="gl-mr-5 gl-flex"
           button-css-classes="gl-border-0 gl-p-0"
           @create="createTempEntry"
         />
         <new-entry-button
           :label="__('New directory')"
           :show-label="false"
-          class="gl-display-flex gl-border-0 gl-p-0"
+          class="gl-flex gl-border-0 gl-p-0"
           icon="folder-new"
           @click="createNewFolder()"
         />

app/assets/javascripts/ide/components/jobs/detail.vue

@@ -77,13 +77,13 @@ export default {
 </script>
 
 <template>
-  <div class="ide-pipeline build-page gl-flex flex-column flex-fill">
+  <div class="ide-pipeline build-page flex-column flex-fill gl-flex">
     <header class="ide-job-header gl-flex gl-items-center">
       <gl-button category="secondary" icon="chevron-left" size="small" @click="setDetailJob(null)">
         {{ __('View jobs') }}
       </gl-button>
     </header>
-    <div class="top-bar gl-flex border-left-0 mr-3">
+    <div class="top-bar border-left-0 mr-3 gl-flex">
       <job-description :job="detailJob" />
       <div class="controllers ml-auto">
         <a
@@ -101,7 +101,7 @@ export default {
         <scroll-button :disabled="isScrolledToBottom" direction="down" @click="scrollDown" />
       </div>
     </div>
-    <pre ref="buildJobLog" class="build-log mb-0 gl-h-full mr-3" @scroll="scrollBuildLog">
+    <pre ref="buildJobLog" class="build-log mb-0 mr-3 gl-h-full" @scroll="scrollBuildLog">
       <code
         v-show="!detailJob.isLoading"
         v-safe-html="jobOutput"

app/assets/javascripts/ide/components/jobs/detail/description.vue

@@ -24,7 +24,7 @@ export default {
 
 <template>
   <div class="gl-flex gl-items-center">
-    <ci-icon :status="job.status" class="gl-items-center gl-border gl-inline-flex gl-z-1" />
+    <ci-icon :status="job.status" class="gl-border gl-z-1 gl-inline-flex gl-items-center" />
     <span class="gl-ml-3">
       {{ job.name }}
       <a