summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
blob: ec3be43196cf244f1777c8638cc6befc253f084e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<script>
import { GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
import DuplicatesSettings from '~/packages_and_registries/settings/group/components/duplicates_settings.vue';
import GenericSettings from '~/packages_and_registries/settings/group/components/generic_settings.vue';
import MavenSettings from '~/packages_and_registries/settings/group/components/maven_settings.vue';
import {
  PACKAGE_SETTINGS_HEADER,
  PACKAGE_SETTINGS_DESCRIPTION,
  PACKAGES_DOCS_PATH,
  ERROR_UPDATING_SETTINGS,
  SUCCESS_UPDATING_SETTINGS,
} from '~/packages_and_registries/settings/group/constants';
import updateNamespacePackageSettings from '~/packages_and_registries/settings/group/graphql/mutations/update_group_packages_settings.mutation.graphql';
import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.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 '~/vue_shared/components/settings/settings_block.vue';

export default {
  name: 'GroupSettingsApp',
  i18n: {
    PACKAGE_SETTINGS_HEADER,
    PACKAGE_SETTINGS_DESCRIPTION,
  },
  links: {
    PACKAGES_DOCS_PATH,
  },
  components: {
    GlAlert,
    GlSprintf,
    GlLink,
    SettingsBlock,
    MavenSettings,
    GenericSettings,
    DuplicatesSettings,
  },
  inject: ['defaultExpanded', 'groupPath'],
  apollo: {
    packageSettings: {
      query: getGroupPackagesSettingsQuery,
      variables() {
        return {
          fullPath: this.groupPath,
        };
      },
      update(data) {
        return data.group?.packageSettings;
      },
    },
  },
  data() {
    return {
      packageSettings: {},
      errors: {},
      alertMessage: null,
    };
  },
  computed: {
    isLoading() {
      return this.$apollo.queries.packageSettings.loading;
    },
  },
  methods: {
    dismissAlert() {
      this.alertMessage = null;
    },
    updateSettings(payload) {
      this.errors = {};
      return this.$apollo
        .mutate({
          mutation: updateNamespacePackageSettings,
          variables: {
            input: {
              namespacePath: this.groupPath,
              ...payload,
            },
          },
          update: updateGroupPackageSettings(this.groupPath),
          optimisticResponse: updateGroupPackagesSettingsOptimisticResponse({
            ...this.packageSettings,
            ...payload,
          }),
        })
        .then(({ data }) => {
          if (data.updateNamespacePackageSettings?.errors?.length > 0) {
            this.alertMessage = ERROR_UPDATING_SETTINGS;
          } else {
            this.dismissAlert();
            this.$toast.show(SUCCESS_UPDATING_SETTINGS);
          }
        })
        .catch((e) => {
          if (e.graphQLErrors) {
            e.graphQLErrors.forEach((error) => {
              const [
                {
                  path: [key],
                  message,
                },
              ] = error.extensions.problems;
              this.errors = { ...this.errors, [key]: message };
            });
          }
          this.alertMessage = ERROR_UPDATING_SETTINGS;
        });
    },
  },
};
</script>

<template>
  <div>
    <gl-alert v-if="alertMessage" variant="warning" class="gl-mt-4" @dismiss="dismissAlert">
      {{ alertMessage }}
    </gl-alert>

    <settings-block
      :default-expanded="defaultExpanded"
      data-qa-selector="package_registry_settings_content"
    >
      <template #title> {{ $options.i18n.PACKAGE_SETTINGS_HEADER }}</template>
      <template #description>
        <span data-testid="description">
          <gl-sprintf :message="$options.i18n.PACKAGE_SETTINGS_DESCRIPTION">
            <template #link="{ content }">
              <gl-link :href="$options.links.PACKAGES_DOCS_PATH" target="_blank">{{
                content
              }}</gl-link>
            </template>
          </gl-sprintf>
        </span>
      </template>
      <template #default>
        <maven-settings data-testid="maven-settings">
          <template #default="{ modelNames }">
            <duplicates-settings
              :duplicates-allowed="packageSettings.mavenDuplicatesAllowed"
              :duplicate-exception-regex="packageSettings.mavenDuplicateExceptionRegex"
              :duplicate-exception-regex-error="errors.mavenDuplicateExceptionRegex"
              :model-names="modelNames"
              :loading="isLoading"
              toggle-qa-selector="allow_duplicates_toggle"
              label-qa-selector="allow_duplicates_label"
              @update="updateSettings"
            />
          </template>
        </maven-settings>
        <generic-settings class="gl-mt-6" data-testid="generic-settings">
          <template #default="{ modelNames }">
            <duplicates-settings
              :duplicates-allowed="packageSettings.genericDuplicatesAllowed"
              :duplicate-exception-regex="packageSettings.genericDuplicateExceptionRegex"
              :duplicate-exception-regex-error="errors.genericDuplicateExceptionRegex"
              :model-names="modelNames"
              :loading="isLoading"
              @update="updateSettings"
            />
          </template>
        </generic-settings>
      </template>
    </settings-block>
  </div>
</template>