Add latest changes from gitlab-org/gitlab@master

25 files changed, 211 insertions, 116 deletions

diff --git a/app/assets/javascripts/groups/init_group_readme.js b/app/assets/javascripts/groups/init_group_readme.js
new file mode 100644
index 00000000000..7cde64fed4d
--- /dev/null
+++ b/app/assets/javascripts/groups/init_group_readme.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import apolloProvider from '~/repository/graphql';
+import FilePreview from '~/repository/components/preview/index.vue';
+
+Vue.use(VueApollo);
+
+export const initGroupReadme = () => {
+  const el = document.getElementById('js-group-readme');
+
+  if (!el) return false;
+
+  const { webPath, name } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    render(createElement) {
+      return createElement(FilePreview, {
+        props: {
+          blob: { webPath, name },
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/import_entities/components/import_status.vue b/app/assets/javascripts/import_entities/components/import_status.vue
index ec2ab9d0c3d..f4facbba273 100644
--- a/app/assets/javascripts/import_entities/components/import_status.vue
+++ b/app/assets/javascripts/import_entities/components/import_status.vue
@@ -109,7 +109,7 @@ export default {
         return isIncomplete
           ? {
               icon: 'status-alert',
-              text: __('Partial import'),
+              text: s__('Import|Partially completed'),
               variant: 'warning',
             }
           : {
@@ -146,14 +146,8 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-inline-block gl-w-13">
-      <gl-badge
-        :icon="mappedStatus.icon"
-        :variant="mappedStatus.variant"
-        size="md"
-        icon-size="sm"
-        class="gl-mr-2"
-      >
+    <div class="gl-display-inline-block">
+      <gl-badge :icon="mappedStatus.icon" :variant="mappedStatus.variant" size="md" icon-size="sm">
         {{ mappedStatus.text }}
       </gl-badge>
     </div>
diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index ac59da6d6d3..3469cd29036 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -180,18 +180,20 @@ export default {
       class="gl-mb-5"
     />
     <div v-if="repositories.length" class="gl-w-full">
-      <table>
-        <thead class="gl-border-0 gl-border-solid gl-border-t-1 gl-border-gray-100">
-          <th class="gl-w-half gl-p-4 gl-vertical-align-top gl-border-b-1">
-            {{ fromHeaderText }}
-          </th>
-          <th class="gl-w-half gl-p-4 gl-vertical-align-top gl-border-b-1">
-            {{ __('To GitLab') }}
-          </th>
-          <th class="gl-p-4 gl-vertical-align-top gl-border-b-1">
-            {{ __('Status') }}
-          </th>
-          <th class="gl-p-4 gl-vertical-align-top gl-border-b-1"></th>
+      <table class="table gl-table">
+        <thead>
+          <tr>
+            <th class="gl-w-half">
+              {{ fromHeaderText }}
+            </th>
+            <th class="gl-w-half">
+              {{ __('To GitLab') }}
+            </th>
+            <th>
+              {{ __('Status') }}
+            </th>
+            <th></th>
+          </tr>
         </thead>
         <tbody>
           <template v-for="repo in repositories">
diff --git a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
index a5f29490e24..66bd562ee4d 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
@@ -155,16 +155,16 @@ export default {
 
 <template>
   <tr
-    class="gl-h-11 gl-border-0 gl-border-solid gl-border-t-1 gl-border-gray-100 gl-h-11 gl-vertical-align-top"
+    class="gl-h-11"
     data-qa-selector="project_import_row"
     :data-qa-source-project="repo.importSource.fullName"
   >
-    <td class="gl-p-4 gl-vertical-align-top">
+    <td>
       <gl-link :href="repo.importSource.providerLink" target="_blank" data-testid="providerLink"
         >{{ repo.importSource.fullName }}
         <gl-icon v-if="repo.importSource.providerLink" name="external-link" />
       </gl-link>
-      <div v-if="isFinished" class="gl-font-sm">
+      <div v-if="isFinished" class="gl-font-sm gl-mt-2">
         <gl-sprintf :message="s__('BulkImport|Last imported to %{link}')">
           <template #link>
             <gl-link
@@ -179,52 +179,50 @@ export default {
         </gl-sprintf>
       </div>
     </td>
-    <td
-      class="gl-display-flex gl-sm-flex-wrap-wrap gl-p-4 gl-pt-5 gl-vertical-align-top"
-      data-testid="fullPath"
-      data-qa-selector="project_path_content"
-    >
-      <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template>
-      <template v-else-if="isImportNotStarted || isSelectedForReimport">
-        <div class="gl-display-flex gl-align-items-stretch gl-w-full">
-          <import-group-dropdown #default="{ namespaces }" :text="importTarget.targetNamespace">
-            <template v-if="namespaces.length">
-              <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
-              <gl-dropdown-item
-                v-for="ns in namespaces"
-                :key="ns.fullPath"
-                data-qa-selector="target_group_dropdown_item"
-                :data-qa-group-name="ns.fullPath"
-                @click="updateImportTarget({ targetNamespace: ns.fullPath })"
-              >
-                {{ ns.fullPath }}
-              </gl-dropdown-item>
-              <gl-dropdown-divider />
-            </template>
-            <gl-dropdown-section-header>{{ __('Users') }}</gl-dropdown-section-header>
-            <gl-dropdown-item @click="updateImportTarget({ targetNamespace: userNamespace })">{{
-              userNamespace
-            }}</gl-dropdown-item>
-          </import-group-dropdown>
-          <div
-            class="gl-px-3 gl-display-flex gl-align-items-center gl-border-solid gl-border-0 gl-border-t-1 gl-border-b-1"
-          >
-            /
+    <td data-testid="fullPath" data-qa-selector="project_path_content">
+      <div class="gl-display-flex gl-sm-flex-wrap-wrap">
+        <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template>
+        <template v-else-if="isImportNotStarted || isSelectedForReimport">
+          <div class="gl-display-flex gl-align-items-stretch gl-w-full">
+            <import-group-dropdown #default="{ namespaces }" :text="importTarget.targetNamespace">
+              <template v-if="namespaces.length">
+                <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
+                <gl-dropdown-item
+                  v-for="ns in namespaces"
+                  :key="ns.fullPath"
+                  data-qa-selector="target_group_dropdown_item"
+                  :data-qa-group-name="ns.fullPath"
+                  @click="updateImportTarget({ targetNamespace: ns.fullPath })"
+                >
+                  {{ ns.fullPath }}
+                </gl-dropdown-item>
+                <gl-dropdown-divider />
+              </template>
+              <gl-dropdown-section-header>{{ __('Users') }}</gl-dropdown-section-header>
+              <gl-dropdown-item @click="updateImportTarget({ targetNamespace: userNamespace })">{{
+                userNamespace
+              }}</gl-dropdown-item>
+            </import-group-dropdown>
+            <div
+              class="gl-px-3 gl-display-flex gl-align-items-center gl-border-solid gl-border-0 gl-border-t-1 gl-border-b-1"
+            >
+              /
+            </div>
+            <gl-form-input
+              ref="newNameInput"
+              v-model="newNameInput"
+              class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
+              data-qa-selector="project_path_field"
+            />
           </div>
-          <gl-form-input
-            ref="newNameInput"
-            v-model="newNameInput"
-            class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
-            data-qa-selector="project_path_field"
-          />
-        </div>
-      </template>
-      <template v-else-if="repo.importedProject">{{ displayFullPath }}</template>
+        </template>
+        <template v-else-if="repo.importedProject">{{ displayFullPath }}</template>
+      </div>
     </td>
-    <td class="gl-p-4 gl-vertical-align-top" data-qa-selector="import_status_indicator">
+    <td data-qa-selector="import_status_indicator">
       <import-status :status="importStatus" :stats="stats" />
     </td>
-    <td data-testid="actions" class="gl-vertical-align-top gl-pt-4 gl-white-space-nowrap">
+    <td data-testid="actions" class="gl-white-space-nowrap">
       <gl-tooltip :target="() => $refs.cancelButton.$el">
         <div class="gl-text-left">
           <p class="gl-mb-5 gl-font-weight-bold">{{ s__('ImportProjects|Cancel import') }}</p>
diff --git a/app/assets/javascripts/pages/groups/show/index.js b/app/assets/javascripts/pages/groups/show/index.js
index 53bceb3a6f0..f6a4ca0f360 100644
--- a/app/assets/javascripts/pages/groups/show/index.js
+++ b/app/assets/javascripts/pages/groups/show/index.js
@@ -1,5 +1,6 @@
 import leaveByUrl from '~/namespaces/leave_by_url';
 import { initGroupOverviewTabs } from '~/groups/init_overview_tabs';
+import { initGroupReadme } from '~/groups/init_group_readme';
 import initReadMore from '~/read_more';
 import initGroupDetails from '../shared/group_details';
 
@@ -7,3 +8,4 @@ leaveByUrl('group');
 initGroupDetails();
 initGroupOverviewTabs();
 initReadMore();
+initGroupReadme();
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index b7a9583cae9..00fb813728e 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -2,6 +2,7 @@
 import { GlButton, GlCollapse } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { isCollapsed, toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager';
+import { SUPER_SIDEBAR_PEEK_DELAY } from '../constants';
 import UserBar from './user_bar.vue';
 import SidebarPortalTarget from './sidebar_portal_target.vue';
 import ContextSwitcherToggle from './context_switcher_toggle.vue';
@@ -32,7 +33,8 @@ export default {
   data() {
     return {
       contextSwitcherOpen: false,
-      isCollapased: isCollapsed(),
+      isInert: isCollapsed(),
+      isPeek: false,
     };
   },
   computed: {
@@ -47,6 +49,18 @@ export default {
     onContextSwitcherShown() {
       this.$refs['context-switcher'].focusInput();
     },
+    onMouseOver() {
+      setTimeout(() => {
+        this.isPeek = true;
+        this.isInert = false;
+      }, SUPER_SIDEBAR_PEEK_DELAY);
+    },
+    onMouseLeave() {
+      setTimeout(() => {
+        this.isPeek = false;
+        this.isInert = true;
+      }, SUPER_SIDEBAR_PEEK_DELAY);
+    },
   },
 };
 </script>
@@ -54,14 +68,21 @@ export default {
 <template>
   <div>
     <div class="super-sidebar-overlay" @click="collapseSidebar"></div>
+    <div
+      v-if="!isPeek"
+      class="super-sidebar-hover-area gl-fixed gl-left-0 gl-top-0 gl-bottom-0 gl-w-3"
+      data-testid="super-sidebar-hover-area"
+      @mouseover="onMouseOver"
+    ></div>
     <aside
       id="super-sidebar"
       class="super-sidebar"
-      :class="{ 'gl-visibility-hidden': isCollapased }"
+      :class="{ 'gl-visibility-hidden': isInert, 'super-sidebar-peek': isPeek }"
       data-testid="super-sidebar"
       data-qa-selector="navbar"
-      :inert="isCollapased"
+      :inert="isInert"
       tabindex="-1"
+      @mouseleave="onMouseLeave"
     >
       <gl-button
         class="super-sidebar-skip-to gl-sr-only-focusable gl-absolute gl-left-3 gl-right-3 gl-top-3"
@@ -70,7 +91,7 @@ export default {
       >
         {{ $options.i18n.skipToMainContent }}
       </gl-button>
-      <user-bar :sidebar-data="sidebarData" />
+      <user-bar :has-collapse-button="!isPeek" :sidebar-data="sidebarData" />
       <div class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-overflow-hidden">
         <div class="gl-flex-grow-1 gl-overflow-auto">
           <context-switcher-toggle
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 62161f2846a..34af935434c 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -50,6 +50,11 @@ export default {
   },
   inject: ['rootPath'],
   props: {
+    hasCollapseButton: {
+      default: true,
+      type: Boolean,
+      required: false,
+    },
     sidebarData: {
       type: Object,
       required: true,
@@ -89,10 +94,12 @@ export default {
       >
       <div class="gl-flex-grow-1"></div>
       <gl-button
+        v-if="hasCollapseButton"
         v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.collapseSidebar"
         aria-controls="super-sidebar"
         aria-expanded="true"
         :aria-label="$options.i18n.navigationSidebar"
+        data-testid="super-sidebar-collapse-button"
         icon="sidebar"
         category="tertiary"
         @click="collapseSidebar"
diff --git a/app/assets/javascripts/super_sidebar/constants.js b/app/assets/javascripts/super_sidebar/constants.js
index ad9d4bc43f2..23233ab7792 100644
--- a/app/assets/javascripts/super_sidebar/constants.js
+++ b/app/assets/javascripts/super_sidebar/constants.js
@@ -13,5 +13,7 @@ export const portalState = Vue.observable({
 export const MAX_FREQUENT_PROJECTS_COUNT = 5;
 export const MAX_FREQUENT_GROUPS_COUNT = 3;
 
+export const SUPER_SIDEBAR_PEEK_DELAY = 150;
+
 export const TRACKING_UNKNOWN_ID = 'item_without_id';
 export const CLICK_MENU_ITEM_ACTION = 'click_menu_item';
diff --git a/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue b/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue
index 66a01867ec0..e9683924ff8 100644
--- a/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue
+++ b/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue
@@ -1,17 +1,10 @@
 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { PROJECT_STORAGE_TYPES } from '../constants';
 import { descendingStorageUsageSort } from '../utils';
 
 export default {
-  components: {
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   mixins: [glFeatureFlagMixin()],
   props: {
     rootStorageStatistics: {
@@ -36,7 +29,6 @@ export default {
         wikiSize,
         snippetsSize,
       } = this.rootStorageStatistics;
-      const artifactsSize = buildArtifactsSize + pipelineArtifactsSize;
 
       if (storageSize === 0) {
         return null;
@@ -69,9 +61,15 @@ export default {
         },
         {
           id: 'buildArtifactsSize',
-          style: this.usageStyle(this.barRatio(artifactsSize)),
-          class: 'gl-bg-data-viz-green-600',
-          size: artifactsSize,
+          style: this.usageStyle(this.barRatio(buildArtifactsSize)),
+          class: 'gl-bg-data-viz-green-500',
+          size: buildArtifactsSize,
+        },
+        {
+          id: 'pipelineArtifactsSize',
+          style: this.usageStyle(this.barRatio(pipelineArtifactsSize)),
+          class: 'gl-bg-data-viz-green-800',
+          size: pipelineArtifactsSize,
         },
         {
           id: 'wikiSize',
@@ -92,11 +90,10 @@ export default {
           const storageTypeExtraData = PROJECT_STORAGE_TYPES.find(
             (type) => storageType.id === type.id,
           );
-          const { name, tooltip } = storageTypeExtraData || {};
+          const name = storageTypeExtraData?.name;
 
           return {
             name,
-            tooltip,
             ...storageType,
           };
         });
@@ -148,15 +145,6 @@ export default {
         <span class="gl-text-gray-500 gl-font-sm">
           {{ formatSize(storageType.size) }}
         </span>
-        <span
-          v-if="storageType.tooltip"
-          v-gl-tooltip
-          :title="storageType.tooltip"
-          :aria-label="storageType.tooltip"
-          class="gl-ml-2"
-        >
-          <gl-icon name="question" :size="12" />
-        </span>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/usage_quotas/storage/constants.js b/app/assets/javascripts/usage_quotas/storage/constants.js
index ebd2f8357ef..8e3eaff4496 100644
--- a/app/assets/javascripts/usage_quotas/storage/constants.js
+++ b/app/assets/javascripts/usage_quotas/storage/constants.js
@@ -27,40 +27,44 @@ export const PROJECT_TABLE_LABEL_USAGE = s__('UsageQuota|Usage');
 export const PROJECT_STORAGE_TYPES = [
   {
     id: 'containerRegistrySize',
-    name: s__('UsageQuota|Container Registry'),
+    name: __('Container Registry'),
     description: s__(
       'UsageQuota|Gitlab-integrated Docker Container Registry for storing Docker Images.',
     ),
   },
   {
     id: 'buildArtifactsSize',
-    name: s__('UsageQuota|Artifacts'),
-    description: s__('UsageQuota|Pipeline artifacts and job artifacts, created with CI/CD.'),
-    tooltip: s__('UsageQuota|Artifacts is a sum of build and pipeline artifacts.'),
+    name: __('Job artifacts'),
+    description: s__('UsageQuota|Job artifacts created by CI/CD.'),
+  },
+  {
+    id: 'pipelineArtifactsSize',
+    name: __('Pipeline artifacts'),
+    description: s__('UsageQuota|Pipeline artifacts created by CI/CD.'),
   },
   {
     id: 'lfsObjectsSize',
-    name: s__('UsageQuota|LFS storage'),
+    name: __('LFS'),
     description: s__('UsageQuota|Audio samples, videos, datasets, and graphics.'),
   },
   {
     id: 'packagesSize',
-    name: s__('UsageQuota|Packages'),
+    name: __('Packages'),
     description: s__('UsageQuota|Code packages and container images.'),
   },
   {
     id: 'repositorySize',
-    name: s__('UsageQuota|Repository'),
+    name: __('Repository'),
     description: s__('UsageQuota|Git repository.'),
   },
   {
     id: 'snippetsSize',
-    name: s__('UsageQuota|Snippets'),
+    name: __('Snippets'),
     description: s__('UsageQuota|Shared bits of code and text.'),
   },
   {
     id: 'wikiSize',
-    name: s__('UsageQuota|Wiki'),
+    name: __('Wiki'),
     description: s__('UsageQuota|Wiki content.'),
   },
 ];
@@ -76,6 +80,9 @@ export const projectHelpPaths = {
   buildArtifacts: helpPagePath('ci/pipelines/job_artifacts', {
     anchor: 'when-job-artifacts-are-deleted',
   }),
+  pipelineArtifacts: helpPagePath('/ci/pipelines/pipeline_artifacts', {
+    anchor: 'when-pipeline-artifacts-are-deleted',
+  }),
   packages: helpPagePath('user/packages/package_registry/index.md', {
     anchor: 'reduce-storage-usage',
   }),
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index bc7df3f3621..f568e23a30a 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -710,6 +710,7 @@ export default {
           :full-path="fullPath"
           :fetch-by-iid="fetchByIid"
           :work-item-type="workItemType"
+          :is-modal="isModal"
           class="gl-pt-5"
           @error="updateError = $event"
         />
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 48c87682897..52561e5deb1 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -49,7 +49,9 @@
   }
 
   &:not(.super-sidebar-loading) {
-    transition: transform $gl-transition-duration-medium;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform $gl-transition-duration-medium ease-out;
+    }
   }
 
   .user-bar {
@@ -154,9 +156,26 @@
   display: none;
 }
 
+.super-sidebar-peek {
+  @include gl-shadow;
+  border-right: 0;
+  transform: translate3d(0, 0, 0) !important;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 100ms ease-out !important;
+  }
+}
+
+.super-sidebar-hover-area {
+  z-index: $super-sidebar-z-index;
+}
+
 .page-with-super-sidebar {
   padding-left: 0;
-  transition: padding-left $gl-transition-duration-medium;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: padding-left $gl-transition-duration-medium ease-out;
+  }
 
   &:not(.page-with-super-sidebar-collapsed) {
     .super-sidebar-overlay {
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 65cae126795..aeaa46c2b86 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -1472,9 +1472,13 @@ kbd {
     transform: translate3d(0, 0, 0);
   }
 }
+@media (prefers-reduced-motion: no-preference) {
+}
 .page-with-super-sidebar {
   padding-left: 0;
 }
+@media (prefers-reduced-motion: no-preference) {
+}
 @media (min-width: 1200px) {
   .page-with-super-sidebar {
     padding-left: 256px;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index c5d9721d93c..e6589cb73a0 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -1472,9 +1472,13 @@ kbd {
     transform: translate3d(0, 0, 0);
   }
 }
+@media (prefers-reduced-motion: no-preference) {
+}
 .page-with-super-sidebar {
   padding-left: 0;
 }
+@media (prefers-reduced-motion: no-preference) {
+}
 @media (min-width: 1200px) {
   .page-with-super-sidebar {
     padding-left: 256px;
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index ce64ac1f21f..186fb609b1b 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -168,6 +168,17 @@ module GroupsHelper
     }
   end
 
+  def group_readme_app_data(group_readme)
+    {
+      web_path: group_readme.present.web_path,
+      name: group_readme.present.name
+    }
+  end
+
+  def show_group_readme?(group)
+    Feature.enabled?(:show_group_readme, group) && group.group_readme
+  end
+
   def enabled_git_access_protocol_options_for_group
     case ::Gitlab::CurrentSettings.enabled_git_access_protocol
     when nil, ""
diff --git a/app/models/pages/lookup_path.rb b/app/models/pages/lookup_path.rb
index 96c20ab03d4..ccf182e4b83 100644
--- a/app/models/pages/lookup_path.rb
+++ b/app/models/pages/lookup_path.rb
@@ -54,12 +54,12 @@ module Pages
     end
     strong_memoize_attr :prefix
 
-    def unique_url
+    def unique_host
       return unless project.project_setting.pages_unique_domain_enabled?
 
-      project.pages_unique_url
+      project.pages_unique_host
     end
-    strong_memoize_attr :unique_url
+    strong_memoize_attr :unique_host
 
     private
 
diff --git a/app/models/project.rb b/app/models/project.rb
index 6bc09930f3f..f49a1a65cba 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -2166,6 +2166,10 @@ class Project < ApplicationRecord
     pages_url_for(project_setting.pages_unique_domain)
   end
 
+  def pages_unique_host
+    URI(pages_unique_url).host
+  end
+
   def pages_namespace_url
     pages_url_for(pages_subdomain)
   end
diff --git a/app/views/groups/_group_readme.html.haml b/app/views/groups/_group_readme.html.haml
new file mode 100644
index 00000000000..724e82594e6
--- /dev/null
+++ b/app/views/groups/_group_readme.html.haml
@@ -0,0 +1,3 @@
+- return unless show_group_readme?(group)
+
+#js-group-readme{ data: group_readme_app_data(group.group_readme) }
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 92b5b843019..8d7a7dd6b1b 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -28,3 +28,5 @@
 = render_if_exists 'groups/group_activity_analytics', group: @group
 
 #js-group-overview-tabs{ data: group_overview_tabs_app_data(@group) }
+
+= render partial: 'groups/group_readme', locals: { group: @group }
diff --git a/app/workers/all_queues.yml b/app/workers/all_queues.yml
index 2a2b4a927d9..84bcec52d7f 100644
--- a/app/workers/all_queues.yml
+++ b/app/workers/all_queues.yml
@@ -374,7 +374,7 @@
   :tags: []
 - :name: cronjob:database_ci_namespace_mirrors_consistency_check
   :worker_name: Database::CiNamespaceMirrorsConsistencyCheckWorker
-  :feature_category: :pods
+  :feature_category: :cell
   :has_external_dependencies: false
   :urgency: :low
   :resource_boundary: :unknown
@@ -383,7 +383,7 @@
   :tags: []
 - :name: cronjob:database_ci_project_mirrors_consistency_check
   :worker_name: Database::CiProjectMirrorsConsistencyCheckWorker
-  :feature_category: :pods
+  :feature_category: :cell
   :has_external_dependencies: false
   :urgency: :low
   :resource_boundary: :unknown
@@ -518,7 +518,7 @@
   :tags: []
 - :name: cronjob:loose_foreign_keys_cleanup
   :worker_name: LooseForeignKeys::CleanupWorker
-  :feature_category: :pods
+  :feature_category: :cell
   :has_external_dependencies: false
   :urgency: :low
   :resource_boundary: :unknown
@@ -2939,7 +2939,7 @@
   :tags: []
 - :name: namespaces_process_sync_events
   :worker_name: Namespaces::ProcessSyncEventsWorker
-  :feature_category: :pods
+  :feature_category: :cell
   :has_external_dependencies: false
   :urgency: :high
   :resource_boundary: :unknown
@@ -3218,7 +3218,7 @@
   :tags: []
 - :name: projects_process_sync_events
   :worker_name: Projects::ProcessSyncEventsWorker
-  :feature_category: :pods
+  :feature_category: :cell
   :has_external_dependencies: false
   :urgency: :high
   :resource_boundary: :unknown
diff --git a/app/workers/database/ci_namespace_mirrors_consistency_check_worker.rb b/app/workers/database/ci_namespace_mirrors_consistency_check_worker.rb
index 8918dca372d..e01b29ad4ff 100644
--- a/app/workers/database/ci_namespace_mirrors_consistency_check_worker.rb
+++ b/app/workers/database/ci_namespace_mirrors_consistency_check_worker.rb
@@ -6,7 +6,7 @@ module Database
     include CronjobQueue # rubocop: disable Scalability/CronWorkerContext
 
     sidekiq_options retry: false
-    feature_category :pods
+    feature_category :cell
     data_consistency :sticky
     idempotent!
 
diff --git a/app/workers/database/ci_project_mirrors_consistency_check_worker.rb b/app/workers/database/ci_project_mirrors_consistency_check_worker.rb
index 5f10310f8d6..e04e3ab3cc7 100644
--- a/app/workers/database/ci_project_mirrors_consistency_check_worker.rb
+++ b/app/workers/database/ci_project_mirrors_consistency_check_worker.rb
@@ -6,7 +6,7 @@ module Database
     include CronjobQueue # rubocop: disable Scalability/CronWorkerContext
 
     sidekiq_options retry: false
-    feature_category :pods
+    feature_category :cell
     data_consistency :sticky
     idempotent!
 
diff --git a/app/workers/loose_foreign_keys/cleanup_worker.rb b/app/workers/loose_foreign_keys/cleanup_worker.rb
index 9a0909598bb..e6d0261b7f1 100644
--- a/app/workers/loose_foreign_keys/cleanup_worker.rb
+++ b/app/workers/loose_foreign_keys/cleanup_worker.rb
@@ -7,7 +7,7 @@ module LooseForeignKeys
     include CronjobQueue # rubocop: disable Scalability/CronWorkerContext
 
     sidekiq_options retry: false
-    feature_category :pods
+    feature_category :cell
     data_consistency :always
     idempotent!
 
diff --git a/app/workers/namespaces/process_sync_events_worker.rb b/app/workers/namespaces/process_sync_events_worker.rb
index d0124c69781..112badd08b5 100644
--- a/app/workers/namespaces/process_sync_events_worker.rb
+++ b/app/workers/namespaces/process_sync_events_worker.rb
@@ -9,7 +9,7 @@ module Namespaces
 
     data_consistency :always
 
-    feature_category :pods
+    feature_category :cell
     urgency :high
 
     idempotent!
diff --git a/app/workers/projects/process_sync_events_worker.rb b/app/workers/projects/process_sync_events_worker.rb
index 4bbe1b65e5a..b088aed8fb7 100644
--- a/app/workers/projects/process_sync_events_worker.rb
+++ b/app/workers/projects/process_sync_events_worker.rb
@@ -9,7 +9,7 @@ module Projects
 
     data_consistency :always
 
-    feature_category :pods
+    feature_category :cell
     urgency :high
 
     idempotent!