Remove .issue-box from Issuable list Vue.js App

Affects Jira Issues List and TestCases List
Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

app/assets/javascripts/issuable_list/components/issuable_item.vue

@@ -128,7 +128,7 @@ export default {
 
 <template>
   <li class="issue gl-px-5!">
-    <div class="issue-box">
+    <div class="issuable-info-container">
       <div v-if="showCheckbox" class="issue-check">
         <gl-form-checkbox
           class="gl-mr-0"
@@ -136,101 +136,99 @@ export default {
           @input="$emit('checked-input', $event)"
         />
       </div>
-      <div class="issuable-info-container">
-        <div class="issuable-main-info">
-          <div data-testid="issuable-title" class="issue-title title">
-            <span class="issue-title-text" dir="auto">
-              <gl-link :href="issuable.webUrl" v-bind="issuableTitleProps"
-                >{{ issuable.title
-                }}<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2"
-              /></gl-link>
-            </span>
-          </div>
-          <div class="issuable-info">
-            <slot v-if="hasSlotContents('reference')" name="reference"></slot>
-            <span v-else data-testid="issuable-reference" class="issuable-reference"
-              >{{ issuableSymbol }}{{ issuable.iid }}</span
-            >
-            <span class="issuable-authored d-none d-sm-inline-block">
-              &middot;
-              <span
-                v-gl-tooltip:tooltipcontainer.bottom
-                data-testid="issuable-created-at"
-                :title="tooltipTitle(issuable.createdAt)"
-                >{{ createdAt }}</span
-              >
-              {{ __('by') }}
-              <slot v-if="hasSlotContents('author')" name="author"></slot>
-              <gl-link
-                v-else
-                :data-user-id="authorId"
-                :data-username="author.username"
-                :data-name="author.name"
-                :data-avatar-url="author.avatarUrl"
-                :href="author.webUrl"
-                data-testid="issuable-author"
-                class="author-link js-user-link"
-              >
-                <span class="author">{{ author.name }}</span>
-              </gl-link>
-            </span>
-            <slot name="timeframe"></slot>
-            &nbsp;
-            <gl-label
-              v-for="(label, index) in labels"
-              :key="index"
-              :background-color="label.color"
-              :title="labelTitle(label)"
-              :description="label.description"
-              :scoped="scopedLabel(label)"
-              :target="labelTarget(label)"
-              :class="{ 'gl-ml-2': index }"
-              size="sm"
-            />
-          </div>
+      <div class="issuable-main-info">
+        <div data-testid="issuable-title" class="issue-title title">
+          <span class="issue-title-text" dir="auto">
+            <gl-link :href="issuable.webUrl" v-bind="issuableTitleProps"
+              >{{ issuable.title
+              }}<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2"
+            /></gl-link>
+          </span>
         </div>
-        <div class="issuable-meta">
-          <ul v-if="showIssuableMeta" class="controls">
-            <li v-if="hasSlotContents('status')" class="issuable-status">
-              <slot name="status"></slot>
-            </li>
-            <li
-              v-if="showDiscussions"
-              data-testid="issuable-discussions"
-              class="issuable-comments gl-display-none gl-display-sm-block"
-            >
-              <gl-link
-                v-gl-tooltip:tooltipcontainer.top
-                :title="__('Comments')"
-                :href="`${issuable.webUrl}#notes`"
-                :class="{ 'no-comments': !issuable.userDiscussionsCount }"
-                class="gl-reset-color!"
-              >
-                <gl-icon name="comments" />
-                {{ issuable.userDiscussionsCount }}
-              </gl-link>
-            </li>
-            <li v-if="assignees.length" class="gl-display-flex">
-              <issuable-assignees
-                :assignees="issuable.assignees"
-                :icon-size="16"
-                :max-visible="4"
-                img-css-classes="gl-mr-2!"
-                class="gl-align-items-center gl-display-flex gl-ml-3"
-              />
-            </li>
-          </ul>
-          <div
-            data-testid="issuable-updated-at"
-            class="float-right issuable-updated-at d-none d-sm-inline-block"
+        <div class="issuable-info">
+          <slot v-if="hasSlotContents('reference')" name="reference"></slot>
+          <span v-else data-testid="issuable-reference" class="issuable-reference"
+            >{{ issuableSymbol }}{{ issuable.iid }}</span
           >
+          <span class="issuable-authored d-none d-sm-inline-block">
+            &middot;
             <span
               v-gl-tooltip:tooltipcontainer.bottom
-              :title="tooltipTitle(issuable.updatedAt)"
-              class="issuable-updated-at"
-              >{{ updatedAt }}</span
+              data-testid="issuable-created-at"
+              :title="tooltipTitle(issuable.createdAt)"
+              >{{ createdAt }}</span
+            >
+            {{ __('by') }}
+            <slot v-if="hasSlotContents('author')" name="author"></slot>
+            <gl-link
+              v-else
+              :data-user-id="authorId"
+              :data-username="author.username"
+              :data-name="author.name"
+              :data-avatar-url="author.avatarUrl"
+              :href="author.webUrl"
+              data-testid="issuable-author"
+              class="author-link js-user-link"
+            >
+              <span class="author">{{ author.name }}</span>
+            </gl-link>
+          </span>
+          <slot name="timeframe"></slot>
+          &nbsp;
+          <gl-label
+            v-for="(label, index) in labels"
+            :key="index"
+            :background-color="label.color"
+            :title="labelTitle(label)"
+            :description="label.description"
+            :scoped="scopedLabel(label)"
+            :target="labelTarget(label)"
+            :class="{ 'gl-ml-2': index }"
+            size="sm"
+          />
+        </div>
+      </div>
+      <div class="issuable-meta">
+        <ul v-if="showIssuableMeta" class="controls">
+          <li v-if="hasSlotContents('status')" class="issuable-status">
+            <slot name="status"></slot>
+          </li>
+          <li
+            v-if="showDiscussions"
+            data-testid="issuable-discussions"
+            class="issuable-comments gl-display-none gl-display-sm-block"
+          >
+            <gl-link
+              v-gl-tooltip:tooltipcontainer.top
+              :title="__('Comments')"
+              :href="`${issuable.webUrl}#notes`"
+              :class="{ 'no-comments': !issuable.userDiscussionsCount }"
+              class="gl-reset-color!"
             >
-          </div>
+              <gl-icon name="comments" />
+              {{ issuable.userDiscussionsCount }}
+            </gl-link>
+          </li>
+          <li v-if="assignees.length" class="gl-display-flex">
+            <issuable-assignees
+              :assignees="issuable.assignees"
+              :icon-size="16"
+              :max-visible="4"
+              img-css-classes="gl-mr-2!"
+              class="gl-align-items-center gl-display-flex gl-ml-3"
+            />
+          </li>
+        </ul>
+        <div
+          data-testid="issuable-updated-at"
+          class="float-right issuable-updated-at d-none d-sm-inline-block"
+        >
+          <span
+            v-gl-tooltip:tooltipcontainer.bottom
+            :title="tooltipTitle(issuable.updatedAt)"
+            class="issuable-updated-at"
+            >{{ updatedAt }}</span
+          >
         </div>
       </div>
     </div>

ee/changelogs/unreleased/284602-remove-issue-box-vue.yml

+---
+title: Remove .issue-box from Issuable list Vue.js App
+merge_request: 47999
+author: Takuya Noguchi
+type: performance