diff options
Diffstat (limited to 'app/assets')
17 files changed, 116 insertions, 62 deletions
diff --git a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue index acfe14051aa..080955b4322 100644 --- a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue +++ b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue @@ -111,7 +111,9 @@ export default { </span> </div> </div> - <div class="gl-display-flex gl-sm-flex-direction-column gl-justify-content-space-between"> + <div + class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-justify-content-space-between" + > <span class="gl-display-flex gl-flex-basis-two-thirds gl-font-sm">{{ resource.description }}</span> diff --git a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue index 8f4d566e7e6..204eaf20664 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue @@ -80,7 +80,7 @@ export default { <template> <div - class="gl-display-flex gl-p-3 gl-gap-3 gl-border-solid gl-border-gray-100 gl-border-1 gl-sm-flex-direction-column" + class="gl-display-flex gl-p-3 gl-gap-3 gl-border-solid gl-border-gray-100 gl-border-1 gl-flex-direction-column gl-md-flex-direction-row" > <slot></slot> <gl-button diff --git a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue index 41e5199e204..09ba6292e13 100644 --- a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue @@ -168,7 +168,7 @@ export default { @toggle-file-tree="toggleFileTree" v-on="$listeners" /> - <div class="gl-display-flex gl-w-full gl-sm-flex-direction-column"> + <div class="gl-display-flex gl-w-full gl-flex-direction-column gl-md-flex-direction-row"> <pipeline-editor-file-tree v-if="showFileTree" class="gl-flex-shrink-0" diff --git a/app/assets/javascripts/organizations/mock_data.js b/app/assets/javascripts/organizations/mock_data.js index 6b6a9e711d3..725b6ac1ad8 100644 --- a/app/assets/javascripts/organizations/mock_data.js +++ b/app/assets/javascripts/organizations/mock_data.js @@ -281,12 +281,25 @@ export const organizationGroups = { ], }; -export const createOrganizationResponse = { - organization: { - name: 'Default', - path: '/-/organizations/default', +export const organizationCreateResponse = { + data: { + organizationCreate: { + organization: { + id: 'gid://gitlab/Organizations::Organization/1', + webUrl: 'http://127.0.0.1:3000/-/organizations/default', + }, + errors: [], + }, + }, +}; + +export const organizationCreateResponseWithErrors = { + data: { + organizationCreate: { + organization: null, + errors: ['Path is too short (minimum is 2 characters)'], + }, }, - errors: [], }; export const updateOrganizationResponse = { diff --git a/app/assets/javascripts/organizations/new/components/app.vue b/app/assets/javascripts/organizations/new/components/app.vue index 8f71fdfe68b..f7f7b79d52b 100644 --- a/app/assets/javascripts/organizations/new/components/app.vue +++ b/app/assets/javascripts/organizations/new/components/app.vue @@ -4,12 +4,13 @@ import { s__ } from '~/locale'; import { visitUrlWithAlerts } from '~/lib/utils/url_utility'; import { createAlert } from '~/alert'; import { helpPagePath } from '~/helpers/help_page_helper'; -import createOrganizationMutation from '../graphql/mutations/create_organization.mutation.graphql'; +import FormErrorsAlert from '~/vue_shared/components/form/errors_alert.vue'; +import organizationCreateMutation from '../graphql/mutations/organization_create.mutation.graphql'; import NewEditForm from '../../shared/components/new_edit_form.vue'; export default { name: 'OrganizationNewApp', - components: { NewEditForm, GlSprintf, GlLink }, + components: { NewEditForm, GlSprintf, GlLink, FormErrorsAlert }, i18n: { pageTitle: s__('Organization|New organization'), pageDescription: s__( @@ -22,6 +23,7 @@ export default { data() { return { loading: false, + errors: [], }; }, computed: { @@ -35,21 +37,22 @@ export default { try { const { data: { - createOrganization: { organization, errors }, + organizationCreate: { organization, errors }, }, } = await this.$apollo.mutate({ - mutation: createOrganizationMutation, + mutation: organizationCreateMutation, variables: { - ...formValues, + input: { name: formValues.name, path: formValues.path }, }, }); if (errors.length) { - // TODO: handle errors when using real API after https://gitlab.com/gitlab-org/gitlab/-/issues/417891 is complete. + this.errors = errors; + return; } - visitUrlWithAlerts(organization.path, [ + visitUrlWithAlerts(organization.webUrl, [ { id: 'organization-successfully-created', title: this.$options.i18n.successAlertTitle, @@ -69,6 +72,7 @@ export default { <template> <div class="gl-py-6"> + <form-errors-alert v-model="errors" /> <h1 class="gl-mt-0 gl-font-size-h-display">{{ $options.i18n.pageTitle }}</h1> <p> <gl-sprintf :message="$options.i18n.pageDescription"> diff --git a/app/assets/javascripts/organizations/new/graphql/mutations/create_organization.mutation.graphql b/app/assets/javascripts/organizations/new/graphql/mutations/create_organization.mutation.graphql deleted file mode 100644 index 766c7e96d14..00000000000 --- a/app/assets/javascripts/organizations/new/graphql/mutations/create_organization.mutation.graphql +++ /dev/null @@ -1,9 +0,0 @@ -mutation createOrganization($input: LocalCreateOrganizationInput!) { - createOrganization(input: $input) @client { - organization { - name - path - } - errors - } -} diff --git a/app/assets/javascripts/organizations/new/graphql/mutations/organization_create.mutation.graphql b/app/assets/javascripts/organizations/new/graphql/mutations/organization_create.mutation.graphql new file mode 100644 index 00000000000..81fbfddd1e4 --- /dev/null +++ b/app/assets/javascripts/organizations/new/graphql/mutations/organization_create.mutation.graphql @@ -0,0 +1,9 @@ +mutation organizationCreate($input: OrganizationCreateInput!) { + organizationCreate(input: $input) { + organization { + id + webUrl + } + errors + } +} diff --git a/app/assets/javascripts/organizations/new/graphql/typedefs.graphql b/app/assets/javascripts/organizations/new/graphql/typedefs.graphql deleted file mode 100644 index f708c4ad162..00000000000 --- a/app/assets/javascripts/organizations/new/graphql/typedefs.graphql +++ /dev/null @@ -1,5 +0,0 @@ -# TODO: Use real input type when https://gitlab.com/gitlab-org/gitlab/-/issues/417891 is complete. -input LocalCreateOrganizationInput { - name: String - path: String -} diff --git a/app/assets/javascripts/organizations/new/index.js b/app/assets/javascripts/organizations/new/index.js index a65603227f6..9c7e5344800 100644 --- a/app/assets/javascripts/organizations/new/index.js +++ b/app/assets/javascripts/organizations/new/index.js @@ -3,7 +3,6 @@ import VueApollo from 'vue-apollo'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import createDefaultClient from '~/lib/graphql'; -import resolvers from '../shared/graphql/resolvers'; import App from './components/app.vue'; export const initOrganizationsNew = () => { @@ -17,7 +16,7 @@ export const initOrganizationsNew = () => { const { organizationsPath, rootUrl } = convertObjectPropsToCamelCase(JSON.parse(appData)); const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(resolvers), + defaultClient: createDefaultClient(), }); return new Vue({ diff --git a/app/assets/javascripts/organizations/shared/components/new_edit_form.vue b/app/assets/javascripts/organizations/shared/components/new_edit_form.vue index 388dd704a70..8aaa680036f 100644 --- a/app/assets/javascripts/organizations/shared/components/new_edit_form.vue +++ b/app/assets/javascripts/organizations/shared/components/new_edit_form.vue @@ -103,7 +103,13 @@ export default { }, [FORM_FIELD_PATH]: { label: s__('Organization|Organization URL'), - validators: [formValidators.required(s__('Organization|Organization URL is required.'))], + validators: [ + formValidators.required(s__('Organization|Organization URL is required.')), + formValidators.factory( + s__('Organization|Organization URL must be a minimum of two characters.'), + (val) => val.length >= 2, + ), + ], groupAttrs: { class: 'gl-w-full', }, diff --git a/app/assets/javascripts/organizations/shared/graphql/resolvers.js b/app/assets/javascripts/organizations/shared/graphql/resolvers.js index 00c07e1b1e9..9ed1be62352 100644 --- a/app/assets/javascripts/organizations/shared/graphql/resolvers.js +++ b/app/assets/javascripts/organizations/shared/graphql/resolvers.js @@ -2,7 +2,6 @@ import { organizations, organizationProjects, organizationGroups, - createOrganizationResponse, updateOrganizationResponse, } from '../../mock_data'; @@ -35,12 +34,6 @@ export default { }, }, Mutation: { - createOrganization: async () => { - // Simulate API loading - await simulateLoading(); - - return createOrganizationResponse; - }, updateOrganization: async () => { // Simulate API loading await simulateLoading(); diff --git a/app/assets/javascripts/token_access/components/inbound_token_access.vue b/app/assets/javascripts/token_access/components/inbound_token_access.vue index 7e55f56279e..345db1752f6 100644 --- a/app/assets/javascripts/token_access/components/inbound_token_access.vue +++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue @@ -46,12 +46,6 @@ export default { columnClass: 'gl-w-40p', }, { - key: 'namespace', - label: __('Namespace'), - thClass: 'gl-border-t-none!', - columnClass: 'gl-w-40p', - }, - { key: 'actions', label: '', tdClass: 'gl-text-right', diff --git a/app/assets/javascripts/token_access/components/outbound_token_access.vue b/app/assets/javascripts/token_access/components/outbound_token_access.vue index 43aa9b94b3a..846b0d1791f 100644 --- a/app/assets/javascripts/token_access/components/outbound_token_access.vue +++ b/app/assets/javascripts/token_access/components/outbound_token_access.vue @@ -54,12 +54,6 @@ export default { columnClass: 'gl-w-40p', }, { - key: 'namespace', - label: __('Namespace'), - thClass: 'gl-border-t-none!', - columnClass: 'gl-w-40p', - }, - { key: 'actions', label: '', tdClass: 'gl-text-right', diff --git a/app/assets/javascripts/token_access/components/token_projects_table.vue b/app/assets/javascripts/token_access/components/token_projects_table.vue index ee88b4ec339..4245b39dec1 100644 --- a/app/assets/javascripts/token_access/components/token_projects_table.vue +++ b/app/assets/javascripts/token_access/components/token_projects_table.vue @@ -29,9 +29,6 @@ export default { removeProject(project) { this.$emit('removeProject', project); }, - namespaceFallback(namespace) { - return namespace?.fullPath || ''; - }, }, }; </script> @@ -50,13 +47,7 @@ export default { </template> <template #cell(project)="{ item }"> - <span data-testid="token-access-project-name">{{ item.name }}</span> - </template> - - <template #cell(namespace)="{ item }"> - <span data-testid="token-access-project-namespace"> - {{ namespaceFallback(item.namespace) }} - </span> + <span data-testid="token-access-project-name">{{ item.fullPath }}</span> </template> <template #cell(actions)="{ item }"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue index 2a4bda51888..3c2d8efaffc 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue @@ -560,7 +560,7 @@ export default { <div class="mr-widget-body-controls gl-display-flex gl-align-items-center gl-flex-wrap"> <template v-if="shouldShowMergeControls"> <div - class="gl-display-flex gl-sm-flex-direction-column gl-md-align-items-center gl-flex-wrap gl-w-full" + class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center gl-flex-wrap gl-w-full" > <gl-form-checkbox v-if="canRemoveSourceBranch" diff --git a/app/assets/javascripts/vue_shared/components/form/errors_alert.stories.js b/app/assets/javascripts/vue_shared/components/form/errors_alert.stories.js new file mode 100644 index 00000000000..7c32e38a299 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/form/errors_alert.stories.js @@ -0,0 +1,21 @@ +import ErrorsAlert from './errors_alert.vue'; + +export default { + component: ErrorsAlert, + title: 'vue_shared/form/errors_alert', +}; + +const defaultProps = { + errors: ['Name must be at least 5 characters.', 'Name cannot contain special characters.'], +}; + +const Template = (args) => ({ + components: { ErrorsAlert }, + data() { + return { errors: args.errors }; + }, + template: `<errors-alert v-model="errors" />`, +}); + +export const Default = Template.bind({}); +Default.args = defaultProps; diff --git a/app/assets/javascripts/vue_shared/components/form/errors_alert.vue b/app/assets/javascripts/vue_shared/components/form/errors_alert.vue new file mode 100644 index 00000000000..3e33168781b --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/form/errors_alert.vue @@ -0,0 +1,42 @@ +<script> +import { GlAlert } from '@gitlab/ui'; +import { n__ } from '~/locale'; + +export default { + components: { GlAlert }, + model: { + prop: 'errors', + }, + props: { + errors: { + type: Array, + required: true, + }, + }, + computed: { + title() { + return n__( + 'The form contains the following error:', + 'The form contains the following errors:', + this.errors.length, + ); + }, + }, +}; +</script> + +<template> + <gl-alert + v-if="errors.length" + class="gl-mb-5" + :title="title" + variant="danger" + @dismiss="$emit('input', [])" + > + <ul class="gl-pl-5 gl-mb-0"> + <li v-for="error in errors" :key="error"> + {{ error }} + </li> + </ul> + </gl-alert> +</template> |