diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-15 12:10:30 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-15 12:10:30 +0300 |
commit | cd5f4619db234c00d0c01ed63bb92df6c10b0fd3 (patch) | |
tree | 09ef12a2231c616d4f747b9d5b83597ae179bb06 /app/assets | |
parent | 024f77efd68833bb78540ff9b4c7b4ec4b9dfe39 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
8 files changed, 109 insertions, 71 deletions
diff --git a/app/assets/javascripts/admin/abuse_report/components/report_actions.vue b/app/assets/javascripts/admin/abuse_report/components/report_actions.vue index 57d5d46ceb4..92478e10289 100644 --- a/app/assets/javascripts/admin/abuse_report/components/report_actions.vue +++ b/app/assets/javascripts/admin/abuse_report/components/report_actions.vue @@ -95,10 +95,12 @@ export default { return; } - axios - .put(this.report.updatePath, this.form) - .then(this.handleResponse) - .catch(this.handleError); + // TODO: In 16.4 use moderateUserPath without falling back to using updatePath + // See https://gitlab.com/gitlab-org/modelops/anti-abuse/team-tasks/-/issues/167?work_item_iid=443 + const { moderateUserPath, updatePath } = this.report; + const path = moderateUserPath || updatePath; + + axios.put(path, this.form).then(this.handleResponse).catch(this.handleError); }, handleResponse({ data }) { this.toggleActionsDrawer(); diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue index 4860215d8f2..ec17bbea48f 100644 --- a/app/assets/javascripts/deploy_keys/components/app.vue +++ b/app/assets/javascripts/deploy_keys/components/app.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui'; import { createAlert } from '~/alert'; import { s__ } from '~/locale'; import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; @@ -14,8 +14,9 @@ export default { ConfirmModal, KeysPanel, NavigationTabs, - GlLoadingIcon, + GlButton, GlIcon, + GlLoadingIcon, }, props: { endpoint: { @@ -42,6 +43,10 @@ export default { available_project_keys: s__('DeployKeys|Privately accessible deploy keys'), public_keys: s__('DeployKeys|Publicly accessible deploy keys'), }, + i18n: { + loading: s__('DeployKeys|Loading deploy keys'), + addButton: s__('DeployKeys|Add new key'), + }, computed: { tabs() { return Object.keys(this.$options.scopes).map((scope) => { @@ -132,23 +137,41 @@ export default { </script> <template> - <div class="gl-mb-3 deploy-keys"> + <div class="deploy-keys"> <confirm-modal :visible="confirmModalVisible" @remove="removeKey" @cancel="cancel" /> <gl-loading-icon v-if="isLoading && !hasKeys" - :label="s__('DeployKeys|Loading deploy keys')" - size="lg" + :label="$options.i18n.loading" + size="sm" + class="gl-m-5" /> <template v-else-if="hasKeys"> - <div class="top-area scrolling-tabs-container inner-page-scroll-tabs"> - <div class="fade-left"> - <gl-icon name="chevron-lg-left" :size="12" /> - </div> - <div class="fade-right"> - <gl-icon name="chevron-lg-right" :size="12" /> + <div class="gl-new-card-header gl-align-items-center gl-pt-0 gl-pb-0 gl-pl-0"> + <div class="top-area scrolling-tabs-container inner-page-scroll-tabs gl-border-b-0"> + <div class="fade-left"> + <gl-icon name="chevron-lg-left" :size="12" /> + </div> + <div class="fade-right"> + <gl-icon name="chevron-lg-right" :size="12" /> + </div> + + <navigation-tabs + :tabs="tabs" + scope="deployKeys" + class="gl-rounded-lg" + @onChangeTab="onChangeTab" + /> </div> - <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" /> + <div class="gl-new-card-actions"> + <gl-button + size="small" + class="js-toggle-button js-toggle-content" + data-testid="add-new-deploy-key-button" + > + {{ $options.i18n.addButton }} + </gl-button> + </div> </div> <keys-panel :project-id="projectId" diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue index 79c45553659..16c745d8cff 100644 --- a/app/assets/javascripts/deploy_keys/components/key.vue +++ b/app/assets/javascripts/deploy_keys/components/key.vue @@ -1,6 +1,6 @@ <!-- eslint-disable vue/multi-word-component-names --> <script> -import { GlIcon, GlLink, GlTooltipDirective, GlButton } from '@gitlab/ui'; +import { GlBadge, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { head, tail } from 'lodash'; import { s__, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -10,9 +10,9 @@ import ActionBtn from './action_btn.vue'; export default { components: { ActionBtn, + GlBadge, GlButton, GlIcon, - GlLink, }, directives: { GlTooltip: GlTooltipDirective, @@ -111,12 +111,21 @@ export default { </script> <template> - <div class="gl-responsive-table-row deploy-key"> + <div + class="gl-responsive-table-row gl-align-items-flex-start deploy-key gl-bg-gray-10 gl-md-pl-5 gl-md-pr-5 gl-border-gray-100!" + > <div class="table-section section-40"> - <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div> + <div + role="rowheader" + class="table-mobile-header gl-align-self-start gl-font-weight-bold gl-text-gray-700" + > + {{ s__('DeployKeys|Deploy key') }} + </div> <div class="table-mobile-content" data-testid="key-container"> - <strong class="title" data-testid="key-title-content"> {{ deployKey.title }} </strong> - <dl> + <p class="title gl-font-weight-semibold gl-text-gray-700" data-testid="key-title-content"> + {{ deployKey.title }} + </p> + <dl class="gl-font-sm gl-mb-0"> <dt>{{ __('SHA256') }}</dt> <dd class="fingerprint" data-testid="key-sha256-fingerprint-content"> {{ deployKey.fingerprint_sha256 }} @@ -133,53 +142,62 @@ export default { </div> </div> <div class="table-section section-20 section-wrap"> - <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div> - <div class="table-mobile-content deploy-project-list"> + <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700"> + {{ s__('DeployKeys|Project usage') }} + </div> + <div class="table-mobile-content deploy-project-list gl-display-flex gl-flex-wrap"> <template v-if="projects.length > 0"> - <gl-link + <gl-badge v-gl-tooltip :title="projectTooltipTitle(firstProject)" - class="label deploy-project-label" + :icon="firstProject.can_push ? 'lock-open' : 'lock'" + class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate" > - <span> {{ firstProject.project.full_name }} </span> - <gl-icon :name="firstProject.can_push ? 'lock-open' : 'lock'" /> - </gl-link> - <gl-link + <span class="gl-text-truncate">{{ firstProject.project.full_name }}</span> + </gl-badge> + + <gl-badge v-if="isExpandable" v-gl-tooltip :title="restProjectsTooltip" - class="label deploy-project-label" - @click="toggleExpanded" + class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate" + href="#" + @click.native="toggleExpanded" > - <span>{{ restProjectsLabel }}</span> - </gl-link> - <gl-link + <span class="gl-text-truncate">{{ restProjectsLabel }}</span> + </gl-badge> + + <gl-badge v-for="deployKeysProject in restProjects" v-else-if="isExpanded" :key="deployKeysProject.project.full_path" v-gl-tooltip :href="deployKeysProject.project.full_path" :title="projectTooltipTitle(deployKeysProject)" - class="label deploy-project-label" + :icon="deployKeysProject.can_push ? 'lock-open' : 'lock'" + class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate" > - <span> {{ deployKeysProject.project.full_name }} </span> - <gl-icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" /> - </gl-link> + <span class="gl-text-truncate">{{ deployKeysProject.project.full_name }}</span> + </gl-badge> </template> - <span v-else class="text-secondary">{{ __('None') }}</span> + <span v-else class="gl-text-secondary">{{ __('None') }}</span> </div> </div> <div class="table-section section-15"> - <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div> - <div class="table-mobile-content text-secondary key-created-at"> + <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700"> + {{ __('Created') }} + </div> + <div class="table-mobile-content gl-text-gray-700 key-created-at"> <span v-gl-tooltip :title="tooltipTitle(deployKey.created_at)"> <gl-icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span> </span> </div> </div> <div class="table-section section-15"> - <div role="rowheader" class="table-mobile-header">{{ __('Expires') }}</div> - <div class="table-mobile-content text-secondary key-expires-at"> + <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700"> + {{ __('Expires') }} + </div> + <div class="table-mobile-content gl-text-gray-700 key-expires-at"> <span v-if="deployKey.expires_at" v-gl-tooltip @@ -214,7 +232,7 @@ export default { :deploy-key="deployKey" :title="__('Remove')" :aria-label="__('Remove')" - category="primary" + category="secondary" variant="danger" icon="remove" type="remove" @@ -229,7 +247,7 @@ export default { type="disable" data-container="body" icon="cancel" - category="primary" + category="secondary" variant="danger" /> </div> diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue index e04cbbe72b9..dac63188aa5 100644 --- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue +++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue @@ -28,9 +28,12 @@ export default { </script> <template> - <div class="deploy-keys-panel table-holder"> + <div class="deploy-keys-panel table-holder gl-bg-white gl-rounded-lg"> <template v-if="keys.length > 0"> - <div role="row" class="gl-responsive-table-row table-row-header"> + <div + role="row" + class="gl-responsive-table-row table-row-header gl-font-base gl-font-weight-bold gl-text-gray-900 gl-md-pl-5 gl-md-pr-5 gl-bg-gray-10 gl-border-gray-100!" + > <div role="rowheader" class="table-section section-40"> {{ s__('DeployKeys|Deploy key') }} </div> @@ -50,8 +53,8 @@ export default { :project-id="projectId" /> </template> - <div v-else class="settings-message text-center gl-mt-5"> - {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }} + <div v-else class="gl-new-card-empty gl-bg-gray-10 gl-text-center gl-p-5"> + {{ s__('DeployKeys|No deploy keys found, start by adding a new one above.') }} </div> </div> </template> diff --git a/app/assets/javascripts/nav/components/new_nav_toggle.vue b/app/assets/javascripts/nav/components/new_nav_toggle.vue index 82302ec4602..4e5d6b0ce6c 100644 --- a/app/assets/javascripts/nav/components/new_nav_toggle.vue +++ b/app/assets/javascripts/nav/components/new_nav_toggle.vue @@ -68,10 +68,15 @@ export default { <gl-disclosure-dropdown-item v-if="newNavigation" @action="toggleNav"> <div class="gl-new-dropdown-item-content"> <div - class="gl-new-dropdown-item-text-wrapper gl-display-flex! gl-justify-content-space-between gl-align-items-center gl-py-2!" + class="gl-new-dropdown-item-text-wrapper gl-display-flex! gl-justify-content-space-between gl-align-items-center gl-py-2! gl-gap-3" > {{ $options.i18n.toggleMenuItemLabel }} - <gl-toggle :value="isEnabled" :label="$options.i18n.toggleLabel" label-position="hidden" /> + <gl-toggle + class="gl-flex-grow-0!" + :value="isEnabled" + :label="$options.i18n.toggleLabel" + label-position="hidden" + /> </div> </div> </gl-disclosure-dropdown-item> @@ -84,11 +89,12 @@ export default { </div> <div - class="menu-item gl-cursor-pointer gl-display-flex! gl-justify-content-space-between gl-align-items-center" + class="menu-item gl-cursor-pointer gl-display-flex! gl-justify-content-space-between gl-align-items-center gl-gap-3" @click.prevent.stop="toggleNav" > {{ $options.i18n.toggleMenuItemLabel }} <gl-toggle + class="gl-flex-grow-0!" :value="isEnabled" :label="$options.i18n.toggleLabel" label-position="hidden" diff --git a/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue b/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue index 0679d31a8b8..9dbed2c2579 100644 --- a/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue +++ b/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue @@ -1,6 +1,5 @@ <script> import { GlEmptyState, GlLink } from '@gitlab/ui'; -import { helpPagePath } from '~/helpers/help_page_helper'; import { noIssuesSignedOutButtonText, infoBannerTitle, @@ -17,7 +16,6 @@ export default { infoBannerAdminNote, learnMore, }, - serviceDeskHelpPagePath: helpPagePath('user/project/service_desk/index'), components: { GlEmptyState, GlLink, @@ -29,6 +27,7 @@ export default { 'canAdminIssues', 'isServiceDeskEnabled', 'serviceDeskEmailAddress', + 'serviceDeskHelpPath', ], computed: { canSeeEmailAddress() { @@ -50,7 +49,7 @@ export default { {{ $options.i18n.infoBannerAdminNote }} <br /><code>{{ serviceDeskEmailAddress }}</code> </p> <p>{{ $options.i18n.infoBannerUserNote }}</p> - <gl-link :href="$options.serviceDeskHelpPagePath" target="_blank"> + <gl-link :href="serviceDeskHelpPath"> {{ $options.i18n.learnMore }} </gl-link> </template> @@ -67,7 +66,7 @@ export default { > <template #description> <p>{{ $options.i18n.infoBannerUserNote }}</p> - <gl-link :href="$options.serviceDeskHelpPagePath"> + <gl-link :href="serviceDeskHelpPath"> {{ $options.i18n.learnMore }} </gl-link> </template> diff --git a/app/assets/javascripts/service_desk/components/info_banner.vue b/app/assets/javascripts/service_desk/components/info_banner.vue index 8aaced839a5..5667ee2f31d 100644 --- a/app/assets/javascripts/service_desk/components/info_banner.vue +++ b/app/assets/javascripts/service_desk/components/info_banner.vue @@ -51,7 +51,7 @@ export default { </p> <p> {{ $options.i18n.infoBannerUserNote }} - <gl-link :href="serviceDeskHelpPath" target="_blank">{{ $options.i18n.learnMore }}</gl-link + <gl-link :href="serviceDeskHelpPath">{{ $options.i18n.learnMore }}</gl-link >. </p> <p v-if="canEnableServiceDesk" class="gl-mt-3"> diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 71936f37333..b9cae28537d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -65,7 +65,6 @@ white-space: normal; } - .deploy-project-label, .key-created-at { svg { vertical-align: text-top; @@ -83,18 +82,6 @@ .deploy-project-list { margin-bottom: -$gl-padding-4; - - a.deploy-project-label { - margin-right: $gl-padding-4; - margin-bottom: $gl-padding-4; - color: $gl-text-color-secondary; - background-color: $gray-50; - line-height: $gl-btn-line-height; - - &:hover { - color: $blue-600; - } - } } .vs-public { |