Add latest changes from gitlab-org/gitlab@master

5 files changed, 146 insertions, 77 deletions

diff --git a/app/assets/javascripts/issues/list/components/empty_state_signed_in.vue b/app/assets/javascripts/issues/list/components/empty_state_signed_in.vue
new file mode 100644
index 00000000000..aff611197ac
--- /dev/null
+++ b/app/assets/javascripts/issues/list/components/empty_state_signed_in.vue
@@ -0,0 +1,97 @@
+<script>
+import { GlButton, GlEmptyState, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
+import { i18n } from '../constants';
+import NewIssueDropdown from './new_issue_dropdown.vue';
+
+export default {
+  i18n,
+  issuesHelpPagePath: helpPagePath('user/project/issues/index'),
+  components: {
+    CsvImportExportButtons,
+    GlButton,
+    GlEmptyState,
+    GlLink,
+    GlSprintf,
+    NewIssueDropdown,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: [
+    'canCreateProjects',
+    'emptyStateSvgPath',
+    'jiraIntegrationPath',
+    'newIssuePath',
+    'newProjectPath',
+    'showNewIssueLink',
+  ],
+  props: {
+    currentTabCount: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    exportCsvPathWithQuery: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCsvButtons: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showNewIssueDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-empty-state :title="$options.i18n.noIssuesTitle" :svg-path="emptyStateSvgPath">
+      <template #description>
+        <gl-link :href="$options.issuesHelpPagePath">
+          {{ $options.i18n.noIssuesDescription }}
+        </gl-link>
+        <p v-if="canCreateProjects">
+          <strong>{{ $options.i18n.noGroupIssuesSignedInDescription }}</strong>
+        </p>
+      </template>
+      <template #actions>
+        <gl-button v-if="canCreateProjects" :href="newProjectPath" variant="confirm">
+          {{ $options.i18n.newProjectLabel }}
+        </gl-button>
+        <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
+          {{ $options.i18n.newIssueLabel }}
+        </gl-button>
+        <csv-import-export-buttons
+          v-if="showCsvButtons"
+          class="gl-w-full gl-sm-w-auto gl-sm-mr-3"
+          :export-csv-path="exportCsvPathWithQuery"
+          :issuable-count="currentTabCount"
+        />
+        <new-issue-dropdown v-if="showNewIssueDropdown" class="gl-align-self-center" />
+      </template>
+    </gl-empty-state>
+    <hr />
+    <p class="gl-text-center gl-font-weight-bold gl-mb-0">
+      {{ $options.i18n.jiraIntegrationTitle }}
+    </p>
+    <p class="gl-text-center gl-mb-0">
+      <gl-sprintf :message="$options.i18n.jiraIntegrationMessage">
+        <template #jiraDocsLink="{ content }">
+          <gl-link :href="jiraIntegrationPath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p class="gl-text-center gl-text-secondary">
+      {{ $options.i18n.jiraIntegrationSecondaryMessage }}
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issues/list/components/empty_state_signed_out.vue b/app/assets/javascripts/issues/list/components/empty_state_signed_out.vue
new file mode 100644
index 00000000000..b9b452e0c25
--- /dev/null
+++ b/app/assets/javascripts/issues/list/components/empty_state_signed_out.vue
@@ -0,0 +1,33 @@
+<script>
+import { GlEmptyState, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { i18n } from '../constants';
+
+export default {
+  i18n,
+  issuesHelpPagePath: helpPagePath('user/project/issues/index'),
+  components: {
+    GlEmptyState,
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['emptyStateSvgPath', 'signInPath'],
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :title="$options.i18n.noIssuesTitle"
+    :svg-path="emptyStateSvgPath"
+    :primary-button-text="$options.i18n.noIssuesSignedOutButtonText"
+    :primary-button-link="signInPath"
+  >
+    <template #description>
+      <gl-link :href="$options.issuesHelpPagePath">
+        {{ $options.i18n.noIssuesDescription }}
+      </gl-link>
+    </template>
+  </gl-empty-state>
+</template>
diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index cfb1de2e680..d90ca2f901d 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -4,8 +4,6 @@ import {
   GlEmptyState,
   GlFilteredSearchToken,
   GlIcon,
-  GlLink,
-  GlSprintf,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
@@ -24,7 +22,6 @@ import axios from '~/lib/utils/axios_utils';
 import { isPositiveInteger } from '~/lib/utils/number_utils';
 import { scrollUp } from '~/lib/utils/scroll_utils';
 import { getParameterByName, joinPaths } from '~/lib/utils/url_utility';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import {
   OPTIONS_NONE_ANY,
   FILTERED_SEARCH_TERM,
@@ -91,6 +88,8 @@ import {
   getSortOptions,
   isSortKey,
 } from '../utils';
+import EmptyStateSignedIn from './empty_state_signed_in.vue';
+import EmptyStateSignedOut from './empty_state_signed_out.vue';
 import NewIssueDropdown from './new_issue_dropdown.vue';
 
 const AuthorToken = () =>
@@ -113,11 +112,11 @@ export default {
   IssuableListTabs,
   components: {
     CsvImportExportButtons,
+    EmptyStateSignedIn,
+    EmptyStateSignedOut,
     GlButton,
     GlEmptyState,
     GlIcon,
-    GlLink,
-    GlSprintf,
     IssuableByEmail,
     IssuableList,
     IssueCardTimeInfo,
@@ -131,7 +130,6 @@ export default {
     'autocompleteAwardEmojisPath',
     'calendarPath',
     'canBulkUpdate',
-    'canCreateProjects',
     'canReadCrmContact',
     'canReadCrmOrganization',
     'emptyStateSvgPath',
@@ -149,13 +147,10 @@ export default {
     'isProject',
     'isPublicVisibilityRestricted',
     'isSignedIn',
-    'jiraIntegrationPath',
     'newIssuePath',
-    'newProjectPath',
     'releasesPath',
     'rssPath',
     'showNewIssueLink',
-    'signInPath',
   ],
   props: {
     eeSearchTokens: {
@@ -475,9 +470,6 @@ export default {
         page_before: this.pageParams.beforeCursor ?? undefined,
       };
     },
-    issuesHelpPagePath() {
-      return helpPagePath('user/project/issues/index');
-    },
     shouldDisableSomeFilters() {
       return this.isAnonymousSearchDisabled && !this.isSignedIn;
     },
@@ -934,61 +926,15 @@ export default {
       </template>
     </issuable-list>
 
-    <template v-else-if="isSignedIn">
-      <gl-empty-state :title="$options.i18n.noIssuesSignedInTitle" :svg-path="emptyStateSvgPath">
-        <template #description>
-          <gl-link :href="issuesHelpPagePath" target="_blank">{{
-            $options.i18n.noIssuesSignedInDescription
-          }}</gl-link>
-          <p v-if="canCreateProjects">
-            <strong>{{ $options.i18n.noGroupIssuesSignedInDescription }}</strong>
-          </p>
-        </template>
-        <template #actions>
-          <gl-button v-if="canCreateProjects" :href="newProjectPath" variant="confirm">
-            {{ $options.i18n.newProjectLabel }}
-          </gl-button>
-          <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
-            {{ $options.i18n.newIssueLabel }}
-          </gl-button>
-          <csv-import-export-buttons
-            v-if="showCsvButtons"
-            class="gl-w-full gl-sm-w-auto gl-sm-mr-3"
-            :export-csv-path="exportCsvPathWithQuery"
-            :issuable-count="currentTabCount"
-          />
-          <new-issue-dropdown v-if="showNewIssueDropdown" class="gl-align-self-center" />
-        </template>
-      </gl-empty-state>
-      <hr />
-      <p class="gl-text-center gl-font-weight-bold gl-mb-0">
-        {{ $options.i18n.jiraIntegrationTitle }}
-      </p>
-      <p class="gl-text-center gl-mb-0">
-        <gl-sprintf :message="$options.i18n.jiraIntegrationMessage">
-          <template #jiraDocsLink="{ content }">
-            <gl-link :href="jiraIntegrationPath">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-      <p class="gl-text-center gl-text-gray-500">
-        {{ $options.i18n.jiraIntegrationSecondaryMessage }}
-      </p>
-    </template>
-
-    <gl-empty-state
-      v-else
-      :title="$options.i18n.noIssuesSignedOutTitle"
-      :svg-path="emptyStateSvgPath"
-      :primary-button-text="$options.i18n.noIssuesSignedOutButtonText"
-      :primary-button-link="signInPath"
-    >
-      <template #description>
-        <gl-link :href="issuesHelpPagePath" target="_blank">{{
-          $options.i18n.noIssuesSignedOutDescription
-        }}</gl-link>
-      </template>
-    </gl-empty-state>
+    <empty-state-signed-in
+      v-else-if="isSignedIn"
+      :current-tab-count="currentTabCount"
+      :export-csv-path-with-query="exportCsvPathWithQuery"
+      :show-csv-buttons="showCsvButtons"
+      :show-new-issue-dropdown="showNewIssueDropdown"
+    />
+
+    <empty-state-signed-out v-else />
 
     <issuable-by-email v-if="showIssuableByEmail" class="gl-text-center gl-pt-5 gl-pb-7" />
   </div>
diff --git a/app/assets/javascripts/issues/list/constants.js b/app/assets/javascripts/issues/list/constants.js
index bbe69923fea..fd7d53e7a36 100644
--- a/app/assets/javascripts/issues/list/constants.js
+++ b/app/assets/javascripts/issues/list/constants.js
@@ -57,11 +57,9 @@ export const i18n = {
   ),
   noOpenIssuesDescription: __('To keep this project going, create a new issue'),
   noOpenIssuesTitle: __('There are no open issues'),
-  noIssuesSignedInDescription: __('Learn more about issues.'),
-  noIssuesSignedInTitle: __('Use issues to collaborate on ideas, solve problems, and plan work'),
+  noIssuesDescription: __('Learn more about issues.'),
+  noIssuesTitle: __('Use issues to collaborate on ideas, solve problems, and plan work'),
   noIssuesSignedOutButtonText: __('Register / Sign In'),
-  noIssuesSignedOutDescription: __('Learn more about issues.'),
-  noIssuesSignedOutTitle: __('Use issues to collaborate on ideas, solve problems, and plan work'),
   noSearchResultsDescription: __('To widen your search, change or remove filters above'),
   noSearchResultsTitle: __('Sorry, your filter produced no results'),
   relatedMergeRequests: __('Related merge requests'),
@@ -74,7 +72,6 @@ export const i18n = {
 export const ISSUE_REFERENCE = /^#\d+$/;
 export const MAX_LIST_SIZE = 10;
 export const PAGE_SIZE = 20;
-export const PAGE_SIZE_MANUAL = 100;
 export const PARAM_ASSIGNEE_ID = 'assignee_id';
 export const PARAM_FIRST_PAGE_SIZE = 'first_page_size';
 export const PARAM_LAST_PAGE_SIZE = 'last_page_size';
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 72dfccca467..0f000815978 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlDatepicker, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 import { MAX_TEXT_LENGTH, timelineFormI18n } from './constants';
 import { getUtcShiftedDate } from './utils';
 
@@ -27,9 +26,6 @@ export default {
   },
   i18n: timelineFormI18n,
   MAX_TEXT_LENGTH,
-  directives: {
-    autofocusonshow,
-  },
   props: {
     showSaveAndAdd: {
       type: Boolean,
@@ -97,7 +93,7 @@ export default {
       this.timelineText = '';
     },
     focusDate() {
-      this.$refs.datepicker.$el.querySelector('input').focus();
+      this.$refs.datepicker.$el.querySelector('input')?.focus();
     },
     handleSave(addAnotherEvent) {
       const event = {