Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

.rubocop_todo/layout/line_length.yml

@@ -3321,7 +3321,6 @@ Layout/LineLength:
     - 'qa/qa/git/repository.rb'
     - 'qa/qa/page/component/ci_badge_link.rb'
     - 'qa/qa/page/component/issuable/sidebar.rb'
-    - 'qa/qa/page/component/select2.rb'
     - 'qa/qa/page/dashboard/snippet/index.rb'
     - 'qa/qa/page/dashboard/todos.rb'
     - 'qa/qa/page/group/settings/group_deploy_tokens.rb'

.rubocop_todo/style/bare_percent_literals.yml

@@ -37,7 +37,6 @@ Style/BarePercentLiterals:
     - 'qa/qa/ee/page/project/show.rb'
     - 'qa/qa/ee/page/project/snippet/index.rb'
     - 'qa/qa/ee/page/project/wiki/show.rb'
-    - 'qa/qa/page/component/select2.rb'
     - 'qa/qa/page/element.rb'
     - 'qa/qa/page/file/form.rb'
     - 'qa/qa/page/project/web_ide/edit.rb'

.rubocop_todo/style/guard_clause.yml

@@ -635,7 +635,6 @@ Style/GuardClause:
     - 'qa/qa/mobile/page/main/menu.rb'
     - 'qa/qa/mobile/page/sub_menus/common.rb'
     - 'qa/qa/page/component/invite_members_modal.rb'
-    - 'qa/qa/page/component/select2.rb'
     - 'qa/qa/page/component/snippet.rb'
     - 'qa/qa/page/mattermost/login.rb'
     - 'qa/qa/page/page_concern.rb'

.rubocop_todo/style/if_unless_modifier.yml

@@ -1003,7 +1003,6 @@ Style/IfUnlessModifier:
     - 'lib/tasks/gitlab/storage.rake'
     - 'lib/tasks/gitlab/update_templates.rake'
     - 'qa/qa/ee/resource/settings/elasticsearch.rb'
-    - 'qa/qa/page/component/select2.rb'
     - 'qa/qa/page/component/snippet.rb'
     - 'qa/qa/page/element.rb'
     - 'qa/qa/page/mattermost/login.rb'

.stylelintrc

@@ -4,7 +4,6 @@
      "app/assets/stylesheets/pages/emojis.scss",
      "app/assets/stylesheets/startup/startup-*.scss",
      "ee/app/assets/stylesheets/startup/startup-*.scss",
-     "app/assets/stylesheets/lazy_bundles/select2.scss",
      "app/assets/stylesheets/highlight/themes/*.scss",
      "app/assets/stylesheets/lazy_bundles/cropper.css"
    ]

app/assets/images/select2-spinner.gif

@@ -453,7 +453,7 @@ export default {
         data-testid="aws-guidance-tip"
         @dismiss="dismissTip"
       >
-        <div class="gl-display-flex gl-flex-direction-row gl-flex-wrap-wrap gl-md-flex-wrap-nowrap">
+        <div class="gl-display-flex gl-flex-direction-row gl-md-flex-wrap-nowraps gl-gap-3">
           <div>
             <p>
               <gl-sprintf :message="$options.i18n.awsTipMessage">

app/assets/images/select2.png

@@ -15,6 +15,8 @@ export const BASE_SORT_FIELDS = Object.freeze([
   },
 ]);
 
+export const EMPTY_STATE_SVG = '/assets/illustrations/empty-state/empty-dag-md.svg';
+
 export const FEATURE_NAME = s__('MlExperimentTracking|Machine learning experiment tracking');
 
 export const FEATURE_FEEDBACK_ISSUE = 'https://gitlab.com/gitlab-org/gitlab/-/issues/381660';

app/assets/images/select2x2.png

@@ -0,0 +1,85 @@
+<script>
+import { GlTableLite, GlEmptyState, GlLink } from '@gitlab/ui';
+import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
+import Pagination from '~/vue_shared/components/incubation/pagination.vue';
+import {
+  FEATURE_NAME,
+  FEATURE_FEEDBACK_ISSUE,
+  EMPTY_STATE_SVG,
+} from '~/ml/experiment_tracking/constants';
+import * as constants from '~/ml/experiment_tracking/routes/experiments/index/constants';
+import * as translations from '~/ml/experiment_tracking/routes/experiments/index/translations';
+
+export default {
+  name: 'MlExperimentsIndexApp',
+  components: {
+    Pagination,
+    IncubationAlert,
+    GlTableLite,
+    GlEmptyState,
+    GlLink,
+  },
+  props: {
+    experiments: {
+      type: Array,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  tableFields: constants.EXPERIMENTS_TABLE_FIELDS,
+  i18n: translations,
+  computed: {
+    hasExperiments() {
+      return this.experiments.length > 0;
+    },
+    tableItems() {
+      return this.experiments.map((exp) => ({
+        nameColumn: { name: exp.name, path: exp.path },
+        candidateCountColumn: exp.candidate_count,
+      }));
+    },
+  },
+  constants: {
+    FEATURE_NAME,
+    FEATURE_FEEDBACK_ISSUE,
+    EMPTY_STATE_SVG,
+    ...constants,
+  },
+};
+</script>
+
+<template>
+  <div v-if="hasExperiments">
+    <h1 class="page-title gl-font-size-h-display">
+      {{ $options.i18n.TITLE_LABEL }}
+    </h1>
+
+    <incubation-alert
+      :feature-name="$options.constants.FEATURE_NAME"
+      :link-to-feedback-issue="$options.constants.FEATURE_FEEDBACK_ISSUE"
+    />
+
+    <gl-table-lite :items="tableItems" :fields="$options.tableFields">
+      <template #cell(nameColumn)="data">
+        <gl-link :href="data.value.path">
+          {{ data.value.name }}
+        </gl-link>
+      </template>
+    </gl-table-lite>
+
+    <pagination v-if="hasExperiments" v-bind="pageInfo" />
+  </div>
+
+  <gl-empty-state
+    v-else
+    :title="$options.i18n.EMPTY_STATE_TITLE_LABEL"
+    :primary-button-text="$options.i18n.CREATE_NEW_LABEL"
+    :primary-button-link="$options.constants.CREATE_EXPERIMENT_HELP_PATH"
+    :svg-path="$options.constants.EMPTY_STATE_SVG"
+    :description="$options.i18n.EMPTY_STATE_DESCRIPTION_LABEL"
+    class="gl-py-8"
+  />
+</template>

app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue

@@ -0,0 +1,17 @@
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export const CREATE_EXPERIMENT_HELP_PATH = helpPagePath(
+  'user/project/ml/experiment_tracking/index.md',
+  {
+    anchor: 'tracking-new-experiments-and-trials',
+  },
+);
+
+export const EXPERIMENTS_TABLE_FIELDS = Object.freeze([
+  { key: 'nameColumn', label: s__('MlExperimentTracking|Experiment') },
+  {
+    key: 'candidateCountColumn',
+    label: s__('MlExperimentTracking|Logged candidates for experiment'),
+  },
+]);

app/assets/javascripts/ml/experiment_tracking/constants.js

@@ -0,0 +1,3 @@
+import MlExperimentsIndex from './components/ml_experiments_index.vue';
+
+export default MlExperimentsIndex;

app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index.vue

@@ -0,0 +1,11 @@
+import { s__ } from '~/locale';
+
+export const TITLE_LABEL = s__('MlExperimentTracking|Model experiments');
+
+export const CREATE_NEW_LABEL = s__('MlExperimentTracking|Create a new experiment');
+
+export const EMPTY_STATE_TITLE_LABEL = s__('MlExperimentTracking|No experiments');
+
+export const EMPTY_STATE_DESCRIPTION_LABEL = s__(
+  'MlExperimentTracking|There are no logged experiments for this project. Create a new experiment using the MLflow client.',
+);

app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/constants.js

@@ -1,5 +1,4 @@
 import initVariableList from '~/ci/ci_variable_list';
-import projectSelect from '~/project_select';
 import initSearchSettings from '~/search_settings';
 import selfMonitor from '~/self_monitor';
 import initSettingsPanels from '~/settings_panels';
@@ -8,5 +7,4 @@ initVariableList('js-instance-variables');
 selfMonitor();
 // Initialize expandable settings panels
 initSettingsPanels();
-projectSelect();
 initSearchSettings();

app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/index.js

@@ -0,0 +1,19 @@
+<script>
+export default {
+  inject: {
+    jobStatuses: {
+      default: null,
+    },
+    url: {
+      default: '',
+    },
+    emptyStateSvgPath: {
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div>{{ __('Jobs') }}</div>
+</template>

app/assets/javascripts/ml/experiment_tracking/routes/experiments/index/translations.js

@@ -3,6 +3,7 @@ import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import Translate from '~/vue_shared/translate';
 import { CANCEL_JOBS_MODAL_ID } from './components/constants';
 import CancelJobsModal from './components/cancel_jobs_modal.vue';
+import AdminJobsTableApp from './components/table/admin_jobs_table_app.vue';
 
 Vue.use(Translate);
 
@@ -34,4 +35,28 @@ function initJobs() {
   }
 }
 
-initJobs();
+export function initAdminJobsApp() {
+  const containerEl = document.getElementById('admin-jobs-app');
+
+  if (!containerEl) return false;
+
+  const { jobStatuses, emptyStateSvgPath, url } = containerEl.dataset;
+
+  return new Vue({
+    el: containerEl,
+    provide: {
+      url,
+      emptyStateSvgPath,
+      jobStatuses: JSON.parse(jobStatuses),
+    },
+    render(createElement) {
+      return createElement(AdminJobsTableApp);
+    },
+  });
+}
+
+if (gon.features.adminJobsVue) {
+  initAdminJobsApp();
+} else {
+  initJobs();
+}

app/assets/javascripts/pages/admin/application_settings/index.js

@@ -3,7 +3,6 @@ import { mountIssuesDashboardApp } from '~/issues/dashboard';
 import initManualOrdering from '~/issues/manual_ordering';
 import { FILTERED_SEARCH } from '~/filtered_search/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
-import projectSelect from '~/project_select';
 import { initNewResourceDropdown } from '~/vue_shared/components/new_resource_dropdown/init_new_resource_dropdown';
 
 initFilteredSearch({
@@ -12,7 +11,6 @@ initFilteredSearch({
   useDefaultState: true,
 });
 
-projectSelect();
 initNewResourceDropdown();
 initManualOrdering();
 

app/assets/javascripts/pages/admin/jobs/index/components/table/admin_jobs_table_app.vue

@@ -2,7 +2,6 @@ import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
 import { FILTERED_SEARCH } from '~/filtered_search/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
-import projectSelect from '~/project_select';
 import { initNewResourceDropdown } from '~/vue_shared/components/new_resource_dropdown/init_new_resource_dropdown';
 import { RESOURCE_TYPE_MERGE_REQUEST } from '~/vue_shared/components/new_resource_dropdown/constants';
 import searchUserProjectsWithMergeRequestsEnabled from '~/vue_shared/components/new_resource_dropdown/graphql/search_user_projects_with_merge_requests_enabled.query.graphql';
@@ -15,7 +14,6 @@ initFilteredSearch({
   useDefaultState: true,
 });
 
-projectSelect();
 initNewResourceDropdown({
   resourceType: RESOURCE_TYPE_MERGE_REQUEST,
   query: searchUserProjectsWithMergeRequestsEnabled,

app/assets/javascripts/pages/admin/jobs/index/index.js

@@ -1,9 +1,7 @@
-import projectSelect from '~/project_select';
 import { initNewResourceDropdown } from '~/vue_shared/components/new_resource_dropdown/init_new_resource_dropdown';
 import { RESOURCE_TYPE_MILESTONE } from '~/vue_shared/components/new_resource_dropdown/constants';
 import searchUserGroupsAndProjects from '~/vue_shared/components/new_resource_dropdown/graphql/search_user_groups_and_projects.query.graphql';
 
-projectSelect();
 initNewResourceDropdown({
   resourceType: RESOURCE_TYPE_MILESTONE,
   query: searchUserGroupsAndProjects,

app/assets/javascripts/pages/dashboard/issues/index.js

@@ -6,7 +6,6 @@ import { initGroupSelects } from '~/vue_shared/components/entity_select/init_gro
 import { initProjectSelects } from '~/vue_shared/components/entity_select/init_project_selects';
 import { initCascadingSettingsLockPopovers } from '~/namespaces/cascading_settings';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
-import projectSelect from '~/project_select';
 import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 import initConfirmDanger from '~/init_confirm_danger';
@@ -26,7 +25,5 @@ initGroupSelects();
 // Initialize project selectors
 initProjectSelects();
 
-projectSelect();
-
 initSearchSettings();
 initCascadingSettingsLockPopovers();

app/assets/javascripts/pages/dashboard/merge_requests/index.js

@@ -3,7 +3,6 @@ import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered
 import { FILTERED_SEARCH } from '~/filtered_search/constants';
 import { initBulkUpdateSidebar } from '~/issuable';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
-import projectSelect from '~/project_select';
 import { initNewResourceDropdown } from '~/vue_shared/components/new_resource_dropdown/init_new_resource_dropdown';
 import { RESOURCE_TYPE_MERGE_REQUEST } from '~/vue_shared/components/new_resource_dropdown/constants';
 import searchUserGroupProjectsWithMergeRequestsEnabled from '~/vue_shared/components/new_resource_dropdown/graphql/search_user_group_projects_with_merge_requests_enabled.query.graphql';
@@ -19,7 +18,6 @@ initFilteredSearch({
   useDefaultState: true,
   filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
 });
-projectSelect();
 initNewResourceDropdown({
   resourceType: RESOURCE_TYPE_MERGE_REQUEST,
   query: searchUserGroupProjectsWithMergeRequestsEnabled,

app/assets/javascripts/pages/dashboard/milestones/index/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import MlExperimentsIndex from '~/ml/experiment_tracking/routes/experiments/index';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+const initIndexMlExperiments = () => {
+  const element = document.querySelector('#js-project-ml-experiments-index');
+  if (!element) {
+    return undefined;
+  }
+
+  const props = {
+    experiments: JSON.parse(element.dataset.experiments),
+    pageInfo: convertObjectPropsToCamelCase(JSON.parse(element.dataset.pageInfo)),
+  };
+
+  return new Vue({
+    el: element,
+    render(h) {
+      return h(MlExperimentsIndex, { props });
+    },
+  });
+};
+
+initIndexMlExperiments();

app/assets/javascripts/pages/groups/edit/index.js

@@ -9,7 +9,6 @@ import axios from '~/lib/utils/axios_utils';
 import { serializeForm } from '~/lib/utils/forms';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import projectSelect from '~/project_select';
 
 const BRANCH_REF_TYPE = 'heads';
 const TAG_REF_TYPE = 'tags';
@@ -44,13 +43,6 @@ export default class Project {
       $(this).parents('.auto-devops-implicitly-enabled-banner').remove();
       return e.preventDefault();
     });
-
-    Project.projectSelectDropdown();
-  }
-
-  static projectSelectDropdown() {
-    projectSelect();
-    $('.project-item-select').on('click', (e) => Project.changeProject($(e.currentTarget).val()));
   }
 
   static changeProject(url) {