Add latest changes from gitlab-org/gitlab@master

.gitlab/issue_templates/Geo Replicate a new Git repository type.md

@@ -491,6 +491,9 @@ That's all of the required database changes.
       self.primary_key = :cool_widget_id
 
       belongs_to :cool_widget, inverse_of: :cool_widget_state
+
+      validates :verification_failure, length: { maximum: 255 }
+      validates :verification_state, :cool_widget, presence: true
     end
   end
   ```

.gitlab/issue_templates/Geo Replicate a new blob type.md

@@ -455,6 +455,9 @@ That's all of the required database changes.
       self.primary_key = :cool_widget_id
 
       belongs_to :cool_widget, inverse_of: :cool_widget_state
+
+      validates :verification_failure, length: { maximum: 255 }
+      validates :verification_state, :cool_widget, presence: true
     end
   end
   ```

app/assets/javascripts/crm/components/contacts_root.vue

@@ -71,6 +71,9 @@ export default {
       this.error = false;
       this.errorMessages = [];
     },
+    getIssuesPath(path, value) {
+      return `${path}?scope=all&state=opened&crm_contact_id=${value}`;
+    },
   },
   fields: [
     { key: 'firstName', sortable: true },
@@ -142,7 +145,7 @@ export default {
           data-testid="issues-link"
           icon="issues"
           :aria-label="$options.i18n.issuesButtonLabel"
-          :href="`${groupIssuesPath}?scope=all&state=opened&crm_contact_id=${data.value}`"
+          :href="getIssuesPath(groupIssuesPath, data.value)"
         />
       </template>
     </gl-table>

app/assets/javascripts/crm/components/organizations_root.vue

@@ -1,17 +1,25 @@
 <script>
-import { GlLoadingIcon, GlTable } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { GlAlert, GlButton, GlLoadingIcon, GlTable, GlTooltipDirective } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import getGroupOrganizationsQuery from './queries/get_group_organizations.query.graphql';
 
 export default {
   components: {
+    GlAlert,
+    GlButton,
     GlLoadingIcon,
     GlTable,
   },
-  inject: ['groupFullPath'],
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['groupFullPath', 'groupIssuesPath'],
   data() {
-    return { organizations: [] };
+    return {
+      error: false,
+      organizations: [],
+    };
   },
   apollo: {
     organizations: {
@@ -26,12 +34,8 @@ export default {
       update(data) {
         return this.extractOrganizations(data);
       },
-      error(error) {
-        createFlash({
-          message: __('Something went wrong. Please try again.'),
-          error,
-          captureError: true,
-        });
+      error() {
+        this.error = true;
       },
     },
   },
@@ -45,27 +49,55 @@ export default {
       const organizations = data?.group?.organizations?.nodes || [];
       return organizations.slice().sort((a, b) => a.name.localeCompare(b.name));
     },
+    dismissError() {
+      this.error = false;
+    },
+    getIssuesPath(path, value) {
+      return `${path}?scope=all&state=opened&crm_organization_id=${value}`;
+    },
   },
   fields: [
     { key: 'name', sortable: true },
     { key: 'defaultRate', sortable: true },
     { key: 'description', sortable: true },
+    {
+      key: 'id',
+      label: __('Issues'),
+      formatter: (id) => {
+        return getIdFromGraphQLId(id);
+      },
+    },
   ],
   i18n: {
     emptyText: s__('Crm|No organizations found'),
+    issuesButtonLabel: __('View issues'),
+    errorText: __('Something went wrong. Please try again.'),
   },
 };
 </script>
 
 <template>
   <div>
+    <gl-alert v-if="error" variant="danger" class="gl-my-6" @dismiss="dismissError">
+      <div>{{ $options.i18n.errorText }}</div>
+    </gl-alert>
     <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" />
     <gl-table
       v-else
       :items="organizations"
       :fields="$options.fields"
       :empty-text="$options.i18n.emptyText"
       show-empty
-    />
+    >
+      <template #cell(id)="data">
+        <gl-button
+          v-gl-tooltip.hover.bottom="$options.i18n.issuesButtonLabel"
+          data-testid="issues-link"
+          icon="issues"
+          :aria-label="$options.i18n.issuesButtonLabel"
+          :href="getIssuesPath(groupIssuesPath, data.value)"
+        />
+      </template>
+    </gl-table>
   </div>
 </template>

app/assets/javascripts/crm/organizations_bundle.js

@@ -16,10 +16,12 @@ export default () => {
     return false;
   }
 
+  const { groupFullPath, groupIssuesPath } = el.dataset;
+
   return new Vue({
     el,
     apolloProvider,
-    provide: { groupFullPath: el.dataset.groupFullPath },
+    provide: { groupFullPath, groupIssuesPath },
     render(createElement) {
       return createElement(CrmOrganizationsRoot);
     },

app/assets/javascripts/vue_shared/components/issuable/init_issuable_header_warning.js → app/assets/javascripts/issuable/init_issuable_header_warning.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import IssuableHeaderWarnings from './issuable_header_warnings.vue';
+import IssuableHeaderWarnings from './components/issuable_header_warnings.vue';
 
 export default function issuableHeaderWarnings(store) {
   const el = document.getElementById('js-issuable-header-warnings');

app/assets/javascripts/issue_show/components/description.vue → app/assets/javascripts/issues/show/components/description.vue

@@ -3,7 +3,7 @@ import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import $ from 'jquery';
 import createFlash from '~/flash';
 import { __, sprintf } from '~/locale';
-import TaskList from '../../task_list';
+import TaskList from '~/task_list';
 import animateMixin from '../mixins/animate';
 
 export default {

app/assets/javascripts/issue_show/components/edited.vue → app/assets/javascripts/issues/show/components/edited.vue

@@ -1,6 +1,6 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {

app/assets/javascripts/issue_show/components/fields/description_template.vue → app/assets/javascripts/issues/show/components/fields/description_template.vue

@@ -1,7 +1,7 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
-import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
+import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
 
 export default {
   components: {

app/assets/javascripts/issue_show/components/form.vue → app/assets/javascripts/issues/show/components/form.vue

@@ -2,7 +2,7 @@
 import { GlAlert } from '@gitlab/ui';
 import $ from 'jquery';
 import Autosave from '~/autosave';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/show/constants';
 import eventHub from '../event_hub';
 import EditActions from './edit_actions.vue';
 import DescriptionField from './fields/description.vue';

app/assets/javascripts/issue_show/components/header_actions.vue → app/assets/javascripts/issues/show/components/header_actions.vue

@@ -4,7 +4,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import { IssuableType } from '~/issuable_show/constants';
-import { IssuableStatus, IssueStateEvent } from '~/issue_show/constants';
+import { IssuableStatus, IssueStateEvent } from '~/issues/show/constants';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, __, sprintf } from '~/locale';

app/assets/javascripts/issue_show/services/index.js → app/assets/javascripts/issues/show/services/index.js

@@ -1,4 +1,4 @@
-import axios from '../../lib/utils/axios_utils';
+import axios from '~/lib/utils/axios_utils';
 
 export default class Service {
   constructor(endpoint) {

app/assets/javascripts/notes/components/sidebar_subscription.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/show/constants';
 import { fetchPolicies } from '~/lib/graphql';
 import { confidentialityQueries } from '~/sidebar/constants';
 import { defaultClient as gqlClient } from '~/sidebar/graphql';

app/assets/javascripts/pages/projects/issues/show.js

@@ -3,14 +3,14 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import initIssuableSidebar from '~/init_issuable_sidebar';
 import { IssuableType } from '~/issuable_show/constants';
 import Issue from '~/issue';
-import { initIncidentApp, initIncidentHeaderActions } from '~/issue_show/incident';
-import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
-import { parseIssuableData } from '~/issue_show/utils/parse_data';
+import { initIncidentApp, initIncidentHeaderActions } from '~/issues/show/incident';
+import { initIssuableApp, initIssueHeaderActions } from '~/issues/show/issue';
+import { parseIssuableData } from '~/issues/show/utils/parse_data';
 import initNotesApp from '~/notes';
 import { store } from '~/notes/stores';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
 import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
-import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
+import initIssuableHeaderWarning from '~/issuable/init_issuable_header_warning';
 import ZenMode from '~/zen_mode';
 
 export default function initShowIssue() {

app/assets/javascripts/pages/projects/merge_requests/show/index.js

@@ -2,7 +2,7 @@ import { initReviewBar } from '~/batch_comments';
 import initMrNotes from '~/mr_notes';
 import store from '~/mr_notes/stores';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
-import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
+import initIssuableHeaderWarning from '~/issuable/init_issuable_header_warning';
 import initShow from '../init_merge_request_show';
 
 initMrNotes();

app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue

@@ -1,14 +1,15 @@
 <script>
-import { GlAlert, GlLoadingIcon, GlSegmentedControl, GlToggle } from '@gitlab/ui';
+import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { STAGE_VIEW, LAYER_VIEW } from './constants';
 
 export default {
   name: 'GraphViewSelector',
   components: {
     GlAlert,
+    GlButton,
+    GlButtonGroup,
     GlLoadingIcon,
-    GlSegmentedControl,
     GlToggle,
   },
   props: {
@@ -96,6 +97,9 @@ export default {
       this.hoverTipDismissed = true;
       this.$emit('dismissHoverTip');
     },
+    isCurrentType(type) {
+      return this.segmentSelectedType === type;
+    },
     /*
       In both toggle methods, we use setTimeout so that the loading indicator displays,
       then the work is done to update the DOM. The process is:
@@ -110,11 +114,14 @@ export default {
 
      See https://www.hesselinkwebdesign.nl/2019/nexttick-vs-settimeout-in-vue/ for more details.
     */
-    toggleView(type) {
-      this.isSwitcherLoading = true;
-      setTimeout(() => {
-        this.$emit('updateViewType', type);
-      });
+    setViewType(type) {
+      if (!this.isCurrentType(type)) {
+        this.isSwitcherLoading = true;
+        this.segmentSelectedType = type;
+        setTimeout(() => {
+          this.$emit('updateViewType', type);
+        });
+      }
     },
     toggleShowLinksActive(val) {
       this.isToggleLoading = true;
@@ -136,14 +143,16 @@ export default {
         size="lg"
       />
       <span class="gl-font-weight-bold">{{ $options.i18n.viewLabelText }}</span>
-      <gl-segmented-control
-        v-model="segmentSelectedType"
-        :options="viewTypesList"
-        :disabled="isSwitcherLoading"
-        data-testid="pipeline-view-selector"
-        class="gl-mx-4"
-        @input="toggleView"
-      />
+      <gl-button-group class="gl-mx-4">
+        <gl-button
+          v-for="viewType in viewTypesList"
+          :key="viewType.value"
+          :selected="isCurrentType(viewType.value)"
+          @click="setViewType(viewType.value)"
+        >
+          {{ viewType.text }}
+        </gl-button>
+      </gl-button-group>
 
       <div v-if="showLinksToggle" class="gl-display-flex gl-align-items-center">
         <gl-toggle

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

@@ -3,7 +3,7 @@ import { GlLink, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { sprintf, __, n__ } from '~/locale';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
-import { parseIssuableData } from '../../issue_show/utils/parse_data';
+import { parseIssuableData } from '~/issues/show/utils/parse_data';
 
 export default {
   name: 'RelatedMergeRequests',

app/assets/javascripts/runner/components/cells/runner_status_cell.vue

@@ -1,14 +1,12 @@
 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
 
-import RunnerContactedStateBadge from '../runner_contacted_state_badge.vue';
+import RunnerStatusBadge from '../runner_status_badge.vue';
 import RunnerPausedBadge from '../runner_paused_badge.vue';
 
-import { I18N_LOCKED_RUNNER_DESCRIPTION, I18N_PAUSED_RUNNER_DESCRIPTION } from '../../constants';
-
 export default {
   components: {
-    RunnerContactedStateBadge,
+    RunnerStatusBadge,
     RunnerPausedBadge,
   },
   directives: {
@@ -25,16 +23,12 @@ export default {
       return !this.runner.active;
     },
   },
-  i18n: {
-    I18N_LOCKED_RUNNER_DESCRIPTION,
-    I18N_PAUSED_RUNNER_DESCRIPTION,
-  },
 };
 </script>
 
 <template>
   <div>
-    <runner-contacted-state-badge :runner="runner" size="sm" />
+    <runner-status-badge :runner="runner" size="sm" />
     <runner-paused-badge v-if="paused" size="sm" />
   </div>
 </template>