Add latest changes from gitlab-org/gitlab@master

22 files changed, 147 insertions, 677 deletions

diff --git a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
index daf09dbf5e4..5a55d5669a8 100644
--- a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
@@ -1,7 +1,9 @@
 <script>
 import { isEmpty } from 'lodash';
-import * as translations from '~/ml/model_registry/translations';
 import Pagination from '~/vue_shared/components/incubation/pagination.vue';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import * as i18n from '../translations';
 import { BASE_SORT_FIELDS } from '../constants';
 import SearchBar from '../components/search_bar.vue';
 import ModelRow from '../components/model_row.vue';
@@ -12,6 +14,8 @@ export default {
     Pagination,
     ModelRow,
     SearchBar,
+    MetadataItem,
+    TitleArea,
   },
   props: {
     models: {
@@ -22,26 +26,29 @@ export default {
       type: Object,
       required: true,
     },
+    modelCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   computed: {
     hasModels() {
       return !isEmpty(this.models);
     },
   },
-  i18n: translations,
+  i18n,
   sortableFields: BASE_SORT_FIELDS,
 };
 </script>
 
 <template>
   <div>
-    <div class="detail-page-header gl-flex-wrap">
-      <div class="detail-page-header-body">
-        <div class="page-title gl-flex-grow-1 gl-display-flex gl-align-items-center">
-          <h2 class="gl-font-size-h-display gl-my-0">{{ $options.i18n.TITLE_LABEL }}</h2>
-        </div>
-      </div>
-    </div>
+    <title-area :title="$options.i18n.TITLE_LABEL">
+      <template #metadata-models-count>
+        <metadata-item icon="machine-learning" :text="$options.i18n.modelsCountLabel(modelCount)" />
+      </template>
+    </title-area>
 
     <template v-if="hasModels">
       <search-bar :sortable-fields="$options.sortableFields" />
diff --git a/app/assets/javascripts/ml/model_registry/components/model_row.vue b/app/assets/javascripts/ml/model_registry/components/model_row.vue
index 4f91f0939a8..ffae7e83099 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_row.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLink } from '@gitlab/ui';
-import { modelVersionCountMessage } from '../translations';
+import { s__, n__ } from '~/locale';
 
 export default {
   name: 'MlModelRow',
@@ -17,8 +17,16 @@ export default {
     hasVersions() {
       return this.model.version != null;
     },
+    modelVersionCountMessage() {
+      if (!this.model.versionCount) return s__('MlModelRegistry|No registered versions');
+
+      return n__(
+        'MlModelRegistry|· No other versions',
+        'MlModelRegistry|· %d versions',
+        this.model.versionCount,
+      );
+    },
   },
-  modelVersionCountMessage,
 };
 </script>
 
@@ -29,7 +37,9 @@ export default {
     </gl-link>
 
     <div class="gl-text-secondary">
-      {{ $options.modelVersionCountMessage(model.version, model.versionCount) }}
+      <gl-link v-if="hasVersions" :href="model.versionPath">{{ model.version }}</gl-link>
+
+      {{ modelVersionCountMessage }}
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ml/model_registry/translations.js b/app/assets/javascripts/ml/model_registry/translations.js
index 39f4cd22495..89b3f45ed94 100644
--- a/app/assets/javascripts/ml/model_registry/translations.js
+++ b/app/assets/javascripts/ml/model_registry/translations.js
@@ -1,4 +1,4 @@
-import { s__, n__, sprintf } from '~/locale';
+import { s__, n__ } from '~/locale';
 
 export const MODEL_DETAILS_TAB_LABEL = s__('MlModelRegistry|Details');
 export const MODEL_OTHER_VERSIONS_TAB_LABEL = s__('MlModelRegistry|Versions');
@@ -12,14 +12,5 @@ export const versionsCountLabel = (versionCount) =>
 export const TITLE_LABEL = s__('MlModelRegistry|Model registry');
 export const NO_MODELS_LABEL = s__('MlModelRegistry|No models registered in this project');
 
-export const modelVersionCountMessage = (version, versionCount) => {
-  if (!versionCount) return s__('MlModelRegistry|No registered versions');
-
-  const message = n__(
-    'MlModelRegistry|%{version} · No other versions',
-    'MlModelRegistry|%{version} · %{versionCount} versions',
-    versionCount,
-  );
-
-  return sprintf(message, { version, versionCount });
-};
+export const modelsCountLabel = (modelCount) =>
+  n__('MlModelRegistry|%d model', 'MlModelRegistry|%d models', modelCount);
diff --git a/doc/development/fe_guide/style/scss.md b/doc/development/fe_guide/style/scss.md
index e760b0adaaa..400b178d9a4 100644
--- a/doc/development/fe_guide/style/scss.md
+++ b/doc/development/fe_guide/style/scss.md
@@ -6,18 +6,11 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 
 # SCSS style guide
 
-This style guide recommends best practices for SCSS to make styles easy to read,
-easy to maintain, and performant for the end-user.
-
-## Rules
-
-Our CSS is a mixture of current and legacy approaches. That means sometimes it may be difficult to follow this guide to the letter; it means you are likely to run into exceptions, where following the guide is difficult to impossible without major effort. In those cases, you may work with your reviewers and maintainers to identify an approach that does not fit these rules. Try to limit these cases.
-
-### Utility Classes
+## Utility Classes
 
 In order to reduce the generation of more CSS as our site grows, prefer the use of utility classes over adding new CSS. In complex cases, CSS can be addressed by adding component classes.
 
-#### Where are utility classes defined?
+### Where are utility classes defined?
 
 Prefer the use of [utility classes defined in GitLab UI](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md#utilities).
 
@@ -27,6 +20,8 @@ An easy list of classes can also be [seen on Unpkg](https://unpkg.com/browse/@gi
 
 <!-- vale gitlab.Spelling = YES -->
 
+Or using an extension like [CSS Class completion](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion).
+
 Classes in [`utilities.scss`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/utilities.scss) and [`common.scss`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/framework/common.scss) are being deprecated.
 Classes in [`common.scss`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/framework/common.scss) that use non-design-system values should be avoided. Use classes with conforming values instead.
 
@@ -40,13 +35,13 @@ GitLab differs from the scale used in the Bootstrap library. For a Bootstrap pad
 utility, you may need to double the size of the applied utility to achieve the same visual
 result (such as `ml-1` becoming `gl-ml-2`).
 
-#### Where should you put new utility classes?
+### Where should you put new utility classes?
 
 If a class you need has not been added to GitLab UI, you get to add it! Follow the naming patterns documented in the [utility files](https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/scss/utility-mixins) and refer to the [GitLab UI CSS documentation](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md#adding-utility-mixins) for more details, especially about adding responsive and stateful rules.
 
 If it is not possible to wait for a GitLab UI update (generally one day), add the class to [`utilities.scss`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/utilities.scss) following the same naming conventions documented in GitLab UI. A follow-up issue to backport the class to GitLab UI and delete it from GitLab should be opened.
 
-#### When should you create component classes?
+### When should you create component classes?
 
 We recommend a "utility-first" approach.
 
@@ -60,7 +55,7 @@ Inspiration:
 - <https://tailwindcss.com/docs/utility-first>
 - <https://tailwindcss.com/docs/extracting-components>
 
-#### Utility mixins
+### Utility mixins
 
 In addition to utility classes GitLab UI provides utility mixins named after the utility classes.
 
@@ -95,7 +90,7 @@ For example prefer `display: flex` over `@include gl-display-flex`. Utility mixi
 }
 ```
 
-### Naming
+## Naming
 
 Filenames should use `snake_case`.
 
@@ -119,6 +114,23 @@ CSS classes should use the `lowercase-hyphenated` format rather than
 }
 ```
 
+Avoid making compound class names with SCSS `&` features. It makes
+searching for usages harder, and provides limited benefit.
+
+```scss
+// Bad
+.class {
+  &-name {
+    color: orange;
+  }
+}
+
+// Good
+.class-name {
+  color: #fff;
+}
+```
+
 Class names should be used instead of tag name selectors.
 Using tag name selectors is discouraged because they can affect
 unintended elements in the hierarchy.
@@ -154,53 +166,47 @@ the page.
 }
 ```
 
-### Selectors with a `js-` Prefix
-
-Do not use any selector prefixed with `js-` for styling purposes. These
-selectors are intended for use only with JavaScript to allow for removal or
-renaming without breaking styling.
-
-### Variables
-
-Before adding a new variable for a color or a size, guarantee:
-
-- There isn't an existing one.
-- There isn't a similar one we can use instead.
-
-### Using `extend` at-rule
+## Nesting
 
-Usage of the `extend` at-rule is prohibited due to [memory leaks](https://gitlab.com/gitlab-org/gitlab/-/issues/323021) and [the rule doesn't work as it should to](https://sass-lang.com/documentation/breaking-changes/extend-compound). Use mixins instead:
+Avoid unnecessary nesting. The extra specificity of a wrapper component
+makes things harder to override.
 
 ```scss
 // Bad
-.gl-pt-3 {
-  padding-top: 12px;
-}
-
-.my-element {
-  @extend .gl-pt-3;
-}
+.component-container {
+  .component-header {
+    /* ... */
+  }
 
-// compiles to
-.gl-pt-3, .my-element {
-  padding-top: 12px;
+  .component-body {
+    /* ... */
+  }
 }
 
 // Good
-@mixin gl-pt-3 {
-  padding-top: 12px;
+.component-container {
+  /* ... */
 }
 
-.my-element {
-  @include gl-pt-3;
+.component-header {
+  /* ... */
 }
 
-// compiles to
-.my-element {
-  padding-top: 12px;
+.component-body {
+  /* ... */
 }
 ```
 
+## Selectors with a `js-` Prefix
+
+Do not use any selector prefixed with `js-` for styling purposes. These
+selectors are intended for use only with JavaScript to allow for removal or
+renaming without breaking styling.
+
+## Using `extend` at-rule
+
+Usage of the `extend` at-rule is prohibited due to [memory leaks](https://gitlab.com/gitlab-org/gitlab/-/issues/323021) and [the rule doesn't work as it should](https://sass-lang.com/documentation/breaking-changes/extend-compound).
+
 ## Linting
 
 We use [stylelint](https://stylelint.io) to check for style guide conformity. It uses the
diff --git a/doc/user/analytics/value_streams_dashboard.md b/doc/user/analytics/value_streams_dashboard.md
index 45be6f5aa25..b5358cc81c8 100644
--- a/doc/user/analytics/value_streams_dashboard.md
+++ b/doc/user/analytics/value_streams_dashboard.md
@@ -214,8 +214,8 @@ Label filters are appended as query parameters to the URL of the drill-down repo
 | Change failure rate | Percentage of deployments that cause an incident in production. | [Change failure rate tab](https://gitlab.com/groups/gitlab-org/-/analytics/ci_cd?tab=change-failure-rate) | [Change failure rate](dora_metrics.md#change-failure-rate) | `change_failure_rate` |
 | Lead time | Median time from issue created to issue closed. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [View the lead time and cycle time for issues](../group/value_stream_analytics/index.md#lifecycle-metrics) | `lead_time` |
 | Cycle time | Median time from the earliest commit of a linked issue's merge request to when that issue is closed. | [VSA overview](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [View the lead time and cycle time for issues](../group/value_stream_analytics/index.md#lifecycle-metrics) | `cycle_time` |
-| New issues | Number of new issues created. | [Issue Analytics](https://gitlab.com/groups/gitlab-org/-/issues_analytics) | Issue analytics [for projects](issue_analytics.md) and [for groups](../../user/group/issues_analytics/index.md) | `issues` |
-| Closed issues | Number of issues closed by month. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [Value Stream Analytics](../group/value_stream_analytics/index.md)  | `issues_completed` |
+| Issues created | Number of new issues created. | [Issue Analytics](https://gitlab.com/groups/gitlab-org/-/issues_analytics) | Issue analytics [for projects](issue_analytics.md) and [for groups](../../user/group/issues_analytics/index.md) | `issues` |
+| Issues closed | Number of issues closed by month. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [Value Stream Analytics](../group/value_stream_analytics/index.md)  | `issues_completed` |
 | Number of deploys | Total number of deploys to production. | [Merge Request Analytics](https://gitlab.com/gitlab-org/gitlab/-/analytics/merge_request_analytics) | [Merge request analytics](merge_request_analytics.md) | `deploys` |
 | Merge request throughput | The number of merge requests merged by month. | [Groups Productivity analytics](productivity_analytics.md), [Projects Merge Request Analytics](https://gitlab.com/gitlab-org/gitlab/-/analytics/merge_request_analytics)  | [Groups Productivity analytics](productivity_analytics.md) [Projects Merge request analytics](merge_request_analytics.md) | `merge_request_throughput` |
 | Critical vulnerabilities over time | Critical vulnerabilities over time in project or group | [Vulnerability report](https://gitlab.com/gitlab-org/gitlab/-/security/vulnerability_report) | [Vulnerability report](../application_security/vulnerability_report/index.md) | `vulnerability_critical` |
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7df8ed7cd5b..45a1cd28629 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -14936,9 +14936,6 @@ msgstr ""
 msgid "DORA4Metrics|Change failure rate (percentage)"
 msgstr ""
 
-msgid "DORA4Metrics|Closed issues"
-msgstr ""
-
 msgid "DORA4Metrics|Critical Vulnerabilities over time"
 msgstr ""
 
@@ -15010,6 +15007,12 @@ msgstr ""
 msgid "DORA4Metrics|High Vulnerabilities over time"
 msgstr ""
 
+msgid "DORA4Metrics|Issues closed"
+msgstr ""
+
+msgid "DORA4Metrics|Issues created"
+msgstr ""
+
 msgid "DORA4Metrics|Lead Time for Changes"
 msgstr ""
 
@@ -15064,9 +15067,6 @@ msgstr ""
 msgid "DORA4Metrics|Month to date"
 msgstr ""
 
-msgid "DORA4Metrics|New issues"
-msgstr ""
-
 msgid "DORA4Metrics|No data available for Namespace: %{fullPath}"
 msgstr ""
 
@@ -30562,13 +30562,13 @@ msgstr ""
 msgid "MlExperimentTracking|Triggered by"
 msgstr ""
 
-msgid "MlModelRegistry|%d version"
-msgid_plural "MlModelRegistry|%d versions"
+msgid "MlModelRegistry|%d model"
+msgid_plural "MlModelRegistry|%d models"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "MlModelRegistry|%{version} · No other versions"
-msgid_plural "MlModelRegistry|%{version} · %{versionCount} versions"
+msgid "MlModelRegistry|%d version"
+msgid_plural "MlModelRegistry|%d versions"
 msgstr[0] ""
 msgstr[1] ""
 
@@ -30596,6 +30596,11 @@ msgstr ""
 msgid "MlModelRegistry|Versions"
 msgstr ""
 
+msgid "MlModelRegistry|· No other versions"
+msgid_plural "MlModelRegistry|· %d versions"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Modal updated"
 msgstr ""
 
diff --git a/package.json b/package.json
index 90c4f6f096e..99c12618f8f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "scripts": {
     "check-dependencies": "scripts/frontend/check_dependencies.sh",
     "block-dependencies": "node scripts/frontend/block_dependencies.js",
-    "check:startup_css": "scripts/frontend/startup_css/startup_css_changed.sh",
     "clean": "rm -rf public/assets tmp/cache/*-loader",
     "dev-server": "NODE_OPTIONS=\"${NODE_OPTIONS:=--max-old-space-size=5120}\" node scripts/frontend/webpack_dev_server.js",
     "file-coverage": "scripts/frontend/file_test_coverage.js",
@@ -33,8 +32,6 @@
     "lint:stylelint:fix": "yarn run lint:stylelint --fix",
     "lint:stylelint:staged": "scripts/frontend/execute-on-staged-files.sh stylelint '(css|scss)' -q",
     "lint:stylelint:staged:fix": "yarn run lint:stylelint:staged --fix",
-    "generate:startup_css": "scripts/frontend/startup_css/setup.sh && node scripts/frontend/startup_css/main.js",
-    "generate:startup_css:full": "scripts/frontend/startup_css/setup.sh force && node scripts/frontend/startup_css/main.js",
     "markdownlint": "markdownlint --config .markdownlint.yml",
     "markdownlint:no-trailing-spaces": "markdownlint --config doc/.markdownlint/markdownlint-no-trailing-spaces.yml",
     "markdownlint:no-trailing-spaces:fix": "yarn run markdownlint:no-trailing-spaces --fix",
@@ -254,7 +251,6 @@
     "axios-mock-adapter": "^1.15.0",
     "babel-jest": "^28.1.3",
     "chalk": "^2.4.1",
-    "cheerio": "^1.0.0-rc.9",
     "commander": "^2.20.3",
     "custom-jquery-matchers": "^2.1.0",
     "eslint": "8.52.0",
@@ -284,8 +280,6 @@
     "nodemon": "^2.0.19",
     "prettier": "2.2.1",
     "prosemirror-test-builder": "^1.1.1",
-    "purgecss": "^4.0.3",
-    "purgecss-from-html": "^4.0.3",
     "sass": "^1.69.0",
     "stylelint": "^15.10.2",
     "swagger-cli": "^4.0.4",
diff --git a/qa/Rakefile b/qa/Rakefile
index 6f94c63b4de..8c639f82a13 100644
--- a/qa/Rakefile
+++ b/qa/Rakefile
@@ -83,7 +83,10 @@ end
 
 desc "Deletes user's projects"
 task :delete_user_projects, [:delete_before, :dry_run] do |_, args|
-  QA::Tools::DeleteUserProjects.new(args).run
+  args.with_defaults(delete_before: (Date.today - 1).to_s, dry_run: false)
+  QA::Tools::DeleteUserProjects.new(
+    delete_before: args[:delete_before],
+    dry_run: !!(args[:dry_run] =~ /true|1|y/i)).run
 end
 
 desc "Revokes user's personal access tokens"
diff --git a/qa/qa/tools/delete_user_projects.rb b/qa/qa/tools/delete_user_projects.rb
index 9c031e352b4..5c3ae4d4ef2 100644
--- a/qa/qa/tools/delete_user_projects.rb
+++ b/qa/qa/tools/delete_user_projects.rb
@@ -29,6 +29,15 @@ module QA
           personal_access_token: ENV['GITLAB_QA_ACCESS_TOKEN'])
       end
 
+      # @example
+      #   GITLAB_ADDRESS=<address> \
+      #   GITLAB_QA_ACCESS_TOKEN=<token> \
+      #   USER_ID=<id> bundle exec "delete_user_projects[2023-01-01,true]"
+      #
+      # @example
+      #   GITLAB_ADDRESS=<address> \
+      #   GITLAB_QA_ACCESS_TOKEN=<token> \
+      #   USER_ID=<id> bundle exec "delete_user_projects[,true]"
       def run
         $stdout.puts 'Running...'
 
diff --git a/scripts/frontend/startup_css/clean_css.js b/scripts/frontend/startup_css/clean_css.js
deleted file mode 100644
index 67a0453e816..00000000000
--- a/scripts/frontend/startup_css/clean_css.js
+++ /dev/null
@@ -1,83 +0,0 @@
-const { memoize, isString, isRegExp } = require('lodash');
-const { parse } = require('postcss');
-const { CSS_TO_REMOVE } = require('./constants');
-
-const getSelectorRemoveTesters = memoize(() =>
-  CSS_TO_REMOVE.map((x) => {
-    if (isString(x)) {
-      return (selector) => x === selector;
-    }
-    if (isRegExp(x)) {
-      return (selector) => x.test(selector);
-    }
-
-    throw new Error(`Unexpected type in CSS_TO_REMOVE content "${x}". Expected String or RegExp.`);
-  }),
-);
-
-const getRemoveTesters = memoize(() => {
-  const selectorTesters = getSelectorRemoveTesters();
-
-  // These are mostly carried over from the previous project
-  // https://gitlab.com/gitlab-org/frontend/gitlab-css-statistics/-/blob/2aa00af25dba08fc71081c77206f45efe817ea4b/lib/gl_startup_extract.js
-  return [
-    (node) => node.type === 'comment',
-    (node) =>
-      node.type === 'atrule' &&
-      (node.params === 'print' ||
-        node.params === 'prefers-reduced-motion: reduce' ||
-        node.name === 'keyframe' ||
-        node.name === 'charset'),
-    (node) => node.selector && node.selectors && !node.selectors.length,
-    (node) => node.selector && selectorTesters.some((fn) => fn(node.selector)),
-    (node) =>
-      node.type === 'decl' &&
-      (node.prop === 'transition' ||
-        node.prop.indexOf('-webkit-') > -1 ||
-        node.prop.indexOf('-ms-') > -1),
-  ];
-});
-
-const getNodesToRemove = (nodes) => {
-  const removeTesters = getRemoveTesters();
-  const remNodes = [];
-
-  nodes.forEach((node) => {
-    if (removeTesters.some((fn) => fn(node))) {
-      remNodes.push(node);
-    } else if (node.nodes?.length) {
-      remNodes.push(...getNodesToRemove(node.nodes));
-    }
-  });
-
-  return remNodes;
-};
-
-const getEmptyNodesToRemove = (nodes) =>
-  nodes
-    .filter((node) => node.nodes)
-    .reduce((acc, node) => {
-      if (node.nodes.length) {
-        acc.push(...getEmptyNodesToRemove(node.nodes));
-      } else {
-        acc.push(node);
-      }
-
-      return acc;
-    }, []);
-
-const cleanCSS = (css) => {
-  const cssRoot = parse(css);
-
-  getNodesToRemove(cssRoot.nodes).forEach((node) => {
-    node.remove();
-  });
-
-  getEmptyNodesToRemove(cssRoot.nodes).forEach((node) => {
-    node.remove();
-  });
-
-  return cssRoot.toResult().css;
-};
-
-module.exports = { cleanCSS };
diff --git a/scripts/frontend/startup_css/constants.js b/scripts/frontend/startup_css/constants.js
deleted file mode 100644
index bf9774daea5..00000000000
--- a/scripts/frontend/startup_css/constants.js
+++ /dev/null
@@ -1,108 +0,0 @@
-const path = require('path');
-const IS_EE = require('../../../config/helpers/is_ee_env');
-
-// controls --------------------------------------------------------------------
-const HTML_TO_REMOVE = [
-  'style',
-  'script',
-  'link[rel="stylesheet"]',
-  '.content-wrapper',
-  '#js-peek',
-  '.modal',
-  '.feature-highlight',
-  // The user has to open up the responsive nav, so we don't need it on load
-  '.top-nav-responsive',
-  // We don't want to capture all the children of a dropdown-menu
-  '.dropdown-menu',
-];
-const CSS_TO_REMOVE = [
-  '.tooltip',
-  '.tooltip.show',
-  '.fa',
-  '.gl-accessibility:focus',
-  '.toasted-container',
-  'body .toasted-container.bottom-left',
-  '.popover',
-  '.with-performance-bar .navbar-gitlab',
-  '.text-secondary',
-  /\.feature-highlight-popover-content/,
-  /\.commit/,
-  /\.md/,
-  /\.with-performance-bar/,
-];
-const APPLICATION_CSS_PREFIX = 'application';
-const APPLICATION_DARK_CSS_PREFIX = 'application_dark';
-const UTILITIES_CSS_PREFIX = 'application_utilities';
-const UTILITIES_DARK_CSS_PREFIX = 'application_utilities_dark';
-
-// paths -----------------------------------------------------------------------
-const ROOT = path.resolve(__dirname, '../../..');
-const ROOT_RAILS = IS_EE ? path.join(ROOT, 'ee') : ROOT;
-const FIXTURES_FOLDER_NAME = IS_EE ? 'fixtures-ee' : 'fixtures';
-const FIXTURES_ROOT = path.join(ROOT, 'tmp/tests/frontend', FIXTURES_FOLDER_NAME);
-const PATH_SIGNIN_HTML = path.join(FIXTURES_ROOT, 'startup_css/sign-in.html');
-const PATH_SIGNIN_OLD_HTML = path.join(FIXTURES_ROOT, 'startup_css/sign-in-old.html');
-const PATH_ASSETS = path.join(ROOT, 'tmp/startup_css_assets');
-const PATH_STARTUP_SCSS = path.join(ROOT_RAILS, 'app/assets/stylesheets/startup');
-
-// helpers ---------------------------------------------------------------------
-const createMainOutput = ({ outFile, cssKeys, type }) => ({
-  outFile,
-  htmlPaths: [
-    path.join(FIXTURES_ROOT, `startup_css/project-${type}.html`),
-    path.join(FIXTURES_ROOT, `startup_css/project-${type}-signed-out.html`),
-    path.join(FIXTURES_ROOT, `startup_css/project-${type}-super-sidebar.html`),
-  ],
-  cssKeys,
-  purgeOptions: {
-    safelist: {
-      standard: [
-        'page-with-super-sidebar',
-        'page-with-super-sidebar-collapsed',
-        'page-with-icon-sidebar',
-        'sidebar-collapsed-desktop',
-        // We want to include the root dropdown-menu style since it should be hidden by default
-        'dropdown-menu',
-      ],
-      // We want to include the identicon backgrounds
-      greedy: [/^bg[0-9]$/],
-    },
-  },
-});
-
-const OUTPUTS = [
-  createMainOutput({
-    type: 'general',
-    outFile: 'startup-general',
-    cssKeys: [APPLICATION_CSS_PREFIX, UTILITIES_CSS_PREFIX],
-  }),
-  createMainOutput({
-    type: 'dark',
-    outFile: 'startup-dark',
-    cssKeys: [APPLICATION_DARK_CSS_PREFIX, UTILITIES_DARK_CSS_PREFIX],
-  }),
-  {
-    outFile: 'startup-signin',
-    htmlPaths: [PATH_SIGNIN_HTML, PATH_SIGNIN_OLD_HTML],
-    cssKeys: [APPLICATION_CSS_PREFIX, UTILITIES_CSS_PREFIX],
-    purgeOptions: {
-      safelist: {
-        standard: ['fieldset', 'hidden'],
-        deep: [/login-page$/],
-      },
-    },
-  },
-];
-
-module.exports = {
-  HTML_TO_REMOVE,
-  CSS_TO_REMOVE,
-  APPLICATION_CSS_PREFIX,
-  APPLICATION_DARK_CSS_PREFIX,
-  UTILITIES_CSS_PREFIX,
-  UTILITIES_DARK_CSS_PREFIX,
-  ROOT,
-  PATH_ASSETS,
-  PATH_STARTUP_SCSS,
-  OUTPUTS,
-};
diff --git a/scripts/frontend/startup_css/get_css_path.js b/scripts/frontend/startup_css/get_css_path.js
deleted file mode 100644
index 54078cf3149..00000000000
--- a/scripts/frontend/startup_css/get_css_path.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { memoize } = require('lodash');
-const { PATH_ASSETS } = require('./constants');
-const { die } = require('./utils');
-
-const listAssetsDir = memoize(() => fs.readdirSync(PATH_ASSETS));
-
-const getCSSPath = (prefix) => {
-  const matcher = new RegExp(`^${prefix}-[^-]+\\.css$`);
-  const cssPath = listAssetsDir().find((x) => matcher.test(x));
-
-  if (!cssPath) {
-    die(
-      `Could not find the CSS asset matching "${prefix}". Have you run "scripts/frontend/startup_css/setup.sh"?`,
-    );
-  }
-
-  return path.join(PATH_ASSETS, cssPath);
-};
-
-module.exports = { getCSSPath };
diff --git a/scripts/frontend/startup_css/get_startup_css.js b/scripts/frontend/startup_css/get_startup_css.js
deleted file mode 100644
index 2c8c3b4e321..00000000000
--- a/scripts/frontend/startup_css/get_startup_css.js
+++ /dev/null
@@ -1,71 +0,0 @@
-const fs = require('fs');
-const cheerio = require('cheerio');
-const { mergeWith, isArray } = require('lodash');
-const { PurgeCSS } = require('purgecss');
-const purgeHtml = require('purgecss-from-html');
-const { cleanCSS } = require('./clean_css');
-const { HTML_TO_REMOVE } = require('./constants');
-const { die } = require('./utils');
-
-const cleanHtml = (html) => {
-  const $ = cheerio.load(html);
-
-  HTML_TO_REMOVE.forEach((selector) => {
-    $(selector).remove();
-  });
-
-  return $.html();
-};
-
-const mergePurgeCSSOptions = (...options) =>
-  mergeWith(...options, (objValue, srcValue) => {
-    if (isArray(objValue)) {
-      return objValue.concat(srcValue);
-    }
-
-    return undefined;
-  });
-
-const getStartupCSS = async ({ htmlPaths, cssPaths, purgeOptions }) => {
-  const content = htmlPaths.map((htmlPath) => {
-    if (!fs.existsSync(htmlPath)) {
-      die(
-        `Could not find fixture "${htmlPath}". Have you run the fixtures? (bundle exec rspec spec/frontend/fixtures/startup_css.rb)`,
-      );
-    }
-
-    const rawHtml = fs.readFileSync(htmlPath);
-    const html = cleanHtml(rawHtml);
-
-    return { raw: html, extension: 'html' };
-  });
-
-  const purgeCSSResult = await new PurgeCSS().purge({
-    content,
-    css: cssPaths,
-    ...mergePurgeCSSOptions(
-      {
-        fontFace: true,
-        variables: true,
-        keyframes: true,
-        blocklist: [/:hover/, /:focus/, /-webkit-/, /-moz-focusring-/, /-ms-expand/],
-        safelist: {
-          standard: ['brand-header-logo'],
-        },
-        // By default, PurgeCSS ignores special characters, but our utilities use "!"
-        defaultExtractor: (x) => x.match(/[\w-!]+/g),
-        extractors: [
-          {
-            extractor: purgeHtml,
-            extensions: ['html'],
-          },
-        ],
-      },
-      purgeOptions,
-    ),
-  });
-
-  return purgeCSSResult.map(({ css }) => cleanCSS(css)).join('\n');
-};
-
-module.exports = { getStartupCSS };
diff --git a/scripts/frontend/startup_css/main.js b/scripts/frontend/startup_css/main.js
deleted file mode 100644
index 1e8dcbebae2..00000000000
--- a/scripts/frontend/startup_css/main.js
+++ /dev/null
@@ -1,60 +0,0 @@
-const { memoize } = require('lodash');
-const { OUTPUTS } = require('./constants');
-const { getCSSPath } = require('./get_css_path');
-const { getStartupCSS } = require('./get_startup_css');
-const { log, die } = require('./utils');
-const { writeStartupSCSS } = require('./write_startup_scss');
-
-const memoizedCSSPath = memoize(getCSSPath);
-
-const runTask = async ({ outFile, htmlPaths, cssKeys, purgeOptions = {} }) => {
-  try {
-    log(`Generating startup CSS for HTML files: ${htmlPaths}`);
-    const generalCSS = await getStartupCSS({
-      htmlPaths,
-      cssPaths: cssKeys.map(memoizedCSSPath),
-      purgeOptions,
-    });
-
-    log(`Writing to startup CSS...`);
-    const startupCSSPath = writeStartupSCSS(outFile, generalCSS);
-    log(`Finished writing to ${startupCSSPath}`);
-
-    return {
-      success: true,
-      outFile,
-    };
-  } catch (e) {
-    log(`ERROR! Unexpected error occurred while generating startup CSS for: ${outFile}`);
-    log(e);
-
-    return {
-      success: false,
-      outFile,
-    };
-  }
-};
-
-const main = async () => {
-  const result = await Promise.all(OUTPUTS.map(runTask));
-  const fullSuccess = result.every((x) => x.success);
-
-  log('RESULTS:');
-  log('--------');
-
-  result.forEach(({ success, outFile }) => {
-    const status = success ? '✓' : 'ⅹ';
-
-    log(`${status}: ${outFile}`);
-  });
-
-  log('--------');
-
-  if (fullSuccess) {
-    log('Done!');
-  } else {
-    die('Some tasks have failed');
-  }
-};
-
-main();
diff --git a/scripts/frontend/startup_css/setup.sh b/scripts/frontend/startup_css/setup.sh
deleted file mode 100755
index 795799bd9fd..00000000000
--- a/scripts/frontend/startup_css/setup.sh
+++ /dev/null
@@ -1,76 +0,0 @@
-path_public_dir="public"
-path_tmp="tmp"
-path_dest="$path_tmp/startup_css_assets"
-glob_css_dest="$path_dest/application*.css"
-glob_css_src="$path_public_dir/assets/application*.css"
-should_clean=false
-
-should_force() {
-  $1=="force"
-}
-
-has_dest_already() {
- find $glob_css_dest -quit
-}
-
-has_src_already() {
- find $glob_css_src -quit
-}
-
-compile_assets() {
-  # We need to build the same test bundle that is built in CI
-  RAILS_ENV=test bundle exec rake rake:assets:precompile
-}
-
-clean_assets() {
-  bundle exec rake rake:assets:clobber
-}
-
-copy_assets() {
-  rm -rf $path_dest
-  mkdir $path_dest
-  cp $glob_css_src $path_dest
-}
-
-echo "-----------------------------------------------------------"
-echo "If you are run into any issues with Startup CSS generation,"
-echo "please check out the feedback issue:"
-echo ""
-echo "https://gitlab.com/gitlab-org/gitlab/-/issues/331812"
-echo "-----------------------------------------------------------"
-
-if [ ! -e $path_public_dir ]; then
-  echo "Could not find '$path_public_dir/'. This script must be run in the root directory of the gitlab project."
-  exit 1
-fi
-
-if [ ! -e $path_tmp ]; then
-  echo "Could not find '$path_tmp/'. This script must be run in the root directory of the gitlab project."
-  exit 1
-fi
-
-if [ "$1" != "force" ] && has_dest_already; then
-  echo "Already found assets for '$glob_css_dest'. Did you want to run this script with 'force' argument?"
-  exit 0
-fi
-
-# If we are in CI, don't recompile things...
-if [ -n "$CI" ]; then
-  if ! has_src_already; then
-    echo "Could not find '$glob_css_src'. Expected these artifacts to be generated by CI pipeline."
-    exit 1
-  fi
-elif has_src_already; then
-  echo "Found '$glob_css_src'. Skipping compile assets..."
-else
-  echo "Starting compile assets process..."
-  compile_assets
-  should_clean=true
-fi
-
-copy_assets
-
-if $should_clean; then
-  echo "Starting cleanup..."
-  clean_assets
-fi
diff --git a/scripts/frontend/startup_css/startup_css_changed.sh b/scripts/frontend/startup_css/startup_css_changed.sh
deleted file mode 100755
index db6fb575d1d..00000000000
--- a/scripts/frontend/startup_css/startup_css_changed.sh
+++ /dev/null
@@ -1,51 +0,0 @@
-#!/bin/sh
-
-echo "-----------------------------------------------------------"
-echo "If you run into any issues with Startup CSS generation"
-echo "please check out the feedback issue:"
-echo ""
-echo "https://gitlab.com/gitlab-org/gitlab/-/issues/331812"
-echo "-----------------------------------------------------------"
-
-startup_glob="app/assets/stylesheets/startup*"
-
-if ! [ "$FOSS_ONLY" ]
-then
-  startup_glob="*${startup_glob}"
-fi
-
-
-echo "Staging changes to '${startup_glob}' so we can check for untracked files..."
-git add "${startup_glob}"
-
-if [ -n "$(git diff HEAD --name-only -- "${startup_glob}")" ]; then
-  diff=$(git diff HEAD -- "${startup_glob}")
-  cat <<EOF
-
-Startup CSS changes detected!
-
-It looks like there have been recent changes which require
-regenerating the Startup CSS files.
-
-IMPORTANT:
-
-  - If you are making changes to any Startup CSS file, it is very likely that
-    **both** the CE and EE Startup CSS files will need to be updated.
-  - Changing any Startup CSS file will trigger the "as-if-foss" job to also run.
-
-HOW TO FIX:
-
-To fix this job, consider one of the following options:
-
-  1. (Strongly recommended) Copy and apply the diff below:
-  2. Regenerate locally with "yarn run generate:startup_css".
-     You may need to set "FOSS_ONLY=1" if you are trying to generate for CE.
-
------ start diff -----
-$diff
-
------ end diff -------
-EOF
-
-  exit 1
-fi
diff --git a/scripts/frontend/startup_css/utils.js b/scripts/frontend/startup_css/utils.js
deleted file mode 100644
index 49ad201fb6b..00000000000
--- a/scripts/frontend/startup_css/utils.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const die = (message) => {
-  console.log(message);
-  process.exit(1);
-};
-
-const log = (message) => console.error(`[gitlab.startup_css] ${message}`);
-
-module.exports = { die, log };
diff --git a/scripts/frontend/startup_css/write_startup_scss.js b/scripts/frontend/startup_css/write_startup_scss.js
deleted file mode 100644
index 245681bada3..00000000000
--- a/scripts/frontend/startup_css/write_startup_scss.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const { writeFileSync } = require('fs');
-const path = require('path');
-const prettier = require('prettier');
-const { PATH_STARTUP_SCSS } = require('./constants');
-
-const buildFinalContent = (raw) => {
-  const content = `// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css"
-// Please see the feedback issue for more details and help:
-// https://gitlab.com/gitlab-org/gitlab/-/issues/331812
-@charset "UTF-8";
-${raw}
-@import 'startup/cloaking';
-@include cloak-startup-scss(none);
-`;
-
-  // We run prettier so that there is more determinism with the generated file.
-  return prettier.format(content, { parser: 'scss' });
-};
-
-const writeStartupSCSS = (name, raw) => {
-  const fullPath = path.join(PATH_STARTUP_SCSS, `${name}.scss`);
-
-  writeFileSync(fullPath, buildFinalContent(raw));
-
-  return fullPath;
-};
-
-module.exports = { writeStartupSCSS };
diff --git a/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js b/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js
index 612b5ecbc40..6e0ab2ebe2d 100644
--- a/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js
+++ b/spec/frontend/ml/model_registry/apps/index_ml_models_spec.js
@@ -5,18 +5,23 @@ import { TITLE_LABEL, NO_MODELS_LABEL } from '~/ml/model_registry/translations';
 import Pagination from '~/vue_shared/components/incubation/pagination.vue';
 import SearchBar from '~/ml/model_registry/components/search_bar.vue';
 import { BASE_SORT_FIELDS } from '~/ml/model_registry/constants';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
 import { mockModels, startCursor, defaultPageInfo } from '../mock_data';
 
 let wrapper;
-const createWrapper = (propsData = { models: mockModels, pageInfo: defaultPageInfo }) => {
+const createWrapper = (
+  propsData = { models: mockModels, pageInfo: defaultPageInfo, modelCount: 2 },
+) => {
   wrapper = shallowMountExtended(IndexMlModels, { propsData });
 };
 
 const findModelRow = (index) => wrapper.findAllComponents(ModelRow).at(index);
 const findPagination = () => wrapper.findComponent(Pagination);
-const findTitle = () => wrapper.findByText(TITLE_LABEL);
 const findEmptyLabel = () => wrapper.findByText(NO_MODELS_LABEL);
 const findSearchBar = () => wrapper.findComponent(SearchBar);
+const findTitleArea = () => wrapper.findComponent(TitleArea);
+const findModelCountMetadataItem = () => findTitleArea().findComponent(MetadataItem);
 
 describe('MlModelsIndex', () => {
   describe('empty state', () => {
@@ -46,7 +51,11 @@ describe('MlModelsIndex', () => {
 
     describe('header', () => {
       it('displays the title', () => {
-        expect(findTitle().exists()).toBe(true);
+        expect(findTitleArea().props('title')).toBe(TITLE_LABEL);
+      });
+
+      it('sets model metadata item to model count', () => {
+        expect(findModelCountMetadataItem().props('text')).toBe(`2 models`);
       });
     });
 
diff --git a/spec/frontend/ml/model_registry/components/model_row_spec.js b/spec/frontend/ml/model_registry/components/model_row_spec.js
index 037abab0ac4..9d16ce5c466 100644
--- a/spec/frontend/ml/model_registry/components/model_row_spec.js
+++ b/spec/frontend/ml/model_registry/components/model_row_spec.js
@@ -8,27 +8,33 @@ const createWrapper = (model = mockModels[0]) => {
   wrapper = shallowMountExtended(ModelRow, { propsData: { model } });
 };
 
-const findLink = () => wrapper.findComponent(GlLink);
+const findTitleLink = () => wrapper.findAllComponents(GlLink).at(0);
+const findVersionLink = () => wrapper.findAllComponents(GlLink).at(1);
 const findMessage = (message) => wrapper.findByText(message);
 
 describe('ModelRow', () => {
-  beforeEach(() => {
+  it('Has a link to the model', () => {
     createWrapper();
-  });
 
-  it('Has a link to the model', () => {
-    expect(findLink().text()).toBe(mockModels[0].name);
-    expect(findLink().attributes('href')).toBe(mockModels[0].path);
+    expect(findTitleLink().text()).toBe(mockModels[0].name);
+    expect(findTitleLink().attributes('href')).toBe(mockModels[0].path);
   });
 
   it('Shows the latest version and the version count', () => {
-    expect(findMessage('1.0 · 3 versions').exists()).toBe(true);
+    createWrapper();
+
+    expect(findVersionLink().text()).toBe(mockModels[0].version);
+    expect(findVersionLink().attributes('href')).toBe(mockModels[0].versionPath);
+    expect(findMessage('· 3 versions').exists()).toBe(true);
   });
 
   it('Shows the latest version and no version count if it has only 1 version', () => {
     createWrapper(mockModels[1]);
 
-    expect(findMessage('1.1 · No other versions').exists()).toBe(true);
+    expect(findVersionLink().text()).toBe(mockModels[1].version);
+    expect(findVersionLink().attributes('href')).toBe(mockModels[1].versionPath);
+
+    expect(findMessage('· No other versions').exists()).toBe(true);
   });
 
   it('Shows no version message if model has no versions', () => {
diff --git a/spec/frontend/ml/model_registry/mock_data.js b/spec/frontend/ml/model_registry/mock_data.js
index 1c606e79fa2..a820c323103 100644
--- a/spec/frontend/ml/model_registry/mock_data.js
+++ b/spec/frontend/ml/model_registry/mock_data.js
@@ -20,6 +20,7 @@ export const mockModels = [
   {
     name: 'model_1',
     version: '1.0',
+    versionPath: 'path/to/version',
     path: 'path/to/model_1',
     versionCount: 3,
   },
diff --git a/yarn.lock b/yarn.lock
index 3c5dad0346c..bb38cb35fa7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4133,30 +4133,6 @@ character-entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
 
-cheerio-select@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.4.0.tgz#3a16f21e37a2ef0f211d6d1aa4eff054bb22cdc9"
-  integrity sha512-sobR3Yqz27L553Qa7cK6rtJlMDbiKPdNywtR95Sj/YgfpLfy0u6CGJuaBKe5YE/vTc23SCRKxWSdlon/w6I/Ew==
-  dependencies:
-    css-select "^4.1.2"
-    css-what "^5.0.0"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-    domutils "^2.6.0"
-
-cheerio@^1.0.0-rc.9:
-  version "1.0.0-rc.9"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.9.tgz#a3ae6b7ce7af80675302ff836f628e7cb786a67f"
-  integrity sha512-QF6XVdrLONO6DXRF5iaolY+odmhj2CLj+xzNod7INPWMi/x9X4SOylH0S/vaPpX+AUU6t04s34SQNh7DbkuCng==
-  dependencies:
-    cheerio-select "^1.4.0"
-    dom-serializer "^1.3.1"
-    domhandler "^4.2.0"
-    htmlparser2 "^6.1.0"
-    parse5 "^6.0.1"
-    parse5-htmlparser2-tree-adapter "^6.0.1"
-    tslib "^2.2.0"
-
 "chokidar@>=3.0.0 <4.0.0", chokidar@^2.1.8, chokidar@^3.4.1, chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -4726,7 +4702,7 @@ css-loader@^2.1.1:
     postcss-value-parser "^3.3.0"
     schema-utils "^1.0.0"
 
-css-select@^4.1.2, css-select@^4.1.3:
+css-select@^4.1.3:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
   integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
@@ -4772,11 +4748,6 @@ css-values@^0.1.0:
     ends-with "^0.2.0"
     postcss-value-parser "^3.3.0"
 
-css-what@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
-  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
-
 css-what@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -5664,7 +5635,7 @@ dom-event-types@^1.0.0:
   resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
   integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
 
-dom-serializer@^1.0.1, dom-serializer@^1.3.1:
+dom-serializer@^1.0.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.1.tgz#d845a1565d7c041a95e5dab62184ab41e3a519be"
   integrity sha512-Pv2ZluG5ife96udGgEDovOOOA5UELkltfJpnIExPrAk1LTvecolUGn6lIaoLh86d83GiB86CjzciMd9BuRB71Q==
@@ -5719,7 +5690,7 @@ dompurify@^3.0.5, dompurify@^3.0.6:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.6.tgz#925ebd576d54a9531b5d76f0a5bef32548351dae"
   integrity sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==
 
-domutils@^2.5.2, domutils@^2.6.0, domutils@^2.8.0:
+domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
   integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
@@ -7044,7 +7015,7 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-"glob@5 - 7", glob@^7.0.0, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+"glob@5 - 7", glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
   integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
@@ -7506,16 +7477,6 @@ html-void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
   integrity sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==
 
-htmlparser2@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
-  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
-  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.0.0"
-    domutils "^2.5.2"
-    entities "^2.0.0"
-
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -10615,14 +10576,7 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse5-htmlparser2-tree-adapter@^6.0.0, parse5-htmlparser2-tree-adapter@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
-  dependencies:
-    parse5 "^6.0.1"
-
-"parse5@5 - 6", parse5@6.0.1, parse5@^6.0.0, parse5@^6.0.1:
+"parse5@5 - 6", parse5@6.0.1, parse5@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -10873,7 +10827,7 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.28, postcss@^8.1.10, postcss@^8.2.1, postcss@^8.4.14, postcss@^8.4.25, postcss@^8.4.27:
+postcss@8.4.28, postcss@^8.1.10, postcss@^8.4.14, postcss@^8.4.25, postcss@^8.4.27:
   version "8.4.28"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.28.tgz#c6cc681ed00109072816e1557f889ef51cf950a5"
   integrity sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==
@@ -11226,24 +11180,6 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-purgecss-from-html@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/purgecss-from-html/-/purgecss-from-html-4.0.3.tgz#28d86d3dc8292581c4ab529a77a57daf7c2dd940"
-  integrity sha512-Ipv/kXSDRBlVTWDSRq5PZoiJdFjZjlL6r/3MH42waKM524NiicyvwLlyE9XedBSCPs+Ypek6SaTd8TTeiBgCMg==
-  dependencies:
-    parse5 "^6.0.0"
-    parse5-htmlparser2-tree-adapter "^6.0.0"
-
-purgecss@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
-  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
-  dependencies:
-    commander "^6.0.0"
-    glob "^7.0.0"
-    postcss "^8.2.1"
-    postcss-selector-parser "^6.0.2"
-
 qs@6.9.7:
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
@@ -12998,7 +12934,7 @@ tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.4.1, tslib@^2.5.0:
+tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.4.1, tslib@^2.5.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==