summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
blob: 59ddf4b19d8f462b30d86088e9049443cfb8d984 (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
<script>
import createFlash from '~/flash';
import getAdminVariables from '../graphql/queries/variables.query.graphql';
import {
  ADD_MUTATION_ACTION,
  DELETE_MUTATION_ACTION,
  UPDATE_MUTATION_ACTION,
  genericMutationErrorText,
  variableFetchErrorText,
} from '../constants';
import addAdminVariable from '../graphql/mutations/admin_add_variable.mutation.graphql';
import deleteAdminVariable from '../graphql/mutations/admin_delete_variable.mutation.graphql';
import updateAdminVariable from '../graphql/mutations/admin_update_variable.mutation.graphql';
import CiVariableSettings from './ci_variable_settings.vue';

export default {
  components: {
    CiVariableSettings,
  },
  inject: ['endpoint'],
  data() {
    return {
      adminVariables: [],
      isInitialLoading: true,
    };
  },
  apollo: {
    adminVariables: {
      query: getAdminVariables,
      update(data) {
        return data?.ciVariables?.nodes || [];
      },
      error() {
        createFlash({ message: variableFetchErrorText });
      },
      watchLoading(flag) {
        if (!flag) {
          this.isInitialLoading = false;
        }
      },
    },
  },
  computed: {
    isLoading() {
      return this.$apollo.queries.adminVariables.loading && this.isInitialLoading;
    },
  },
  methods: {
    addVariable(variable) {
      this.variableMutation(ADD_MUTATION_ACTION, variable);
    },
    deleteVariable(variable) {
      this.variableMutation(DELETE_MUTATION_ACTION, variable);
    },
    updateVariable(variable) {
      this.variableMutation(UPDATE_MUTATION_ACTION, variable);
    },
    async variableMutation(mutationAction, variable) {
      try {
        const currentMutation = this.$options.mutationData[mutationAction];
        const { data } = await this.$apollo.mutate({
          mutation: currentMutation.action,
          variables: {
            endpoint: this.endpoint,
            variable,
          },
        });

        const { errors } = data[currentMutation.name];

        if (errors.length > 0) {
          createFlash({ message: errors[0] });
        } else {
          // The writing to cache for admin variable is not working
          // because there is no ID in the cache at the top level.
          // We therefore need to manually refetch.
          this.$apollo.queries.adminVariables.refetch();
        }
      } catch {
        createFlash({ message: genericMutationErrorText });
      }
    },
  },
  mutationData: {
    [ADD_MUTATION_ACTION]: { action: addAdminVariable, name: 'addAdminVariable' },
    [UPDATE_MUTATION_ACTION]: { action: updateAdminVariable, name: 'updateAdminVariable' },
    [DELETE_MUTATION_ACTION]: { action: deleteAdminVariable, name: 'deleteAdminVariable' },
  },
};
</script>

<template>
  <ci-variable-settings
    :are-scoped-variables-available="false"
    :is-loading="isLoading"
    :variables="adminVariables"
    @add-variable="addVariable"
    @delete-variable="deleteVariable"
    @update-variable="updateVariable"
  />
</template>