Add latest changes from gitlab-org/gitlab@master

15 files changed, 206 insertions, 168 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 3956a1f86e8..59b68fc0063 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,6 +1,6 @@
 <script>
 import { isEmpty } from 'lodash';
-import { GlBadge, GlButton } from '@gitlab/ui';
+import { GlBadge, GlButton, GlTooltipDirective } from '@gitlab/ui';
 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';
@@ -10,6 +10,7 @@ import * as i18n from '../translations';
 import { BASE_SORT_FIELDS, MODEL_ENTITIES } from '../constants';
 import SearchBar from '../components/search_bar.vue';
 import ModelRow from '../components/model_row.vue';
+import ActionsDropdown from '../components/actions_dropdown.vue';
 
 export default {
   name: 'IndexMlModels',
@@ -22,6 +23,15 @@ export default {
     GlBadge,
     EmptyState,
     GlButton,
+    ActionsDropdown,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  provide() {
+    return {
+      mlflowTrackingUrl: this.mlflowTrackingUrl,
+    };
   },
   props: {
     models: {
@@ -46,6 +56,11 @@ export default {
       required: false,
       default: false,
     },
+    mlflowTrackingUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     hasModels() {
@@ -77,6 +92,8 @@ export default {
         <gl-button v-if="canWriteModelRegistry" :href="createModelPath">{{
           $options.i18n.CREATE_MODEL_LABEL
         }}</gl-button>
+
+        <actions-dropdown />
       </template>
     </title-area>
     <template v-if="hasModels">
diff --git a/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue b/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue
new file mode 100644
index 00000000000..5b4f9e27437
--- /dev/null
+++ b/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue
@@ -0,0 +1,34 @@
+<script>
+import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlDisclosureDropdownItem,
+    GlDisclosureDropdown,
+  },
+  inject: ['mlflowTrackingUrl'],
+  computed: {
+    copyIdItem() {
+      return {
+        text: s__('MlModelRegistry|Copy MLflow tracking URL'),
+        action: () => {
+          this.$toast.show(s__('MlModelRegistry|Copied MLflow tracking URL to clipboard'));
+        },
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown
+    placement="right"
+    category="tertiary"
+    :aria-label="__('More actions')"
+    icon="ellipsis_v"
+    no-caret
+  >
+    <gl-disclosure-dropdown-item :item="copyIdItem" :data-clipboard-text="mlflowTrackingUrl" />
+  </gl-disclosure-dropdown>
+</template>
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 5fcc24a1827..5a9a739fb13 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -22,7 +22,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
 .super-sidebar {
   --super-sidebar-bg: #{$gray-10};
   --super-sidebar-border-color: #{$t-gray-a-08};
-  --super-sidebar-primary: #{$blue-500};
+  --super-sidebar-context-header-color: inherit;
+  --super-sidebar-active-indicator-color: #{$blue-500};
   --super-sidebar-notification-dot: #{$blue-500};
   --super-sidebar-user-bar-bg: #{$t-gray-a-04};
 
@@ -42,6 +43,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   --super-sidebar-nav-item-current-bg: #{$t-gray-a-08};
   --super-sidebar-nav-item-icon-color: #{$gray-500};
 
+  --super-sidebar-hr-mix-blend-mode: normal;
+
   .gl-dark & {
     --super-sidebar-border-color: #{$t-white-a-08};
     --super-sidebar-user-bar-bg: #{$t-white-a-04};
@@ -58,7 +61,148 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     --super-sidebar-nav-item-current-bg: #{$t-white-a-08};
     --super-sidebar-nav-item-icon-color: #{$gray-600};
   }
+}
+
+@mixin super-sidebar-theme(
+  $background,
+  $user-bar-background,
+  $user-bar-button-color,
+  $user-bar-button-icon-color,
+  $context-header,
+  $active-indicator,
+  $notification-dot,
+) {
+  .super-sidebar {
+    --super-sidebar-bg: #{$background};
+    --super-sidebar-user-bar-bg: #{$user-bar-background};
+    --super-sidebar-context-header-color: #{$context-header};
+    --super-sidebar-active-indicator-color: #{$active-indicator};
+    --super-sidebar-notification-dot: #{$notification-dot};
+
+    --super-sidebar-user-bar-button-bg: #{$t-white-a-16};
+    --super-sidebar-user-bar-button-color: #{$user-bar-button-color};
+    --super-sidebar-user-bar-button-border-color: #{$t-white-a-16};
+    --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24};
+    --super-sidebar-user-bar-button-hover-color: #{$white};
+    --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36};
+
+    --super-sidebar-user-bar-button-icon-color: #{$user-bar-button-icon-color};
+    --super-sidebar-user-bar-button-icon-hover-color: #{$user-bar-button-icon-color};
+    --super-sidebar-user-bar-button-icon-mix-blend-mode: screen;
+
+    --super-sidebar-hr-mix-blend-mode: multiply;
+  }
+}
+
+.ui-blue {
+  @include super-sidebar-theme(
+    $background: $theme-blue-10,
+    $user-bar-background: $theme-blue-900,
+    $user-bar-button-color: $theme-blue-50,
+    $user-bar-button-icon-color: $theme-blue-100,
+    $context-header: $theme-blue-900,
+    $active-indicator: $theme-blue-900,
+    $notification-dot: $theme-blue-900,
+  );
+}
+
+.ui-gray {
+  @include super-sidebar-theme(
+    $background: $gray-10,
+    $user-bar-background: $gray-900,
+    $user-bar-button-color: $gray-50,
+    $user-bar-button-icon-color: $gray-100,
+    $context-header: $gray-900,
+    $active-indicator: $gray-900,
+    $notification-dot: $gray-900,
+  );
+}
+
+.ui-green {
+  @include super-sidebar-theme(
+    $background: $theme-green-10,
+    $user-bar-background: $theme-green-900,
+    $user-bar-button-color: $theme-green-50,
+    $user-bar-button-icon-color: $theme-green-100,
+    $context-header: $theme-green-900,
+    $active-indicator: $theme-green-900,
+    $notification-dot: $theme-green-900,
+  );
+}
+
+.ui-indigo {
+  @include super-sidebar-theme(
+    $background: $theme-indigo-10,
+    $user-bar-background: $theme-indigo-900,
+    $user-bar-button-color: $theme-indigo-50,
+    $user-bar-button-icon-color: $theme-indigo-100,
+    $context-header: $theme-indigo-900,
+    $active-indicator: $theme-indigo-900,
+    $notification-dot: $theme-indigo-900,
+  );
+}
+
+.ui-light-blue {
+  @include super-sidebar-theme(
+    $background: $theme-light-blue-10,
+    $user-bar-background: $theme-light-blue-700,
+    $user-bar-button-color: $theme-light-blue-50,
+    $user-bar-button-icon-color: $theme-light-blue-100,
+    $context-header: $theme-light-blue-900,
+    $active-indicator: $theme-light-blue-900,
+    $notification-dot: $theme-light-blue-900,
+  );
+}
+
+.ui-light-green {
+  @include super-sidebar-theme(
+    $background: $theme-green-10,
+    $user-bar-background: $theme-green-700,
+    $user-bar-button-color: $theme-green-50,
+    $user-bar-button-icon-color: $theme-green-100,
+    $context-header: $theme-green-900,
+    $active-indicator: $theme-green-900,
+    $notification-dot: $theme-green-900,
+  );
+}
+
+.ui-light-indigo {
+  @include super-sidebar-theme(
+    $background: $theme-indigo-10,
+    $user-bar-background: $theme-indigo-700,
+    $user-bar-button-color: $theme-indigo-50,
+    $user-bar-button-icon-color: $theme-indigo-100,
+    $context-header: $theme-indigo-900,
+    $active-indicator: $theme-indigo-900,
+    $notification-dot: $theme-indigo-900,
+  );
+}
+
+.ui-light-red {
+  @include super-sidebar-theme(
+    $background: $theme-light-red-10,
+    $user-bar-background: $theme-light-red-700,
+    $user-bar-button-color: $theme-light-red-50,
+    $user-bar-button-icon-color: $theme-light-red-100,
+    $context-header: $theme-light-red-900,
+    $active-indicator: $theme-light-red-900,
+    $notification-dot: $theme-light-red-900,
+  );
+}
+
+.ui-red {
+  @include super-sidebar-theme(
+    $background: $theme-red-10,
+    $user-bar-background: $theme-red-900,
+    $user-bar-button-color: $theme-red-50,
+    $user-bar-button-icon-color: $theme-red-100,
+    $context-header: $theme-red-900,
+    $active-indicator: $theme-red-900,
+    $notification-dot: $theme-red-900,
+  );
+}
 
+.super-sidebar {
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -167,8 +311,12 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     color: var(--super-sidebar-nav-item-icon-color);
   }
 
+  hr {
+    mix-blend-mode: var(--super-sidebar-hr-mix-blend-mode);
+  }
+
   .active-indicator {
-    background-color: var(--super-sidebar-primary);
+    background-color: var(--super-sidebar-active-indicator-color);
   }
 
   .btn-with-notification {
@@ -200,6 +348,10 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   }
 }
 
+.super-sidebar-context-header {
+  color: var(--super-sidebar-context-header-color);
+}
+
 .super-sidebar-overlay {
   display: none;
 }
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 3ab3e195b06..59c2391d2e9 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -1,7 +1,6 @@
 @import './themes/dark';
 @import '@gitlab/ui/dist/tokens/css/tokens.dark';
 @import 'page_bundles/mixins_and_variables_and_functions';
-@import './themes/theme_helper';
 
 :root {
   color-scheme: dark;
diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss
deleted file mode 100644
index 1a373fbfeda..00000000000
--- a/app/assets/stylesheets/themes/theme_blue.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-blue {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-blue-50,
-        $theme-blue-100,
-        $theme-blue-900,
-        $theme-blue-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss
deleted file mode 100644
index 9a24142f286..00000000000
--- a/app/assets/stylesheets/themes/theme_gray.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-gray {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $gray-50,
-        $gray-100,
-        $gray-900,
-        $gray-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss
deleted file mode 100644
index a766fdddc78..00000000000
--- a/app/assets/stylesheets/themes/theme_green.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-green {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-green-50,
-        $theme-green-100,
-        $theme-green-900,
-        $theme-green-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
deleted file mode 100644
index c94a32891f6..00000000000
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import '../page_bundles/mixins_and_variables_and_functions';
-/**
- * Styles the GitLab application with a specific color theme
- */
-@mixin gitlab-theme-super-sidebar(
-  $theme-color-lightest,
-  $theme-color-light,
-  $theme-color,
-  $theme-color-darkest,
-) {
-  .super-sidebar {
-    --super-sidebar-bg: #{mix(white, $theme-color-lightest, 50%)};
-    --super-sidebar-user-bar-bg: #{$theme-color};
-    --super-sidebar-primary: #{$theme-color};
-    --super-sidebar-notification-dot: #{$theme-color-darkest};
-
-    --super-sidebar-user-bar-button-bg: #{$t-white-a-16};
-    --super-sidebar-user-bar-button-color: #{$theme-color-lightest};
-    --super-sidebar-user-bar-button-border-color: #{$t-white-a-16};
-    --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24};
-    --super-sidebar-user-bar-button-hover-color: #{$white};
-    --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36};
-
-    --super-sidebar-user-bar-button-icon-color: #{$theme-color-light};
-    --super-sidebar-user-bar-button-icon-hover-color: #{$theme-color-light};
-    --super-sidebar-user-bar-button-icon-mix-blend-mode: screen;
-
-    hr {
-      mix-blend-mode: multiply;
-    }
-
-    .super-sidebar-context-header {
-      color: var(--super-sidebar-primary);
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
deleted file mode 100644
index d0a8d597b59..00000000000
--- a/app/assets/stylesheets/themes/theme_indigo.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-indigo {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-indigo-50,
-        $theme-indigo-100,
-        $theme-indigo-900,
-        $theme-indigo-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss
deleted file mode 100644
index e712b6ae859..00000000000
--- a/app/assets/stylesheets/themes/theme_light_blue.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-blue {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-light-blue-50,
-        $theme-light-blue-100,
-        $theme-light-blue-700,
-        $theme-light-blue-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_gray.scss b/app/assets/stylesheets/themes/theme_light_gray.scss
deleted file mode 100644
index 5cb9bee37b0..00000000000
--- a/app/assets/stylesheets/themes/theme_light_gray.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// "Light gray" is the default unthemed state of the sidebar.
-// Nothing to do here.
diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss
deleted file mode 100644
index 44e19b02e36..00000000000
--- a/app/assets/stylesheets/themes/theme_light_green.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-green {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-green-50,
-        $theme-green-100,
-        $theme-green-700,
-        $theme-green-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss
deleted file mode 100644
index ab299ca9d84..00000000000
--- a/app/assets/stylesheets/themes/theme_light_indigo.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-indigo {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-indigo-50,
-        $theme-indigo-100,
-        $theme-indigo-700,
-        $theme-indigo-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss
deleted file mode 100644
index 499cdace772..00000000000
--- a/app/assets/stylesheets/themes/theme_light_red.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-red {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-light-red-50,
-        $theme-light-red-100,
-        $theme-light-red-700,
-        $theme-light-red-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss
deleted file mode 100644
index 9a17f98aa80..00000000000
--- a/app/assets/stylesheets/themes/theme_red.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-red {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-red-50,
-        $theme-red-100,
-        $theme-red-900,
-        $theme-red-900,
-      );
-    }
-  }
-}