summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2021-06-17 10:07:47 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2021-06-17 10:07:47 +0000
commitd670c3006e6e44901bce0d53cc4768d1d80ffa92 (patch)
tree8f65743c232e5b76850c4cc264ba15e1185815ff /app/assets
parenta5f4bba440d7f9ea47046a0a561d49adf0a1e6d4 (diff)
downloadgitlab-ce-d670c3006e6e44901bce0d53cc4768d1d80ffa92.tar.gz
Add latest changes from gitlab-org/gitlab@14-0-stable-ee
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/content_editor/components/top_toolbar.vue9
-rw-r--r--app/assets/javascripts/content_editor/extensions/strike.js9
-rw-r--r--app/assets/javascripts/content_editor/services/create_content_editor.js2
-rw-r--r--app/assets/javascripts/environments/components/deploy_board.vue4
-rw-r--r--app/assets/javascripts/issuable_list/components/issuable_item.vue13
-rw-r--r--app/assets/javascripts/issuable_list/components/issuable_list_root.vue32
-rw-r--r--app/assets/javascripts/issues_list/components/issue_card_time_info.vue7
-rw-r--r--app/assets/javascripts/issues_list/components/issues_list_app.vue132
-rw-r--r--app/assets/javascripts/issues_list/constants.js5
-rw-r--r--app/assets/javascripts/issues_list/index.js13
-rw-r--r--app/assets/javascripts/issues_list/queries/get_issues.query.graphql45
-rw-r--r--app/assets/javascripts/issues_list/queries/issue.fragment.graphql51
-rw-r--r--app/assets/javascripts/jira_connect/index.js2
-rw-r--r--app/assets/javascripts/performance_bar/index.js2
-rw-r--r--app/assets/javascripts/runner/components/runner_manual_setup_help.vue42
-rw-r--r--app/assets/javascripts/runner/components/runner_registration_token_reset.vue83
-rw-r--r--app/assets/javascripts/runner/graphql/runners_registration_token_reset.mutation.graphql6
-rw-r--r--app/assets/javascripts/runner/runner_list/runner_list_app.vue7
-rw-r--r--app/assets/javascripts/sentry/index.js2
-rw-r--r--app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue2
-rw-r--r--app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue2
-rw-r--r--app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue6
-rw-r--r--app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue7
-rw-r--r--app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue35
-rw-r--r--app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue7
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue44
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue83
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue24
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value_collapsed.vue55
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql15
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue5
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js26
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js4
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js11
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js1
-rw-r--r--app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue2
-rw-r--r--app/assets/javascripts/webpack.js3
-rw-r--r--app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss54
-rw-r--r--app/assets/stylesheets/startup/startup-dark.scss114
-rw-r--r--app/assets/stylesheets/startup/startup-general.scss18
40 files changed, 729 insertions, 255 deletions
diff --git a/app/assets/javascripts/content_editor/components/top_toolbar.vue b/app/assets/javascripts/content_editor/components/top_toolbar.vue
index 07fdd3147e2..d3363ce092b 100644
--- a/app/assets/javascripts/content_editor/components/top_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/top_toolbar.vue
@@ -64,6 +64,15 @@ export default {
@execute="trackToolbarControlExecution"
/>
<toolbar-button
+ data-testid="strike"
+ content-type="strike"
+ icon-name="strikethrough"
+ editor-command="toggleStrike"
+ :label="__('Strikethrough')"
+ :tiptap-editor="contentEditor.tiptapEditor"
+ @execute="trackToolbarControlExecution"
+ />
+ <toolbar-button
data-testid="code"
content-type="code"
icon-name="code"
diff --git a/app/assets/javascripts/content_editor/extensions/strike.js b/app/assets/javascripts/content_editor/extensions/strike.js
new file mode 100644
index 00000000000..6f228e00994
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/strike.js
@@ -0,0 +1,9 @@
+import { Strike } from '@tiptap/extension-strike';
+
+export const tiptapExtension = Strike;
+export const serializer = {
+ open: '~~',
+ close: '~~',
+ mixable: true,
+ expelEnclosingWhitespace: true,
+};
diff --git a/app/assets/javascripts/content_editor/services/create_content_editor.js b/app/assets/javascripts/content_editor/services/create_content_editor.js
index df45287e6cb..8a54da6f57d 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -19,6 +19,7 @@ import * as Link from '../extensions/link';
import * as ListItem from '../extensions/list_item';
import * as OrderedList from '../extensions/ordered_list';
import * as Paragraph from '../extensions/paragraph';
+import * as Strike from '../extensions/strike';
import * as Text from '../extensions/text';
import buildSerializerConfig from './build_serializer_config';
import { ContentEditor } from './content_editor';
@@ -44,6 +45,7 @@ const builtInContentEditorExtensions = [
ListItem,
OrderedList,
Paragraph,
+ Strike,
Text,
];
diff --git a/app/assets/javascripts/environments/components/deploy_board.vue b/app/assets/javascripts/environments/components/deploy_board.vue
index f9c4660036b..217cea051b7 100644
--- a/app/assets/javascripts/environments/components/deploy_board.vue
+++ b/app/assets/javascripts/environments/components/deploy_board.vue
@@ -66,9 +66,7 @@ export default {
return this.isEmpty;
},
canRenderCanaryWeight() {
- return (
- this.glFeatures.canaryIngressWeightControl && !isEmpty(this.deployBoardData.canary_ingress)
- );
+ return !isEmpty(this.deployBoardData.canary_ingress);
},
instanceCount() {
const { instances } = this.deployBoardData;
diff --git a/app/assets/javascripts/issuable_list/components/issuable_item.vue b/app/assets/javascripts/issuable_list/components/issuable_item.vue
index 348dc054f57..20d1dce3905 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_item.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_item.vue
@@ -50,6 +50,9 @@ export default {
},
},
computed: {
+ issuableId() {
+ return getIdFromGraphQLId(this.issuable.id);
+ },
createdInPastDay() {
const createdSecondsAgo = differenceInSeconds(new Date(this.issuable.createdAt), new Date());
return createdSecondsAgo < SECONDS_IN_DAY;
@@ -61,7 +64,7 @@ export default {
return this.issuable.gitlabWebUrl || this.issuable.webUrl;
},
authorId() {
- return getIdFromGraphQLId(`${this.author.id}`);
+ return getIdFromGraphQLId(this.author.id);
},
isIssuableUrlExternal() {
return isExternal(this.webUrl);
@@ -70,10 +73,10 @@ export default {
return this.issuable.labels?.nodes || this.issuable.labels || [];
},
labelIdsString() {
- return JSON.stringify(this.labels.map((label) => label.id));
+ return JSON.stringify(this.labels.map((label) => getIdFromGraphQLId(label.id)));
},
assignees() {
- return this.issuable.assignees || [];
+ return this.issuable.assignees?.nodes || this.issuable.assignees || [];
},
createdAt() {
return sprintf(__('created %{timeAgo}'), {
@@ -157,7 +160,7 @@ export default {
<template>
<li
- :id="`issuable_${issuable.id}`"
+ :id="`issuable_${issuableId}`"
class="issue gl-px-5!"
:class="{ closed: issuable.closedAt, today: createdInPastDay }"
:data-labels="labelIdsString"
@@ -167,7 +170,7 @@ export default {
<gl-form-checkbox
class="gl-mr-0"
:checked="checked"
- :data-id="issuable.id"
+ :data-id="issuableId"
@input="$emit('checked-input', $event)"
>
<span class="gl-sr-only">{{ issuable.title }}</span>
diff --git a/app/assets/javascripts/issuable_list/components/issuable_list_root.vue b/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
index 45584205be0..a19c76cfe3f 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
@@ -1,7 +1,7 @@
<script>
-import { GlSkeletonLoading, GlPagination } from '@gitlab/ui';
+import { GlKeysetPagination, GlSkeletonLoading, GlPagination } from '@gitlab/ui';
import { uniqueId } from 'lodash';
-
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { updateHistory, setUrlParams } from '~/lib/utils/url_utility';
import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
@@ -19,6 +19,7 @@ export default {
tag: 'ul',
},
components: {
+ GlKeysetPagination,
GlSkeletonLoading,
IssuableTabs,
FilteredSearchBar,
@@ -140,6 +141,21 @@ export default {
required: false,
default: false,
},
+ useKeysetPagination: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
+ hasNextPage: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
+ hasPreviousPage: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
data() {
return {
@@ -211,7 +227,7 @@ export default {
},
methods: {
issuableId(issuable) {
- return issuable.id || issuable.iid || uniqueId();
+ return getIdFromGraphQLId(issuable.id) || issuable.iid || uniqueId();
},
issuableChecked(issuable) {
return this.checkedIssuables[this.issuableId(issuable)]?.checked;
@@ -315,8 +331,16 @@ export default {
<slot v-else name="empty-state"></slot>
</template>
+ <div v-if="showPaginationControls && useKeysetPagination" class="gl-text-center gl-mt-3">
+ <gl-keyset-pagination
+ :has-next-page="hasNextPage"
+ :has-previous-page="hasPreviousPage"
+ @next="$emit('next-page')"
+ @prev="$emit('previous-page')"
+ />
+ </div>
<gl-pagination
- v-if="showPaginationControls"
+ v-else-if="showPaginationControls"
:per-page="defaultPageSize"
:total-items="totalItems"
:value="currentPage"
diff --git a/app/assets/javascripts/issues_list/components/issue_card_time_info.vue b/app/assets/javascripts/issues_list/components/issue_card_time_info.vue
index 8d00d337bac..70d73aca925 100644
--- a/app/assets/javascripts/issues_list/components/issue_card_time_info.vue
+++ b/app/assets/javascripts/issues_list/components/issue_card_time_info.vue
@@ -42,6 +42,9 @@ export default {
}
return __('Milestone');
},
+ milestoneLink() {
+ return this.issue.milestone.webPath || this.issue.milestone.webUrl;
+ },
dueDate() {
return this.issue.dueDate && dateInWords(new Date(this.issue.dueDate), true);
},
@@ -49,7 +52,7 @@ export default {
return isInPast(new Date(this.issue.dueDate));
},
timeEstimate() {
- return this.issue.timeStats?.humanTimeEstimate;
+ return this.issue.humanTimeEstimate || this.issue.timeStats?.humanTimeEstimate;
},
showHealthStatus() {
return this.hasIssuableHealthStatusFeature && this.issue.healthStatus;
@@ -85,7 +88,7 @@ export default {
class="issuable-milestone gl-display-none gl-sm-display-inline-block! gl-mr-3"
data-testid="issuable-milestone"
>
- <gl-link v-gl-tooltip :href="issue.milestone.webUrl" :title="milestoneDate">
+ <gl-link v-gl-tooltip :href="milestoneLink" :title="milestoneDate">
<gl-icon name="clock" />
{{ issue.milestone.title }}
</gl-link>
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 d5cab77f26c..dbf7717b248 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -9,7 +9,7 @@ import {
GlTooltipDirective,
} from '@gitlab/ui';
import fuzzaldrinPlus from 'fuzzaldrin-plus';
-import { toNumber } from 'lodash';
+import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql';
import createFlash from '~/flash';
import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
@@ -17,13 +17,12 @@ import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
import { IssuableListTabs, IssuableStates } from '~/issuable_list/constants';
import {
API_PARAM,
- apiSortParams,
CREATED_DESC,
i18n,
+ initialPageParams,
MAX_LIST_SIZE,
PAGE_SIZE,
PARAM_DUE_DATE,
- PARAM_PAGE,
PARAM_SORT,
PARAM_STATE,
RELATIVE_POSITION_DESC,
@@ -49,7 +48,8 @@ import {
getSortOptions,
} from '~/issues_list/utils';
import axios from '~/lib/utils/axios_utils';
-import { convertObjectPropsToCamelCase, getParameterByName } from '~/lib/utils/common_utils';
+import { getParameterByName } from '~/lib/utils/common_utils';
+import { scrollUp } from '~/lib/utils/scroll_utils';
import {
DEFAULT_NONE_ANY,
OPERATOR_IS_ONLY,
@@ -107,9 +107,6 @@ export default {
emptyStateSvgPath: {
default: '',
},
- endpoint: {
- default: '',
- },
exportCsvPath: {
default: '',
},
@@ -173,15 +170,43 @@ export default {
dueDateFilter: getDueDateValue(getParameterByName(PARAM_DUE_DATE)),
exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
filterTokens: getFilterTokens(window.location.search),
- isLoading: false,
issues: [],
- page: toNumber(getParameterByName(PARAM_PAGE)) || 1,
+ pageInfo: {},
+ pageParams: initialPageParams,
showBulkEditSidebar: false,
sortKey: getSortKey(getParameterByName(PARAM_SORT)) || defaultSortKey,
state: state || IssuableStates.Opened,
totalIssues: 0,
};
},
+ apollo: {
+ issues: {
+ query: getIssuesQuery,
+ variables() {
+ return {
+ projectPath: this.projectPath,
+ search: this.searchQuery,
+ sort: this.sortKey,
+ state: this.state,
+ ...this.pageParams,
+ ...this.apiFilterParams,
+ };
+ },
+ update: ({ project }) => project.issues.nodes,
+ result({ data }) {
+ this.pageInfo = data.project.issues.pageInfo;
+ this.totalIssues = data.project.issues.count;
+ this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
+ },
+ error(error) {
+ createFlash({ message: this.$options.i18n.errorFetchingIssues, captureError: true, error });
+ },
+ skip() {
+ return !this.hasProjectIssues;
+ },
+ debounce: 200,
+ },
+ },
computed: {
hasSearch() {
return this.searchQuery || Object.keys(this.urlFilterParams).length;
@@ -348,7 +373,6 @@ export default {
return {
due_date: this.dueDateFilter,
- page: this.page,
search: this.searchQuery,
state: this.state,
...urlSortParams[this.sortKey],
@@ -361,7 +385,6 @@ export default {
},
mounted() {
eventHub.$on('issuables:toggleBulkEdit', this.toggleBulkEditSidebar);
- this.fetchIssues();
},
beforeDestroy() {
eventHub.$off('issuables:toggleBulkEdit', this.toggleBulkEditSidebar);
@@ -406,54 +429,11 @@ export default {
fetchUsers(search) {
return axios.get(this.autocompleteUsersPath, { params: { search } });
},
- fetchIssues() {
- if (!this.hasProjectIssues) {
- return undefined;
- }
-
- this.isLoading = true;
-
- const filterParams = {
- ...this.apiFilterParams,
- };
-
- if (filterParams.epic_id) {
- filterParams.epic_id = filterParams.epic_id.split('::&').pop();
- } else if (filterParams['not[epic_id]']) {
- filterParams['not[epic_id]'] = filterParams['not[epic_id]'].split('::&').pop();
- }
-
- return axios
- .get(this.endpoint, {
- params: {
- due_date: this.dueDateFilter,
- page: this.page,
- per_page: PAGE_SIZE,
- search: this.searchQuery,
- state: this.state,
- with_labels_details: true,
- ...apiSortParams[this.sortKey],
- ...filterParams,
- },
- })
- .then(({ data, headers }) => {
- this.page = Number(headers['x-page']);
- this.totalIssues = Number(headers['x-total']);
- this.issues = data.map((issue) => convertObjectPropsToCamelCase(issue, { deep: true }));
- this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
- })
- .catch(() => {
- createFlash({ message: this.$options.i18n.errorFetchingIssues });
- })
- .finally(() => {
- this.isLoading = false;
- });
- },
getExportCsvPathWithQuery() {
return `${this.exportCsvPath}${window.location.search}`;
},
getStatus(issue) {
- if (issue.closedAt && issue.movedToId) {
+ if (issue.closedAt && issue.moved) {
return this.$options.i18n.closedMoved;
}
if (issue.closedAt) {
@@ -484,18 +464,26 @@ export default {
},
handleClickTab(state) {
if (this.state !== state) {
- this.page = 1;
+ this.pageParams = initialPageParams;
}
this.state = state;
- this.fetchIssues();
},
handleFilter(filter) {
this.filterTokens = filter;
- this.fetchIssues();
},
- handlePageChange(page) {
- this.page = page;
- this.fetchIssues();
+ handleNextPage() {
+ this.pageParams = {
+ afterCursor: this.pageInfo.endCursor,
+ firstPageSize: PAGE_SIZE,
+ };
+ scrollUp();
+ },
+ handlePreviousPage() {
+ this.pageParams = {
+ beforeCursor: this.pageInfo.startCursor,
+ lastPageSize: PAGE_SIZE,
+ };
+ scrollUp();
},
handleReorder({ newIndex, oldIndex }) {
const issueToMove = this.issues[oldIndex];
@@ -530,9 +518,11 @@ export default {
createFlash({ message: this.$options.i18n.reorderError });
});
},
- handleSort(value) {
- this.sortKey = value;
- this.fetchIssues();
+ handleSort(sortKey) {
+ if (this.sortKey !== sortKey) {
+ this.pageParams = initialPageParams;
+ }
+ this.sortKey = sortKey;
},
toggleBulkEditSidebar(showBulkEditSidebar) {
this.showBulkEditSidebar = showBulkEditSidebar;
@@ -556,18 +546,18 @@ export default {
:tabs="$options.IssuableListTabs"
:current-tab="state"
:tab-counts="tabCounts"
- :issuables-loading="isLoading"
+ :issuables-loading="$apollo.queries.issues.loading"
:is-manual-ordering="isManualOrdering"
:show-bulk-edit-sidebar="showBulkEditSidebar"
:show-pagination-controls="showPaginationControls"
- :total-items="totalIssues"
- :current-page="page"
- :previous-page="page - 1"
- :next-page="page + 1"
+ :use-keyset-pagination="true"
+ :has-next-page="pageInfo.hasNextPage"
+ :has-previous-page="pageInfo.hasPreviousPage"
:url-params="urlParams"
@click-tab="handleClickTab"
@filter="handleFilter"
- @page-change="handlePageChange"
+ @next-page="handleNextPage"
+ @previous-page="handlePreviousPage"
@reorder="handleReorder"
@sort="handleSort"
@update-legacy-bulk-edit="handleUpdateLegacyBulkEdit"
@@ -646,7 +636,7 @@ export default {
</li>
<blocking-issues-count
class="gl-display-none gl-sm-display-block"
- :blocking-issues-count="issuable.blockingIssuesCount"
+ :blocking-issues-count="issuable.blockedByCount"
:is-list-item="true"
/>
</template>
diff --git a/app/assets/javascripts/issues_list/constants.js b/app/assets/javascripts/issues_list/constants.js
index 06e140d6420..76006f9081d 100644
--- a/app/assets/javascripts/issues_list/constants.js
+++ b/app/assets/javascripts/issues_list/constants.js
@@ -101,10 +101,13 @@ export const i18n = {
export const JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY = 'jira-import-success-alert-hide-map';
export const PARAM_DUE_DATE = 'due_date';
-export const PARAM_PAGE = 'page';
export const PARAM_SORT = 'sort';
export const PARAM_STATE = 'state';
+export const initialPageParams = {
+ firstPageSize: PAGE_SIZE,
+};
+
export const DUE_DATE_NONE = '0';
export const DUE_DATE_ANY = '';
export const DUE_DATE_OVERDUE = 'overdue';
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index d0c9462a3d7..97b9a9a115d 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -73,6 +73,13 @@ export function mountIssuesListApp() {
return false;
}
+ Vue.use(VueApollo);
+
+ const defaultClient = createDefaultClient({}, { assumeImmutableResults: true });
+ const apolloProvider = new VueApollo({
+ defaultClient,
+ });
+
const {
autocompleteAwardEmojisPath,
autocompleteUsersPath,
@@ -83,7 +90,6 @@ export function mountIssuesListApp() {
email,
emailsHelpPagePath,
emptyStateSvgPath,
- endpoint,
exportCsvPath,
groupEpicsPath,
hasBlockedIssuesFeature,
@@ -113,16 +119,13 @@ export function mountIssuesListApp() {
return new Vue({
el,
- // Currently does not use Vue Apollo, but need to provide {} for now until the
- // issue is fixed upstream in https://github.com/vuejs/vue-apollo/pull/1153
- apolloProvider: {},
+ apolloProvider,
provide: {
autocompleteAwardEmojisPath,
autocompleteUsersPath,
calendarPath,
canBulkUpdate: parseBoolean(canBulkUpdate),
emptyStateSvgPath,
- endpoint,
groupEpicsPath,
hasBlockedIssuesFeature: parseBoolean(hasBlockedIssuesFeature),
hasIssuableHealthStatusFeature: parseBoolean(hasIssuableHealthStatusFeature),
diff --git a/app/assets/javascripts/issues_list/queries/get_issues.query.graphql b/app/assets/javascripts/issues_list/queries/get_issues.query.graphql
new file mode 100644
index 00000000000..afd53084ca0
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/get_issues.query.graphql
@@ -0,0 +1,45 @@
+#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "./issue.fragment.graphql"
+
+query getProjectIssues(
+ $projectPath: ID!
+ $search: String
+ $sort: IssueSort
+ $state: IssuableState
+ $assigneeId: String
+ $assigneeUsernames: [String!]
+ $authorUsername: String
+ $labelName: [String]
+ $milestoneTitle: [String]
+ $not: NegatedIssueFilterInput
+ $beforeCursor: String
+ $afterCursor: String
+ $firstPageSize: Int
+ $lastPageSize: Int
+) {
+ project(fullPath: $projectPath) {
+ issues(
+ search: $search
+ sort: $sort
+ state: $state
+ assigneeId: $assigneeId
+ assigneeUsernames: $assigneeUsernames
+ authorUsername: $authorUsername
+ labelName: $labelName
+ milestoneTitle: $milestoneTitle
+ not: $not
+ before: $beforeCursor
+ after: $afterCursor
+ first: $firstPageSize
+ last: $lastPageSize
+ ) {
+ count
+ pageInfo {
+ ...PageInfo
+ }
+ nodes {
+ ...IssueFragment
+ }
+ }
+ }
+}
diff --git a/app/assets/javascripts/issues_list/queries/issue.fragment.graphql b/app/assets/javascripts/issues_list/queries/issue.fragment.graphql
new file mode 100644
index 00000000000..de30d8b4bf6
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/issue.fragment.graphql
@@ -0,0 +1,51 @@
+fragment IssueFragment on Issue {
+ id
+ iid
+ closedAt
+ confidential
+ createdAt
+ downvotes
+ dueDate
+ humanTimeEstimate
+ moved
+ title
+ updatedAt
+ upvotes
+ userDiscussionsCount
+ webUrl
+ assignees {
+ nodes {
+ id
+ avatarUrl
+ name
+ username
+ webUrl
+ }
+ }
+ author {
+ id
+ avatarUrl
+ name
+ username
+ webUrl
+ }
+ labels {
+ nodes {
+ id
+ color
+ title
+ description
+ }
+ }
+ milestone {
+ id
+ dueDate
+ startDate
+ webPath
+ title
+ }
+ taskCompletionStatus {
+ completedCount
+ count
+ }
+}
diff --git a/app/assets/javascripts/jira_connect/index.js b/app/assets/javascripts/jira_connect/index.js
index dc8bb3b0c77..bc0d21c6c9a 100644
--- a/app/assets/javascripts/jira_connect/index.js
+++ b/app/assets/javascripts/jira_connect/index.js
@@ -1,3 +1,5 @@
+import '../webpack';
+
import setConfigs from '@gitlab/ui/dist/config';
import Vue from 'vue';
import { getLocation, sizeToParent } from '~/jira_connect/utils';
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index d8aab25a6a8..66e999ca43b 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,3 +1,5 @@
+import '../webpack';
+
import Vue from 'vue';
import axios from '~/lib/utils/axios_utils';
import { numberToHumanSize } from '~/lib/utils/number_utils';
diff --git a/app/assets/javascripts/runner/components/runner_manual_setup_help.vue b/app/assets/javascripts/runner/components/runner_manual_setup_help.vue
index 4755977b051..426d377c92b 100644
--- a/app/assets/javascripts/runner/components/runner_manual_setup_help.vue
+++ b/app/assets/javascripts/runner/components/runner_manual_setup_help.vue
@@ -1,8 +1,10 @@
<script>
import { GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
+import RunnerRegistrationTokenReset from '~/runner/components/runner_registration_token_reset.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import RunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
+import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
export default {
components: {
@@ -10,6 +12,7 @@ export default {
GlSprintf,
ClipboardButton,
RunnerInstructions,
+ RunnerRegistrationTokenReset,
},
directives: {
GlTooltip: GlTooltipDirective,
@@ -24,16 +27,40 @@ export default {
type: String,
required: true,
},
- typeName: {
+ type: {
type: String,
- required: false,
- default: __('shared'),
+ required: true,
+ validator(type) {
+ return [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE].includes(type);
+ },
},
},
+ data() {
+ return {
+ currentRegistrationToken: this.registrationToken,
+ };
+ },
computed: {
rootUrl() {
return gon.gitlab_url || '';
},
+ typeName() {
+ switch (this.type) {
+ case INSTANCE_TYPE:
+ return s__('Runners|shared');
+ case GROUP_TYPE:
+ return s__('Runners|group');
+ case PROJECT_TYPE:
+ return s__('Runners|specific');
+ default:
+ return '';
+ }
+ },
+ },
+ methods: {
+ onTokenReset(token) {
+ this.currentRegistrationToken = token;
+ },
},
};
</script>
@@ -65,12 +92,13 @@ export default {
{{ __('And this registration token:') }}
<br />
- <code data-testid="registration-token">{{ registrationToken }}</code>
- <clipboard-button :title="__('Copy token')" :text="registrationToken" />
+ <code data-testid="registration-token">{{ currentRegistrationToken }}</code>
+ <clipboard-button :title="__('Copy token')" :text="currentRegistrationToken" />
</li>
</ol>
- <!-- TODO Implement reset token functionality -->
+ <runner-registration-token-reset :type="type" @tokenReset="onTokenReset" />
+
<runner-instructions />
</div>
</template>
diff --git a/app/assets/javascripts/runner/components/runner_registration_token_reset.vue b/app/assets/javascripts/runner/components/runner_registration_token_reset.vue
new file mode 100644
index 00000000000..b03574264d9
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_registration_token_reset.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import createFlash, { FLASH_TYPES } from '~/flash';
+import { __, s__ } from '~/locale';
+import runnersRegistrationTokenResetMutation from '~/runner/graphql/runners_registration_token_reset.mutation.graphql';
+import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
+
+export default {
+ components: {
+ GlButton,
+ },
+ props: {
+ type: {
+ type: String,
+ required: true,
+ validator(type) {
+ return [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE].includes(type);
+ },
+ },
+ },
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {},
+ methods: {
+ async resetToken() {
+ // TODO Replace confirmation with gl-modal
+ // See: https://gitlab.com/gitlab-org/gitlab/-/issues/333810
+ // eslint-disable-next-line no-alert
+ if (!window.confirm(__('Are you sure you want to reset the registration token?'))) {
+ return;
+ }
+
+ this.loading = true;
+ try {
+ const {
+ data: {
+ runnersRegistrationTokenReset: { token, errors },
+ },
+ } = await this.$apollo.mutate({
+ mutation: runnersRegistrationTokenResetMutation,
+ variables: {
+ // TODO Currently INTANCE_TYPE only is supported
+ // In future iterations this component will support
+ // other registration token types.
+ // See: https://gitlab.com/gitlab-org/gitlab/-/issues/19819
+ input: {
+ type: this.type,
+ },
+ },
+ });
+ if (errors && errors.length) {
+ this.onError(new Error(errors[0]));
+ return;
+ }
+ this.onSuccess(token);
+ } catch (e) {
+ this.onError(e);
+ } finally {
+ this.loading = false;
+ }
+ },
+ onError(error) {
+ const { message } = error;
+ createFlash({ message });
+ },
+ onSuccess(token) {
+ createFlash({
+ message: s__('Runners|New registration token generated!'),
+ type: FLASH_TYPES.SUCCESS,
+ });
+ this.$emit('tokenReset', token);
+ },
+ },
+};
+</script>
+<template>
+ <gl-button :loading="loading" @click="resetToken">
+ {{ __('Reset registration token') }}
+ </gl-button>
+</template>
diff --git a/app/assets/javascripts/runner/graphql/runners_registration_token_reset.mutation.graphql b/app/assets/javascripts/runner/graphql/runners_registration_token_reset.mutation.graphql
new file mode 100644
index 00000000000..9c2797732ad
--- /dev/null
+++ b/app/assets/javascripts/runner/graphql/runners_registration_token_reset.mutation.graphql
@@ -0,0 +1,6 @@
+mutation runnersRegistrationTokenReset($input: RunnersRegistrationTokenResetInput!) {
+ runnersRegistrationTokenReset(input: $input) {
+ token
+ errors
+ }
+}
diff --git a/app/assets/javascripts/runner/runner_list/runner_list_app.vue b/app/assets/javascripts/runner/runner_list/runner_list_app.vue
index b4eacb911a2..7f3a980ccca 100644
--- a/app/assets/javascripts/runner/runner_list/runner_list_app.vue
+++ b/app/assets/javascripts/runner/runner_list/runner_list_app.vue
@@ -7,6 +7,7 @@ import RunnerList from '../components/runner_list.vue';
import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue';
import RunnerPagination from '../components/runner_pagination.vue';
import RunnerTypeHelp from '../components/runner_type_help.vue';
+import { INSTANCE_TYPE } from '../constants';
import getRunnersQuery from '../graphql/get_runners.query.graphql';
import {
fromUrlQueryToSearch,
@@ -97,6 +98,7 @@ export default {
});
},
},
+ INSTANCE_TYPE,
};
</script>
<template>
@@ -106,7 +108,10 @@ export default {
<runner-type-help />
</div>
<div class="col-sm-6">
- <runner-manual-setup-help :registration-token="registrationToken" />
+ <runner-manual-setup-help
+ :registration-token="registrationToken"
+ :type="$options.INSTANCE_TYPE"
+ />
</div>
</div>
diff --git a/app/assets/javascripts/sentry/index.js b/app/assets/javascripts/sentry/index.js
index 06e4e0aa507..a875ef84088 100644
--- a/app/assets/javascripts/sentry/index.js
+++ b/app/assets/javascripts/sentry/index.js
@@ -1,3 +1,5 @@
+import '../webpack';
+
import SentryConfig from './sentry_config';
const index = function index() {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
index b25c0cc0d96..bdd46d6a656 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
@@ -71,7 +71,7 @@ export default {
:aria-label="buttonTitle"
:loading="isLoading"
:disabled="isActionInProgress"
- :class="`inline gl-ml-2 ${containerClasses}`"
+ :class="`inline gl-ml-3 ${containerClasses}`"
:icon="icon"
@click="$emit('click')"
>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
index 671f9cb8e74..7e587663c26 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
@@ -151,7 +151,7 @@ export default {
</script>
<template>
- <div>
+ <div class="gl-display-inline-flex">
<deployment-action-button
v-if="canBeManuallyDeployed"
:action-in-progress="actionInProgress"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
index a5d165ebd49..459bee8023f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
@@ -71,13 +71,13 @@ export default {
};
</script>
<template>
- <span>
+ <span class="gl-display-inline-flex">
<gl-button-group v-if="shouldRenderDropdown" size="small">
<review-app-link
:display="appButtonText"
:link="deploymentExternalUrl"
size="small"
- css-class="deploy-link js-deploy-url inline"
+ css-class="deploy-link js-deploy-url inline gl-ml-3"
/>
<gl-dropdown toggle-class="gl-px-2!" size="small" class="js-mr-wigdet-deployment-dropdown">
<template #button-content>
@@ -112,7 +112,7 @@ export default {
:display="appButtonText"
:link="deploymentExternalUrl"
size="small"
- css-class="js-deploy-url deploy-link btn btn-default btn-sm inline"
+ css-class="js-deploy-url deploy-link btn btn-default btn-sm inline gl-ml-3"
/>
<visual-review-app-link
v-if="showVisualReviewApp"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
index 2e7b3e149b2..3b261f5ac25 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
@@ -71,9 +71,9 @@ export default {
<template>
<base-token
- :token-config="config"
- :token-value="value"
- :token-active="active"
+ :config="config"
+ :value="value"
+ :active="active"
:tokens-list-loading="loading"
:token-values="authors"
:fn-active-token-value="getActiveAuthor"
@@ -81,6 +81,7 @@ export default {
:preloaded-token-values="preloadedAuthors"
:recent-token-values-storage-key="config.recentTokenValuesStorageKey"
@fetch-token-values="fetchAuthorBySearchTerm"
+ v-on="$listeners"
>
<template #view="{ viewTokenProps: { inputValue, activeTokenValue } }">
<gl-avatar
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index fb6b9e4bc0d..bda6b340871 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
@@ -19,29 +19,34 @@ export default {
GlLoadingIcon,
},
props: {
- tokenConfig: {
+ config: {
type: Object,
required: true,
},
- tokenValue: {
+ value: {
type: Object,
required: true,
},
- tokenActive: {
+ active: {
type: Boolean,
required: true,
},
tokensListLoading: {
type: Boolean,
- required: true,
+ required: false,
+ default: false,
},
tokenValues: {
type: Array,
- required: true,
+ required: false,
+ default: () => [],
},
fnActiveTokenValue: {
type: Function,
- required: true,
+ required: false,
+ default: (tokenValues, currentTokenValue) => {
+ return tokenValues.find(({ value }) => value === currentTokenValue);
+ },
},
defaultTokenValues: {
type: Array,
@@ -90,9 +95,9 @@ export default {
},
currentTokenValue() {
if (this.fnCurrentTokenValue) {
- return this.fnCurrentTokenValue(this.tokenValue.data);
+ return this.fnCurrentTokenValue(this.value.data);
}
- return this.tokenValue.data.toLowerCase();
+ return this.value.data.toLowerCase();
},
activeTokenValue() {
return this.fnActiveTokenValue(this.tokenValues, this.currentTokenValue);
@@ -113,11 +118,11 @@ export default {
},
},
watch: {
- tokenActive: {
+ active: {
immediate: true,
handler(newValue) {
if (!newValue && !this.tokenValues.length) {
- this.$emit('fetch-token-values', this.tokenValue.data);
+ this.$emit('fetch-token-values', this.value.data);
}
},
},
@@ -148,9 +153,11 @@ export default {
<template>
<gl-filtered-search-token
- :config="tokenConfig"
- v-bind="{ ...this.$parent.$props, ...this.$parent.$attrs }"
- v-on="this.$parent.$listeners"
+ :config="config"
+ :value="value"
+ :active="active"
+ v-bind="$attrs"
+ v-on="$listeners"
@input="handleInput"
@select="handleTokenValueSelected(activeTokenValue)"
>
@@ -177,7 +184,7 @@ export default {
<gl-dropdown-divider />
</template>
<slot
- v-if="preloadedTokenValues.length"
+ v-if="preloadedTokenValues.length && !searchKey"
name="token-values-list"
:token-values="preloadedTokenValues"
></slot>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
index 20b8cbfe933..e496d099a42 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
@@ -93,15 +93,16 @@ export default {
<template>
<base-token
- :token-config="config"
- :token-value="value"
- :token-active="active"
+ :config="config"
+ :value="value"
+ :active="active"
:tokens-list-loading="loading"
:token-values="labels"
:fn-active-token-value="getActiveLabel"
:default-token-values="defaultLabels"
:recent-token-values-storage-key="config.recentTokenValuesStorageKey"
@fetch-token-values="fetchLabelBySearchTerm"
+ v-on="$listeners"
>
<template
#view-token="{ viewTokenProps: { inputValue, cssClasses, listeners, activeTokenValue } }"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
index d80b66fd9be..1f0704f7308 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
@@ -1,5 +1,6 @@
<script>
-import { mapGetters, mapState } from 'vuex';
+import { GlButton } from '@gitlab/ui';
+import { mapActions, mapGetters, mapState } from 'vuex';
import DropdownContentsCreateView from './dropdown_contents_create_view.vue';
import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
@@ -8,6 +9,7 @@ export default {
components: {
DropdownContentsLabelsView,
DropdownContentsCreateView,
+ GlButton,
},
props: {
renderOnTop: {
@@ -15,10 +17,14 @@ export default {
required: false,
default: false,
},
+ labelsCreateTitle: {
+ type: String,
+ required: true,
+ },
},
computed: {
- ...mapState(['showDropdownContentsCreateView']),
- ...mapGetters(['isDropdownVariantSidebar']),
+ ...mapState(['showDropdownContentsCreateView', 'labelsListTitle']),
+ ...mapGetters(['isDropdownVariantSidebar', 'isDropdownVariantEmbedded']),
dropdownContentsView() {
if (this.showDropdownContentsCreateView) {
return 'dropdown-contents-create-view';
@@ -29,6 +35,12 @@ export default {
const bottom = this.isDropdownVariantSidebar ? '3rem' : '2rem';
return this.renderOnTop ? { bottom } : {};
},
+ dropdownTitle() {
+ return this.showDropdownContentsCreateView ? this.labelsCreateTitle : this.labelsListTitle;
+ },
+ },
+ methods: {
+ ...mapActions(['toggleDropdownContentsCreateView', 'toggleDropdownContents']),
},
};
</script>
@@ -39,6 +51,30 @@ export default {
data-qa-selector="labels_dropdown_content"
:style="directionStyle"
>
- <component :is="dropdownContentsView" />
+ <div
+ v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
+ class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
+ data-testid="dropdown-title"
+ >
+ <gl-button
+ v-if="showDropdownContentsCreateView"
+ :aria-label="__('Go back')"
+ variant="link"
+ size="small"
+ class="js-btn-back dropdown-header-button p-0"
+ icon="arrow-left"
+ @click="toggleDropdownContentsCreateView"
+ />
+ <span class="flex-grow-1">{{ dropdownTitle }}</span>
+ <gl-button
+ :aria-label="__('Close')"
+ variant="link"
+ size="small"
+ class="dropdown-header-button gl-p-0!"
+ icon="close"
+ @click="toggleDropdownContents"
+ />
+ </div>
+ <component :is="dropdownContentsView" @hideCreateView="toggleDropdownContentsCreateView" />
</div>
</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
index f8cc981ba3d..a7f20fbe851 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
@@ -1,6 +1,10 @@
<script>
import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
-import { mapState, mapActions } from 'vuex';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import createLabelMutation from './graphql/create_label.mutation.graphql';
+
+const errorMessage = __('Error creating label.');
export default {
components: {
@@ -12,14 +16,19 @@ export default {
directives: {
GlTooltip: GlTooltipDirective,
},
+ inject: {
+ projectPath: {
+ default: '',
+ },
+ },
data() {
return {
labelTitle: '',
selectedColor: '',
+ labelCreateInProgress: false,
};
},
computed: {
- ...mapState(['labelsCreateTitle', 'labelCreateInProgress']),
disableCreate() {
return !this.labelTitle.length || !this.selectedColor.length || this.labelCreateInProgress;
},
@@ -29,7 +38,6 @@ export default {
},
},
methods: {
- ...mapActions(['toggleDropdownContents', 'toggleDropdownContentsCreateView', 'createLabel']),
getColorCode(color) {
return Object.keys(color).pop();
},
@@ -39,11 +47,27 @@ export default {
handleColorClick(color) {
this.selectedColor = this.getColorCode(color);
},
- handleCreateClick() {
- this.createLabel({
- title: this.labelTitle,
- color: this.selectedColor,
- });
+ async createLabel() {
+ this.labelCreateInProgress = true;
+ try {
+ const {
+ data: { labelCreate },
+ } = await this.$apollo.mutate({
+ mutation: createLabelMutation,
+ variables: {
+ title: this.labelTitle,
+ color: this.selectedColor,
+ projectPath: this.projectPath,
+ },
+ });
+ if (labelCreate.errors.length) {
+ createFlash({ message: errorMessage });
+ }
+ } catch {
+ createFlash({ message: errorMessage });
+ }
+ this.labelCreateInProgress = false;
+ this.$emit('hideCreateView');
},
},
};
@@ -51,34 +75,16 @@ export default {
<template>
<div class="labels-select-contents-create js-labels-create">
- <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
- <gl-button
- :aria-label="__('Go back')"
- variant="link"
- size="small"
- class="js-btn-back dropdown-header-button p-0"
- icon="arrow-left"
- @click="toggleDropdownContentsCreateView"
- />
- <span class="flex-grow-1">{{ labelsCreateTitle }}</span>
- <gl-button
- :aria-label="__('Close')"
- variant="link"
- size="small"
- class="dropdown-header-button p-0"
- icon="close"
- @click="toggleDropdownContents"
- />
- </div>
<div class="dropdown-input">
<gl-form-input
v-model.trim="labelTitle"
:placeholder="__('Name new label')"
:autofocus="true"
+ data-testid="label-title-input"
/>
</div>
- <div class="dropdown-content px-2">
- <div class="suggest-colors suggest-colors-dropdown mt-0 mb-2">
+ <div class="dropdown-content gl-px-3">
+ <div class="suggest-colors suggest-colors-dropdown gl-mt-0! gl-mb-3!">
<gl-link
v-for="(color, index) in suggestedColors"
:key="index"
@@ -90,28 +96,35 @@ export default {
</div>
<div class="color-input-container gl-display-flex">
<span
- class="dropdown-label-color-preview position-relative position-relative d-inline-block"
+ class="dropdown-label-color-preview gl-relative gl-display-inline-block"
+ data-testid="selected-color"
:style="{ backgroundColor: selectedColor }"
></span>
<gl-form-input
v-model.trim="selectedColor"
class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
:placeholder="__('Use custom color #FF0000')"
+ data-testid="selected-color-text"
/>
</div>
</div>
- <div class="dropdown-actions clearfix pt-2 px-2">
+ <div class="dropdown-actions gl-display-flex gl-justify-content-space-between gl-pt-3 gl-px-3">
<gl-button
:disabled="disableCreate"
category="primary"
variant="success"
- class="float-left d-flex align-items-center"
- @click="handleCreateClick"
+ class="gl-display-flex gl-align-items-center"
+ data-testid="create-button"
+ @click="createLabel"
>
- <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
+ <gl-loading-icon v-if="labelCreateInProgress" :inline="true" class="mr-1" />
{{ __('Create') }}
</gl-button>
- <gl-button class="float-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
+ <gl-button
+ class="js-btn-cancel-create"
+ data-testid="cancel-button"
+ @click="$emit('hideCreateView')"
+ >
{{ __('Cancel') }}
</gl-button>
</div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
index 86788a84260..bff34743344 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
@@ -1,11 +1,5 @@
<script>
-import {
- GlIntersectionObserver,
- GlLoadingIcon,
- GlButton,
- GlSearchBoxByType,
- GlLink,
-} from '@gitlab/ui';
+import { GlIntersectionObserver, GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
import fuzzaldrinPlus from 'fuzzaldrin-plus';
import { mapState, mapGetters, mapActions } from 'vuex';
@@ -17,7 +11,6 @@ export default {
components: {
GlIntersectionObserver,
GlLoadingIcon,
- GlButton,
GlSearchBoxByType,
GlLink,
LabelItem,
@@ -149,21 +142,6 @@ export default {
<template>
<gl-intersection-observer @appear="handleComponentAppear" @disappear="handleComponentDisappear">
<div class="labels-select-contents-list js-labels-list" @keydown="handleKeyDown">
- <div
- v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
- class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
- data-testid="dropdown-title"
- >
- <span class="flex-grow-1">{{ labelsListTitle }}</span>
- <gl-button
- :aria-label="__('Close')"
- variant="link"
- size="small"
- class="dropdown-header-button gl-p-0!"
- icon="close"
- @click="toggleDropdownContents"
- />
- </div>
<div class="dropdown-input" @click.stop="() => {}">
<gl-search-box-by-type
ref="searchInput"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value_collapsed.vue
new file mode 100644
index 00000000000..122250d1ce7
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value_collapsed.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+
+export default {
+ directives: {
+ GlTooltip: GlTooltipDirective,
+ },
+ components: {
+ GlIcon,
+ },
+ props: {
+ labels: {
+ type: Array,
+ required: true,
+ },
+ },
+ computed: {
+ labelsList() {
+ const labelsString = this.labels.length
+ ? this.labels
+ .slice(0, 5)
+ .map((label) => label.title)
+ .join(', ')
+ : s__('LabelSelect|Labels');
+
+ if (this.labels.length > 5) {
+ return sprintf(s__('LabelSelect|%{labelsString}, and %{remainingLabelCount} more'), {
+ labelsString,
+ remainingLabelCount: this.labels.length - 5,
+ });
+ }
+
+ return labelsString;
+ },
+ },
+ methods: {
+ handleClick() {
+ this.$emit('onValueClick');
+ },
+ },
+};
+</script>
+
+<template>
+ <div
+ v-gl-tooltip.left.viewport
+ :title="labelsList"
+ class="sidebar-collapsed-icon"
+ @click="handleClick"
+ >
+ <gl-icon name="labels" />
+ <span>{{ labels.length }}</span>
+ </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql
new file mode 100644
index 00000000000..9aa4f5d165e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql
@@ -0,0 +1,15 @@
+mutation createLabel($title: String!, $color: String, $projectPath: ID, $groupPath: ID) {
+ labelCreate(
+ input: { title: $title, color: $color, projectPath: $projectPath, groupPath: $groupPath }
+ ) {
+ label {
+ id
+ color
+ description
+ descriptionHtml
+ title
+ textColor
+ }
+ errors
+ }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
index bf30e3cfac5..7728c758e18 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
@@ -5,13 +5,12 @@ import Vuex, { mapState, mapActions, mapGetters } from 'vuex';
import { isInViewport } from '~/lib/utils/common_utils';
import { __ } from '~/locale';
-import DropdownValueCollapsed from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue';
-
import { DropdownVariant } from './constants';
import DropdownButton from './dropdown_button.vue';
import DropdownContents from './dropdown_contents.vue';
import DropdownTitle from './dropdown_title.vue';
import DropdownValue from './dropdown_value.vue';
+import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
import labelsSelectModule from './store';
Vue.use(Vuex);
@@ -163,7 +162,6 @@ export default {
labelsFilterBasePath: this.labelsFilterBasePath,
labelsFilterParam: this.labelsFilterParam,
labelsListTitle: this.labelsListTitle,
- labelsCreateTitle: this.labelsCreateTitle,
footerCreateLabelTitle: this.footerCreateLabelTitle,
footerManageLabelTitle: this.footerManageLabelTitle,
});
@@ -313,6 +311,7 @@ export default {
v-show="dropdownButtonVisible && showDropdownContents"
ref="dropdownContents"
:render-on-top="!contentIsOnViewport"
+ :labels-create-title="labelsCreateTitle"
/>
</template>
<template v-if="isDropdownVariantStandalone || isDropdownVariantEmbedded">
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
index 89f96ab916b..2b96b159ca3 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
@@ -28,31 +28,5 @@ export const fetchLabels = ({ state, dispatch }) => {
.catch(() => dispatch('receiveLabelsFailure'));
};
-export const requestCreateLabel = ({ commit }) => commit(types.REQUEST_CREATE_LABEL);
-export const receiveCreateLabelSuccess = ({ commit }) => commit(types.RECEIVE_CREATE_LABEL_SUCCESS);
-export const receiveCreateLabelFailure = ({ commit }) => {
- commit(types.RECEIVE_CREATE_LABEL_FAILURE);
- flash(__('Error creating label.'));
-};
-export const createLabel = ({ state, dispatch }, label) => {
- dispatch('requestCreateLabel');
- axios
- .post(state.labelsManagePath, {
- label,
- })
- .then(({ data }) => {
- if (data.id) {
- dispatch('receiveCreateLabelSuccess');
- dispatch('toggleDropdownContentsCreateView');
- } else {
- // eslint-disable-next-line @gitlab/require-i18n-strings
- throw new Error('Error Creating Label');
- }
- })
- .catch(() => {
- dispatch('receiveCreateLabelFailure');
- });
-};
-
export const updateSelectedLabels = ({ commit }, labels) =>
commit(types.UPDATE_SELECTED_LABELS, { labels });
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
index 2e044dc3b3c..b8da7a90b36 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
@@ -8,10 +8,6 @@ export const REQUEST_SET_LABELS = 'REQUEST_SET_LABELS';
export const RECEIVE_SET_LABELS_SUCCESS = 'RECEIVE_SET_LABELS_SUCCESS';
export const RECEIVE_SET_LABELS_FAILURE = 'RECEIVE_SET_LABELS_FAILURE';
-export const REQUEST_CREATE_LABEL = 'REQUEST_CREATE_LABEL';
-export const RECEIVE_CREATE_LABEL_SUCCESS = 'RECEIVE_CREATE_LABEL_SUCCESS';
-export const RECEIVE_CREATE_LABEL_FAILURE = 'RECEIVE_CREATE_LABEL_FAILURE';
-
export const TOGGLE_DROPDOWN_BUTTON = 'TOGGLE_DROPDOWN_VISIBILITY';
export const TOGGLE_DROPDOWN_CONTENTS = 'TOGGLE_DROPDOWN_CONTENTS';
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
index 55716e1105e..131c6e6fb57 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
@@ -46,17 +46,6 @@ export default {
[types.RECEIVE_SET_LABELS_FAILURE](state) {
state.labelsFetchInProgress = false;
},
-
- [types.REQUEST_CREATE_LABEL](state) {
- state.labelCreateInProgress = true;
- },
- [types.RECEIVE_CREATE_LABEL_SUCCESS](state) {
- state.labelCreateInProgress = false;
- },
- [types.RECEIVE_CREATE_LABEL_FAILURE](state) {
- state.labelCreateInProgress = false;
- },
-
[types.UPDATE_SELECTED_LABELS](state, { labels }) {
// Find the label to update from all the labels
// and change `set` prop value to represent their current state.
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
index d66cfed4163..220bab05ed2 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
@@ -3,7 +3,6 @@ export default () => ({
labels: [],
selectedLabels: [],
labelsListTitle: '',
- labelsCreateTitle: '',
footerCreateLabelTitle: '',
footerManageLabelTitle: '',
dropdownButtonText: '',
diff --git a/app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue b/app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue
index 9e941087da2..5d39d740c07 100644
--- a/app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue
@@ -35,7 +35,7 @@ export default {
<template>
<gl-dropdown
v-gl-tooltip
- :title="s__('SecurityReports|Download results')"
+ :text="s__('SecurityReports|Download results')"
:loading="loading"
icon="download"
size="small"
diff --git a/app/assets/javascripts/webpack.js b/app/assets/javascripts/webpack.js
index 4f558843357..b901f17790f 100644
--- a/app/assets/javascripts/webpack.js
+++ b/app/assets/javascripts/webpack.js
@@ -2,6 +2,9 @@
* This is the first script loaded by webpack's runtime. It is used to manually configure
* config.output.publicPath to account for relative_url_root or CDN settings which cannot be
* baked-in to our webpack bundles.
+ *
+ * Note: This file should be at the top of an entry point and _cannot_ be moved to
+ * e.g. the `window` scope, because it needs to be executed in the scope of webpack.
*/
if (gon && gon.webpack_public_path) {
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
index 154b8c31e8b..1ea50281204 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
@@ -13,13 +13,49 @@ $top-level-item-color: $purple-900;
box-shadow: none;
}
+&.gl-dark .nav-sidebar .sidebar-sub-level-items {
+ box-shadow: none;
+ border: 1px solid $border-color;
+}
+
+&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
+ color: $white;
+}
+
&.gl-dark .nav-sidebar li a,
&.gl-dark .toggle-sidebar-button .collapse-text,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title {
+&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
+ color: $gray-darkest;
+}
+
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
+ @include gl-mt-0;
+}
+
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a,
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover,
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a,
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
+ background: $white;
color: $gray-darkest;
+
+ &::before {
+ border-right-color: $white;
+ }
+}
+
+&.gl-dark .nav-sidebar .sidebar-sub-level-items {
+ background-color: $white;
}
&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
@@ -183,7 +219,7 @@ $top-level-item-color: $purple-900;
.avatar.s32 {
@extend .rect-avatar.s32;
- color: $gray-900;
+ //color: $gray-900;
box-shadow: $avatar-box-shadow;
}
}
@@ -226,7 +262,7 @@ $top-level-item-color: $purple-900;
color: $white;
@if $has-sub-items {
- @include gl-mt-n2;
+ @include gl-mt-0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} @else {
@@ -244,13 +280,13 @@ $top-level-item-color: $purple-900;
content: '';
display: block;
top: 50%;
- left: $gl-spacing-scale-3/-2;
- margin-top: -$gl-spacing-scale-3;
+ left: -$gl-spacing-scale-2;
+ margin-top: -$gl-spacing-scale-2;
width: 0;
height: 0;
- border-top: $gl-spacing-scale-3 solid transparent;
- border-bottom: $gl-spacing-scale-3 solid transparent;
- border-right: $gl-spacing-scale-3 solid $black;
+ border-top: $gl-spacing-scale-2 solid transparent;
+ border-bottom: $gl-spacing-scale-2 solid transparent;
+ border-right: $gl-spacing-scale-2 solid $black;
}
}
}
@@ -356,6 +392,8 @@ $top-level-item-color: $purple-900;
}
a.has-sub-items + .sidebar-sub-level-items {
+ @include gl-mt-n2;
+
.fly-out-top-item {
@include fly-out-top-item($has-sub-items: true);
}
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index c6f0b3a2ba7..00a6ee579d8 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -1240,6 +1240,18 @@ input {
body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
box-shadow: none;
}
+body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
+ box-shadow: none;
+ border: 1px solid #404040;
+}
+body.sidebar-refactoring.gl-dark
+ .sidebar-top-level-items
+ .context-header
+ a
+ .avatar-container.rect-avatar
+ .avatar.s32 {
+ color: #333;
+}
body.sidebar-refactoring.gl-dark .nav-sidebar li a,
body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring.gl-dark
@@ -1257,9 +1269,91 @@ body.sidebar-refactoring.gl-dark
.nav-sidebar-inner-scroll
> div.context-header
a
- .sidebar-context-title {
+ .sidebar-context-title,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ a,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items
+ .fly-out-top-item.active
+ a,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ .fly-out-top-item-container {
+ color: #c4c4c4;
+}
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ a,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items
+ .fly-out-top-item.active
+ a,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ .fly-out-top-item-container {
+ margin-top: 0;
+}
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a:not(.has-sub-items)
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ a,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a:not(.has-sub-items)
+ + .sidebar-sub-level-items
+ .fly-out-top-item.active
+ a,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a:not(.has-sub-items)
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ .fly-out-top-item-container {
+ background: #333;
color: #c4c4c4;
}
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a:not(.has-sub-items)
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ a::before,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a:not(.has-sub-items)
+ + .sidebar-sub-level-items
+ .fly-out-top-item.active
+ a::before,
+body.sidebar-refactoring.gl-dark
+ .nav-sidebar
+ a:not(.has-sub-items)
+ + .sidebar-sub-level-items
+ .fly-out-top-item
+ .fly-out-top-item-container::before {
+ border-right-color: #333;
+}
+body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
+ background-color: #333;
+}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
@@ -1482,12 +1576,18 @@ body.sidebar-refactoring
display: block;
top: 50%;
left: -0.25rem;
- margin-top: -0.5rem;
+ margin-top: -0.25rem;
width: 0;
height: 0;
- border-top: 0.5rem solid transparent;
- border-bottom: 0.5rem solid transparent;
- border-right: 0.5rem solid #fff;
+ border-top: 0.25rem solid transparent;
+ border-bottom: 0.25rem solid transparent;
+ border-right: 0.25rem solid #fff;
+}
+body.sidebar-refactoring
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items {
+ margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
@@ -1523,7 +1623,7 @@ body.sidebar-refactoring
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
- margin-top: -0.25rem;
+ margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@@ -1691,7 +1791,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
- color: #fafafa;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
@@ -1732,7 +1831,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
- color: #fafafa;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index a05e27b6af0..4605b6de563 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -1444,12 +1444,18 @@ body.sidebar-refactoring
display: block;
top: 50%;
left: -0.25rem;
- margin-top: -0.5rem;
+ margin-top: -0.25rem;
width: 0;
height: 0;
- border-top: 0.5rem solid transparent;
- border-bottom: 0.5rem solid transparent;
- border-right: 0.5rem solid #000;
+ border-top: 0.25rem solid transparent;
+ border-bottom: 0.25rem solid transparent;
+ border-right: 0.25rem solid #000;
+}
+body.sidebar-refactoring
+ .nav-sidebar
+ a.has-sub-items
+ + .sidebar-sub-level-items {
+ margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
@@ -1485,7 +1491,7 @@ body.sidebar-refactoring
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
- margin-top: -0.25rem;
+ margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@@ -1653,7 +1659,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
- color: #303030;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
@@ -1694,7 +1699,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
- color: #303030;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring