Add latest changes from gitlab-org/gitlab@master

2 files changed, 93 insertions, 62 deletions

diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue
index 11aa7b91745..cb8220a0407 100644
--- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue
+++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue
@@ -30,12 +30,22 @@ export default {
       type: Array,
       required: true,
     },
+    showProjectIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
 
 <template>
   <ul class="gl-p-0 gl-list-style-none">
-    <projects-list-item v-for="project in projects" :key="project.id" :project="project" />
+    <projects-list-item
+      v-for="project in projects"
+      :key="project.id"
+      :project="project"
+      :show-project-icon="showProjectIcon"
+    />
   </ul>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
index a6535e4a514..d919f76e684 100644
--- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
@@ -34,6 +34,7 @@ export default {
     moreTopics: __('More topics'),
     updated: __('Updated'),
   },
+  avatarSize: { default: 32, md: 48 },
   safeHtmlConfig: {
     ADD_TAGS: ['gl-emoji'],
   },
@@ -78,6 +79,11 @@ export default {
       type: Object,
       required: true,
     },
+    showProjectIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -153,72 +159,87 @@ export default {
 
 <template>
   <li class="projects-list-item gl-py-5 gl-md-display-flex gl-align-items-center gl-border-b">
-    <gl-avatar-labeled
-      class="gl-flex-grow-1"
-      :entity-id="project.id"
-      :entity-name="project.name"
-      :label="project.name"
-      :label-link="project.webUrl"
-      shape="rect"
-      :size="48"
-    >
-      <template #meta>
-        <gl-icon
-          v-if="visibility"
-          v-gl-tooltip="visibilityTooltip"
-          :name="visibilityIcon"
-          class="gl-text-secondary gl-ml-3"
-        />
-        <user-access-role-badge v-if="shouldShowAccessLevel" class="gl-ml-3">{{
-          accessLevelLabel
-        }}</user-access-role-badge>
-      </template>
-      <div
-        v-if="project.descriptionHtml"
-        v-safe-html:[$options.safeHtmlConfig]="project.descriptionHtml"
-        class="gl-font-sm gl-overflow-hidden gl-line-height-20 description"
-        data-testid="project-description"
-      ></div>
-      <div v-if="hasTopics" class="gl-mt-3" data-testid="project-topics">
-        <div
-          class="gl-w-full gl-display-inline-flex gl-flex-wrap gl-font-base gl-font-weight-normal gl-align-items-center gl-mx-n2 gl-my-n2"
-        >
-          <span class="gl-p-2 gl-text-secondary">{{ $options.i18n.topics }}:</span>
-          <div v-for="topic in visibleTopics" :key="topic" class="gl-p-2">
-            <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
-              {{ topicTitle(topic) }}
-            </gl-badge>
+    <div class="gl-display-flex gl-flex-grow-1">
+      <gl-icon
+        v-if="showProjectIcon"
+        class="gl-mr-3 gl-mt-3 gl-md-mt-5 gl-flex-shrink-0 gl-text-secondary"
+        name="project"
+      />
+      <gl-avatar-labeled
+        :entity-id="project.id"
+        :entity-name="project.name"
+        :label="project.name"
+        :label-link="project.webUrl"
+        shape="rect"
+        :size="$options.avatarSize"
+      >
+        <template #meta>
+          <div class="gl-px-2">
+            <div class="gl-mx-n2 gl-display-flex gl-align-items-center gl-flex-wrap">
+              <div class="gl-px-2">
+                <gl-icon
+                  v-if="visibility"
+                  v-gl-tooltip="visibilityTooltip"
+                  :name="visibilityIcon"
+                  class="gl-text-secondary"
+                />
+              </div>
+              <div class="gl-px-2">
+                <user-access-role-badge v-if="shouldShowAccessLevel">{{
+                  accessLevelLabel
+                }}</user-access-role-badge>
+              </div>
+            </div>
           </div>
-          <template v-if="popoverTopics.length">
-            <div
-              :id="topicsPopoverTarget"
-              class="gl-p-2 gl-text-secondary"
-              role="button"
-              tabindex="0"
-            >
-              <gl-sprintf :message="$options.i18n.topicsPopoverTargetText">
-                <template #count>{{ popoverTopics.length }}</template>
-              </gl-sprintf>
+        </template>
+        <div
+          v-if="project.descriptionHtml"
+          v-safe-html:[$options.safeHtmlConfig]="project.descriptionHtml"
+          class="gl-font-sm gl-overflow-hidden gl-line-height-20 description md"
+          data-testid="project-description"
+        ></div>
+        <div v-if="hasTopics" class="gl-mt-3" data-testid="project-topics">
+          <div
+            class="gl-w-full gl-display-inline-flex gl-flex-wrap gl-font-base gl-font-weight-normal gl-align-items-center gl-mx-n2 gl-my-n2"
+          >
+            <span class="gl-p-2 gl-text-secondary">{{ $options.i18n.topics }}:</span>
+            <div v-for="topic in visibleTopics" :key="topic" class="gl-p-2">
+              <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
+                {{ topicTitle(topic) }}
+              </gl-badge>
             </div>
-            <gl-popover :target="topicsPopoverTarget" :title="$options.i18n.moreTopics">
-              <div class="gl-font-base gl-font-weight-normal gl-mx-n2 gl-my-n2">
-                <div
-                  v-for="topic in popoverTopics"
-                  :key="topic"
-                  class="gl-p-2 gl-display-inline-block"
-                >
-                  <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
-                    {{ topicTitle(topic) }}
-                  </gl-badge>
-                </div>
+            <template v-if="popoverTopics.length">
+              <div
+                :id="topicsPopoverTarget"
+                class="gl-p-2 gl-text-secondary"
+                role="button"
+                tabindex="0"
+              >
+                <gl-sprintf :message="$options.i18n.topicsPopoverTargetText">
+                  <template #count>{{ popoverTopics.length }}</template>
+                </gl-sprintf>
               </div>
-            </gl-popover>
-          </template>
+              <gl-popover :target="topicsPopoverTarget" :title="$options.i18n.moreTopics">
+                <div class="gl-font-base gl-font-weight-normal gl-mx-n2 gl-my-n2">
+                  <div
+                    v-for="topic in popoverTopics"
+                    :key="topic"
+                    class="gl-p-2 gl-display-inline-block"
+                  >
+                    <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
+                      {{ topicTitle(topic) }}
+                    </gl-badge>
+                  </div>
+                </div>
+              </gl-popover>
+            </template>
+          </div>
         </div>
-      </div>
-    </gl-avatar-labeled>
+      </gl-avatar-labeled>
+    </div>
     <div
-      class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-pl-10 gl-md-pl-0 gl-md-mt-0"
+      class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0"
+      :class="showProjectIcon ? 'gl-pl-11' : 'gl-pl-8'"
     >
       <div class="gl-display-flex gl-align-items-center gl-gap-x-3">
         <gl-badge v-if="project.archived" variant="warning">{{ $options.i18n.archived }}</gl-badge>