diff --git a/app/assets/javascripts/content_editor/components/wrappers/image.vue b/app/assets/javascripts/content_editor/components/wrappers/image.vue index a8d3ba4af1f..1d8e7cef8dc 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/image.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/image.vue @@ -25,10 +25,17 @@ export default { required: false, default: false, }, + updateAttributes: { + type: Function, + required: true, + default: () => {}, + }, }, data() { return { dragData: {}, + width: this.node.attrs.width, + height: this.node.attrs.height, }; }, computed: { @@ -51,8 +58,8 @@ export default { handle, startX: event.screenX, startY: event.screenY, - width: this.$refs.image.width, - height: this.$refs.image.height, + width: Number(this.width) || this.$refs.image.width, + height: Number(this.height) || this.$refs.image.height, }; }, onDrag(event) { @@ -63,8 +70,8 @@ export default { const newWidth = handle.includes('w') ? width - deltaX : width + deltaX; const newHeight = (height / width) * newWidth; - this.$refs.image.setAttribute('width', newWidth); - this.$refs.image.setAttribute('height', newHeight); + this.width = Math.max(newWidth, 0); + this.height = Math.max(newHeight, 0); }, onDragEnd() { const { handle } = this.dragData; @@ -72,15 +79,12 @@ export default { this.dragData = {}; - this.editor - .chain() - .focus() - .updateAttributes(this.node.type.name, { - width: this.$refs.image.width, - height: this.$refs.image.height, - }) - .setNodeSelection(this.getPos()) - .run(); + const { width, height } = this.$refs.image; + + this.width = width; + this.height = height; + + this.updateAttributes({ width, height }); }, }, resizeHandles: ['ne', 'nw', 'se', 'sw'], @@ -108,8 +112,8 @@ export default { :src="node.attrs.src" :alt="node.attrs.alt" :title="node.attrs.title" - :width="node.attrs.width || 'auto'" - :height="node.attrs.height || 'auto'" + :width="width || 'auto'" + :height="height || 'auto'" :class="{ 'ProseMirror-selectednode': selected }" /> diff --git a/app/assets/javascripts/lib/utils/chart_utils.js b/app/assets/javascripts/lib/utils/chart_utils.js index 520d7f627f6..7da3bab0a4b 100644 --- a/app/assets/javascripts/lib/utils/chart_utils.js +++ b/app/assets/javascripts/lib/utils/chart_utils.js @@ -1,6 +1,3 @@ -import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; -import { __ } from '~/locale'; - const commonTooltips = () => ({ mode: 'x', intersect: false, @@ -101,38 +98,3 @@ export const firstAndLastY = (data) => { return [firstY, lastY]; }; - -const toolboxIconSvgPath = async (name) => { - return `path://${await getSvgIconPathContent(name)}`; -}; - -export const getToolboxOptions = async () => { - const promises = ['marquee-selection', 'redo', 'repeat', 'download'].map(toolboxIconSvgPath); - - try { - const [marqueeSelectionPath, redoPath, repeatPath, downloadPath] = await Promise.all(promises); - - return { - toolbox: { - feature: { - dataZoom: { - icon: { zoom: marqueeSelectionPath, back: redoPath }, - }, - restore: { - icon: repeatPath, - }, - saveAsImage: { - icon: downloadPath, - }, - }, - }, - }; - } catch (e) { - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line no-console - console.warn(__('SVG could not be rendered correctly: '), e); - } - - return {}; - } -}; diff --git a/app/assets/javascripts/lib/utils/icon_utils.js b/app/assets/javascripts/lib/utils/icon_utils.js deleted file mode 100644 index 58274092cf8..00000000000 --- a/app/assets/javascripts/lib/utils/icon_utils.js +++ /dev/null @@ -1,42 +0,0 @@ -import { memoize } from 'lodash'; -import axios from '~/lib/utils/axios_utils'; - -/** - * Resolves to a DOM that contains GitLab icons - * in svg format. Memoized to avoid duplicate requests - */ -const getSvgDom = memoize(() => - axios - .get(gon.sprite_icons) - .then(({ data: svgs }) => new DOMParser().parseFromString(svgs, 'text/xml')) - .catch((e) => { - getSvgDom.cache.clear(); - - throw e; - }), -); - -/** - * Clears the memoized SVG content. - * - * You probably don't need to invoke this function unless - * sprite_icons are updated. - */ -export const clearSvgIconPathContentCache = () => { - getSvgDom.cache.clear(); -}; - -/** - * Retrieve SVG icon path content from gitlab/svg sprite icons. - * - * Content loaded is cached. - * - * @param {String} name - Icon name - * @returns A promise that resolves to the svg path - */ -export const getSvgIconPathContent = (name) => - getSvgDom() - .then((doc) => { - return doc.querySelector(`#${name} path`).getAttribute('d'); - }) - .catch(() => null); diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue index 8a3c5e68c3d..6d57b584fd6 100644 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue +++ b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue @@ -1,7 +1,7 @@ diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/packages_forwarding_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/packages_forwarding_settings.vue index 22528ddb026..5936f9557a1 100644 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/packages_forwarding_settings.vue +++ b/app/assets/javascripts/packages_and_registries/settings/group/components/packages_forwarding_settings.vue @@ -15,7 +15,7 @@ import updateNamespacePackageSettings from '~/packages_and_registries/settings/g import { updateGroupPackageSettings } from '~/packages_and_registries/settings/group/graphql/utils/cache_update'; import { updateGroupPackagesSettingsOptimisticResponse } from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'; -import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue'; +import SettingsSection from '~/vue_shared/components/settings/settings_section.vue'; import ForwardingSettings from '~/packages_and_registries/settings/group/components/forwarding_settings.vue'; export default { @@ -31,7 +31,7 @@ export default { GlButton, GlLink, GlSprintf, - SettingsBlock, + SettingsSection, }, mixins: [glFeatureFlagsMixin()], inject: ['groupPath'], @@ -165,8 +165,7 @@ export default { - - + +
+ + + {{ $options.i18n.PACKAGE_FORWARDING_FORM_BUTTON }} + + + diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue index 96df1ce8826..9abe7039d6d 100644 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue +++ b/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue @@ -14,7 +14,7 @@ import { import updateNamespacePackageSettings from '~/packages_and_registries/settings/group/graphql/mutations/update_group_packages_settings.mutation.graphql'; import { updateGroupPackageSettings } from '~/packages_and_registries/settings/group/graphql/utils/cache_update'; import { updateGroupPackagesSettingsOptimisticResponse } from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'; -import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue'; +import SettingsSection from '~/vue_shared/components/settings/settings_section.vue'; import ExceptionsInput from '~/packages_and_registries/settings/group/components/exceptions_input.vue'; export default { @@ -43,7 +43,7 @@ export default { }, ], components: { - SettingsBlock, + SettingsSection, GlTableLite, GlToggle, ExceptionsInput, @@ -166,48 +166,44 @@ export default { diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue index 1dd88d69d30..030637be529 100644 --- a/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue +++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue @@ -13,11 +13,11 @@ import { UNAVAILABLE_ADMIN_FEATURE_TEXT, } from '~/packages_and_registries/settings/project/constants'; import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql'; -import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue'; +import SettingsSection from '~/vue_shared/components/settings/settings_section.vue'; export default { components: { - SettingsBlock, + SettingsSection, GlAlert, GlSprintf, GlLink, @@ -85,8 +85,10 @@ export default {