diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-17 06:08:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-17 06:08:51 +0300 |
commit | bb6a3bf05eca11bede23c89a4b2a80a946707307 (patch) | |
tree | 18086fbc00d3c13112c4e64dcfe0ef5462fd1fd3 /app | |
parent | f52c68bbac191605f793686c472425b000a0879a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app')
11 files changed, 129 insertions, 66 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_observability.js b/app/assets/javascripts/behaviors/markdown/render_observability.js index 85aae6f53c4..6346fb8ab48 100644 --- a/app/assets/javascripts/behaviors/markdown/render_observability.js +++ b/app/assets/javascripts/behaviors/markdown/render_observability.js @@ -1,25 +1,19 @@ import Vue from 'vue'; -import { darkModeEnabled } from '~/lib/utils/color_utils'; -import { setUrlParams } from '~/lib/utils/url_utility'; - -export function getFrameSrc(url) { - return `${setUrlParams({ theme: darkModeEnabled() ? 'dark' : 'light' }, url)}&kiosk=inline-embed`; -} +import ObservabilityApp from '~/observability/components/observability_app.vue'; +import { SKELETON_VARIANT_EMBED, INLINE_EMBED_DIMENSIONS } from '~/observability/constants'; const mountVueComponent = (element) => { - const url = [element.dataset.frameUrl]; - + const url = element.dataset.frameUrl; return new Vue({ el: element, render(h) { - return h('iframe', { - style: { - height: '366px', - width: '768px', - }, - attrs: { - src: getFrameSrc(url), - frameBorder: '0', + return h(ObservabilityApp, { + props: { + observabilityIframeSrc: url, + inlineEmbed: true, + skeletonVariant: SKELETON_VARIANT_EMBED, + height: INLINE_EMBED_DIMENSIONS.HEIGHT, + width: INLINE_EMBED_DIMENSIONS.WIDTH, }, }); }, @@ -27,7 +21,5 @@ const mountVueComponent = (element) => { }; export default function renderObservability(elements) { - elements.forEach((element) => { - mountVueComponent(element); - }); + return elements.map(mountVueComponent); } diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue index ded54d60d1d..c4b9bdb150b 100644 --- a/app/assets/javascripts/issuable/components/related_issuable_item.vue +++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue @@ -102,10 +102,10 @@ export default { 'issuable-info-container': !canReorder, 'card-body': canReorder, }" - class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-px-3 gl-py-2 py-xl-0 gl-mx-n2" + class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-mx-n2" > <div - class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 flex-xl-nowrap gl-min-h-7" + class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 gl-px-3 gl-py-2 py-xl-0 flex-xl-nowrap gl-min-h-7" > <!-- Title area: Status icon (XL) and title --> <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0"> diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue index 92d1a2ffc22..c3f87699d58 100644 --- a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue +++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue @@ -96,8 +96,12 @@ export default { label="Fetching related merge requests" class="gl-py-4" /> - <ul v-else class="content-list related-items-list"> - <li v-for="mr in mergeRequests" :key="mr.id" class="list-item gl-m-0! gl-px-4! gl-py-3!"> + <ul v-else class="content-list related-items-list gl-px-4! gl-py-3!"> + <li + v-for="mr in mergeRequests" + :key="mr.id" + class="list-item gl-m-0! gl-p-0! gl-border-b-0!" + > <related-issuable-item :id-key="mr.id" :display-reference="mr.reference" diff --git a/app/assets/javascripts/observability/components/observability_app.vue b/app/assets/javascripts/observability/components/observability_app.vue index ff9cf6ff6c5..36cbe715149 100644 --- a/app/assets/javascripts/observability/components/observability_app.vue +++ b/app/assets/javascripts/observability/components/observability_app.vue @@ -2,7 +2,7 @@ import { darkModeEnabled } from '~/lib/utils/color_utils'; import { setUrlParams } from '~/lib/utils/url_utility'; -import { MESSAGE_EVENT_TYPE, SKELETON_VARIANTS_BY_ROUTE } from '../constants'; +import { MESSAGE_EVENT_TYPE, FULL_APP_DIMENSIONS } from '../constants'; import ObservabilitySkeleton from './skeleton/index.vue'; export default { @@ -14,25 +14,33 @@ export default { type: String, required: true, }, + inlineEmbed: { + type: Boolean, + required: false, + default: false, + }, + skeletonVariant: { + type: String, + required: false, + default: 'dashboards', + }, + height: { + type: String, + required: false, + default: FULL_APP_DIMENSIONS.HEIGHT, + }, + width: { + type: String, + required: false, + default: FULL_APP_DIMENSIONS.WIDTH, + }, }, computed: { iframeSrcWithParams() { - return setUrlParams( + return `${setUrlParams( { theme: darkModeEnabled() ? 'dark' : 'light', username: gon?.current_username }, this.observabilityIframeSrc, - ); - }, - getSkeletonVariant() { - const [, variant] = - Object.entries(SKELETON_VARIANTS_BY_ROUTE).find(([path]) => - this.$route.path.endsWith(path), - ) || []; - - const DEFAULT_SKELETON = 'dashboards'; - - if (!variant) return DEFAULT_SKELETON; - - return variant; + )}${this.inlineEmbed ? '&kiosk=inline-embed' : ''}`; }, }, mounted() { @@ -54,38 +62,24 @@ export default { this.$refs.observabilitySkeleton.onContentLoaded(); break; case MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE: - this.routeUpdateHandler(payload); + this.$emit('route-update', payload); break; default: break; } }, - routeUpdateHandler(payload) { - const isNewObservabilityPath = this.$route?.query?.observability_path !== payload?.url; - - const shouldNotHandleMessage = !payload.url || !isNewObservabilityPath; - - if (shouldNotHandleMessage) { - return; - } - - // this will update the `observability_path` query param on each route change inside Observability UI - this.$router.replace({ - name: this.$route.pathname, - query: { ...this.$route.query, observability_path: payload.url }, - }); - }, }, }; </script> <template> - <observability-skeleton ref="observabilitySkeleton" :variant="getSkeletonVariant"> + <observability-skeleton ref="observabilitySkeleton" :variant="skeletonVariant"> <iframe id="observability-ui-iframe" data-testid="observability-ui-iframe" frameborder="0" - height="100%" + :width="width" + :height="height" :src="iframeSrcWithParams" sandbox="allow-same-origin allow-forms allow-scripts" ></iframe> diff --git a/app/assets/javascripts/observability/components/skeleton/embed.vue b/app/assets/javascripts/observability/components/skeleton/embed.vue new file mode 100644 index 00000000000..7abaf2b1bc7 --- /dev/null +++ b/app/assets/javascripts/observability/components/skeleton/embed.vue @@ -0,0 +1,15 @@ +<script> +import { GlSkeletonLoader } from '@gitlab/ui'; + +export default { + components: { + GlSkeletonLoader, + }, +}; +</script> +<template> + <gl-skeleton-loader> + <rect y="5" width="400" height="30" rx="2" ry="2" /> + <rect y="50" width="400" height="80" rx="2" ry="2" /> + </gl-skeleton-loader> +</template> diff --git a/app/assets/javascripts/observability/components/skeleton/index.vue b/app/assets/javascripts/observability/components/skeleton/index.vue index c8f196a43f4..d91f2874943 100644 --- a/app/assets/javascripts/observability/components/skeleton/index.vue +++ b/app/assets/javascripts/observability/components/skeleton/index.vue @@ -8,10 +8,12 @@ import { OBSERVABILITY_ROUTES, TIMEOUT_ERROR_LABEL, TIMEOUT_ERROR_MESSAGE, + SKELETON_VARIANT_EMBED, } from '../../constants'; import DashboardsSkeleton from './dashboards.vue'; import ExploreSkeleton from './explore.vue'; import ManageSkeleton from './manage.vue'; +import EmbedSkeleton from './embed.vue'; export default { components: { @@ -19,11 +21,13 @@ export default { DashboardsSkeleton, ExploreSkeleton, ManageSkeleton, + EmbedSkeleton, GlAlert, }, SKELETON_VARIANTS_BY_ROUTE, SKELETON_STATE, OBSERVABILITY_ROUTES, + SKELETON_VARIANT_EMBED, i18n: { TIMEOUT_ERROR_LABEL, TIMEOUT_ERROR_MESSAGE, @@ -102,6 +106,7 @@ export default { <dashboards-skeleton v-if="isSkeletonShown($options.OBSERVABILITY_ROUTES.DASHBOARDS)" /> <explore-skeleton v-else-if="isSkeletonShown($options.OBSERVABILITY_ROUTES.EXPLORE)" /> <manage-skeleton v-else-if="isSkeletonShown($options.OBSERVABILITY_ROUTES.MANAGE)" /> + <embed-skeleton v-else-if="variant === $options.SKELETON_VARIANT_EMBED" /> <gl-skeleton-loader v-else> <rect y="2" width="10" height="8" /> @@ -122,12 +127,14 @@ export default { {{ $options.i18n.TIMEOUT_ERROR_MESSAGE }} </gl-alert> - <div - v-show="state === $options.SKELETON_STATE.HIDDEN" - data-testid="observability-wrapper" - class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch" - > - <slot></slot> - </div> + <transition> + <div + v-show="state === $options.SKELETON_STATE.HIDDEN" + data-testid="observability-wrapper" + class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch" + > + <slot></slot> + </div> + </transition> </div> </template> diff --git a/app/assets/javascripts/observability/constants.js b/app/assets/javascripts/observability/constants.js index e4827dd169f..6b97c51e997 100644 --- a/app/assets/javascripts/observability/constants.js +++ b/app/assets/javascripts/observability/constants.js @@ -17,6 +17,8 @@ export const SKELETON_VARIANTS_BY_ROUTE = Object.freeze({ [OBSERVABILITY_ROUTES.MANAGE]: 'manage', }); +export const SKELETON_VARIANT_EMBED = 'embed'; + export const SKELETON_STATE = Object.freeze({ ERROR: 'error', VISIBLE: 'visible', @@ -30,3 +32,13 @@ export const DEFAULT_TIMERS = Object.freeze({ export const TIMEOUT_ERROR_LABEL = __('Unable to load the page'); export const TIMEOUT_ERROR_MESSAGE = __('Reload the page to try again.'); + +export const INLINE_EMBED_DIMENSIONS = Object.freeze({ + HEIGHT: '366px', + WIDTH: '768px', +}); + +export const FULL_APP_DIMENSIONS = Object.freeze({ + HEIGHT: '100%', + WIDTH: '100%', +}); diff --git a/app/assets/javascripts/observability/index.js b/app/assets/javascripts/observability/index.js index cd342ebee3e..72ff1357551 100644 --- a/app/assets/javascripts/observability/index.js +++ b/app/assets/javascripts/observability/index.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import ObservabilityApp from './components/observability_app.vue'; +import { SKELETON_VARIANTS_BY_ROUTE } from './constants'; Vue.use(VueRouter); @@ -17,10 +18,41 @@ export default () => { return new Vue({ el, router, + computed: { + skeletonVariant() { + const [, variant] = + Object.entries(SKELETON_VARIANTS_BY_ROUTE).find(([path]) => + this.$route.path.endsWith(path), + ) || []; + + return variant; + }, + }, + methods: { + routeUpdateHandler(payload) { + const isNewObservabilityPath = this.$route?.query?.observability_path !== payload?.url; + + const shouldNotHandleMessage = !payload.url || !isNewObservabilityPath; + + if (shouldNotHandleMessage) { + return; + } + + // this will update the `observability_path` query param on each route change inside Observability UI + this.$router.replace({ + name: this.$route?.pathname, + query: { ...this.$route.query, observability_path: payload.url }, + }); + }, + }, render(h) { return h(ObservabilityApp, { props: { observabilityIframeSrc: el.dataset.observabilityIframeSrc, + skeletonVariant: this.skeletonVariant, + }, + on: { + 'route-update': (payload) => this.routeUpdateHandler(payload), }, }); }, diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 6cb7dcca27d..0b30b4c3ef0 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -159,6 +159,11 @@ $item-remove-button-space: 42px; .mr-ci-status { line-height: 0; + + a:focus { + @include gl-rounded-full; + @include gl-focus; + } } @include media-breakpoint-down(xs) { diff --git a/app/graphql/types/projects/namespace_project_sort_enum.rb b/app/graphql/types/projects/namespace_project_sort_enum.rb index 7c7b54226d3..14a315781ef 100644 --- a/app/graphql/types/projects/namespace_project_sort_enum.rb +++ b/app/graphql/types/projects/namespace_project_sort_enum.rb @@ -7,8 +7,9 @@ module Types description 'Values for sorting projects' value 'SIMILARITY', 'Most similar to the search query.', value: :similarity - value 'STORAGE', 'Sort by storage size.', value: :storage - value 'ACTIVITY_DESC', 'Sort by latest activity, in descending order.', value: :latest_activity_desc + value 'ACTIVITY_DESC', 'Sort by latest activity, descending order.', value: :latest_activity_desc end end end + +Types::Projects::NamespaceProjectSortEnum.prepend_mod diff --git a/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml b/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml index 1afb59328c9..8c45809261c 100644 --- a/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml +++ b/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml @@ -13,4 +13,5 @@ help_text: '%{help_text} %{learn_more_link}'.html_safe % { help_text: help_text, learn_more_link: learn_more_link }, checkbox_options: { checked: group.auto_devops_enabled? } - = f.submit _('Save changes'), class: 'gl-mt-5', pajamas_button: true + = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { class: 'gl-mt-5' }) do + = _('Save changes') |