Merge branch...

Merge branch '214476-enable-graphql-and-vue-apollo-in-the-cleanup-policy-for-tags-form' into 'master'

Boilerplate for graphql in container cleanup settings

See merge request gitlab-org/gitlab!43122

app/assets/javascripts/registry/settings/graphql/fragments/container_expiration_policy.fragment.graphql

+fragment ContainerExpirationPolicyFields on ContainerExpirationPolicy {
+  cadence
+  enabled
+  keepN
+  nameRegex
+  nameRegexKeep
+  olderThan
+}

app/assets/javascripts/registry/settings/graphql/index.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+
+Vue.use(VueApollo);
+
+export const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(
+    {},
+    {
+      assumeImmutableResults: true,
+    },
+  ),
+});

app/assets/javascripts/registry/settings/graphql/mutations/update_container_expiration_policy.graphql

+#import "../fragments/container_expiration_policy.fragment.graphql"
+
+mutation updateContainerExpirationPolicy($input: UpdateContainerExpirationPolicyInput!) {
+  updateContainerExpirationPolicy(input: $input) {
+    containerExpirationPolicy {
+      ...ContainerExpirationPolicyFields
+    }
+    errors
+  }
+}

app/assets/javascripts/registry/settings/graphql/queries/get_expiration_policy.graphql

+#import "../fragments/container_expiration_policy.fragment.graphql"
+
+query getProjectExpirationPolicy($projectPath: ID!) {
+  project(fullPath: $projectPath) {
+    containerExpirationPolicy {
+      ...ContainerExpirationPolicyFields
+    }
+  }
+}

app/assets/javascripts/registry/settings/graphql/utils/cache_update.js

+import { produce } from 'immer';
+import expirationPolicyQuery from '../queries/get_expiration_policy.graphql';
+
+export const updateContainerExpirationPolicy = projectPath => (client, { data: updatedData }) => {
+  const queryAndParams = {
+    query: expirationPolicyQuery,
+    variables: { projectPath },
+  };
+  const sourceData = client.readQuery(queryAndParams);
+
+  const data = produce(sourceData, draftState => {
+    // eslint-disable-next-line no-param-reassign
+    draftState.project.containerExpirationPolicy = {
+      ...updatedData.updateContainerExpirationPolicy.containerExpirationPolicy,
+    };
+  });
+
+  client.writeQuery({
+    ...queryAndParams,
+    data,
+  });
+};

app/assets/javascripts/registry/settings/registry_settings_bundle.js

@@ -3,6 +3,7 @@ import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
 import store from './store';
 import RegistrySettingsApp from './components/registry_settings_app.vue';
+import { apolloProvider } from './graphql/index';
 
 Vue.use(GlToast);
 Vue.use(Translate);
@@ -13,12 +14,20 @@ export default () => {
     return null;
   }
   store.dispatch('setInitialState', el.dataset);
+  const { projectPath, isAdmin, adminSettingsPath, enableHistoricEntries } = el.dataset;
   return new Vue({
     el,
     store,
+    apolloProvider,
     components: {
       RegistrySettingsApp,
     },
+    provide: {
+      projectPath,
+      isAdmin,
+      adminSettingsPath,
+      enableHistoricEntries,
+    },
     render(createElement) {
       return createElement('registry-settings-app', {});
     },

app/assets/javascripts/registry/shared/constants.js

@@ -43,3 +43,27 @@ export const NAME_REGEX_KEEP_PLACEHOLDER = '';
 export const NAME_REGEX_KEEP_DESCRIPTION = s__(
   'ContainerRegistry|Wildcards such as %{codeStart}.*-master%{codeEnd} or %{codeStart}release-.*%{codeEnd} are supported',
 );
+
+export const KEEP_N_OPTIONS = [
+  { variable: 1, key: 'ONE_TAG', default: false },
+  { variable: 5, key: 'FIVE_TAGS', default: false },
+  { variable: 10, key: 'TEN_TAGS', default: true },
+  { variable: 25, key: 'TWENTY_FIVE_TAGS', default: false },
+  { variable: 50, key: 'FIFTY_TAGS', default: false },
+  { variable: 100, key: 'ONE_HUNDRED_TAGS', default: false },
+];
+
+export const CADENCE_OPTIONS = [
+  { key: 'EVERY_DAY', label: __('Every day'), default: true },
+  { key: 'EVERY_WEEK', label: __('Every week'), default: false },
+  { key: 'EVERY_TWO_WEEKS', label: __('Every two weeks'), default: false },
+  { key: 'EVERY_MONTH', label: __('Every month'), default: false },
+  { key: 'EVERY_THREE_MONTHS', label: __('Every three months'), default: false },
+];
+
+export const OLDER_THAN_OPTIONS = [
+  { key: 'SEVEN_DAYS', variable: 7, default: false },
+  { key: 'FOURTEEN_DAYS', variable: 14, default: false },
+  { key: 'THIRTY_DAYS', variable: 30, default: false },
+  { key: 'NINETY_DAYS', variable: 90, default: true },
+];

app/assets/javascripts/registry/shared/utils.js

+import { n__ } from '~/locale';
+import { KEEP_N_OPTIONS, CADENCE_OPTIONS, OLDER_THAN_OPTIONS } from './constants';
+
 export const findDefaultOption = options => {
   const item = options.find(o => o.default);
   return item ? item.key : null;
@@ -17,3 +20,21 @@ export const mapComputedToEvent = (list, root) => {
   });
   return result;
 };
+
+export const optionLabelGenerator = (collection, singularSentence, pluralSentence) =>
+  collection.map(option => ({
+    ...option,
+    label: n__(singularSentence, pluralSentence, option.variable),
+  }));
+
+export const formOptionsGenerator = () => {
+  return {
+    olderThan: optionLabelGenerator(
+      OLDER_THAN_OPTIONS,
+      '%d days until tags are automatically removed',
+      '%d day until tags are automatically removed',
+    ),
+    cadence: CADENCE_OPTIONS,
+    keepN: optionLabelGenerator(KEEP_N_OPTIONS, '%d tag per image name', '%d tags per image name'),
+  };
+};

app/views/projects/registry/settings/_index.haml

 #js-registry-settings{ data: { project_id: @project.id,
+    project_path: @project.full_path,
     cadence_options: cadence_options.to_json,
     keep_n_options: keep_n_options.to_json,
     older_than_options: older_than_options.to_json,

spec/frontend/registry/settings/graphql/cache_updated_spec.js

+import { updateContainerExpirationPolicy } from '~/registry/settings/graphql/utils/cache_update';
+import expirationPolicyQuery from '~/registry/settings/graphql/queries/get_expiration_policy.graphql';
+
+describe('Registry settings cache update', () => {
+  let client;
+
+  const payload = {
+    data: {
+      updateContainerExpirationPolicy: {
+        containerExpirationPolicy: {
+          enabled: true,
+        },
+      },
+    },
+  };
+
+  const cacheMock = {
+    project: {
+      containerExpirationPolicy: {
+        enabled: false,
+      },
+    },
+  };
+
+  const queryAndVariables = {
+    query: expirationPolicyQuery,
+    variables: { projectPath: 'foo' },
+  };
+
+  beforeEach(() => {
+    client = {
+      readQuery: jest.fn().mockReturnValue(cacheMock),
+      writeQuery: jest.fn(),
+    };
+  });
+  describe('Registry settings cache update', () => {
+    it('calls readQuery', () => {
+      updateContainerExpirationPolicy('foo')(client, payload);
+      expect(client.readQuery).toHaveBeenCalledWith(queryAndVariables);
+    });
+
+    it('writes the correct result in the cache', () => {
+      updateContainerExpirationPolicy('foo')(client, payload);
+      expect(client.writeQuery).toHaveBeenCalledWith({
+        ...queryAndVariables,
+        data: {
+          project: {
+            containerExpirationPolicy: {
+              enabled: true,
+            },
+          },
+        },
+      });
+    });
+  });
+});

spec/frontend/registry/shared/__snapshots__/utils_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Utils formOptionsGenerator returns an object containing cadence 1`] = `
+Array [
+  Object {
+    "default": true,
+    "key": "EVERY_DAY",
+    "label": "Every day",
+  },
+  Object {
+    "default": false,
+    "key": "EVERY_WEEK",
+    "label": "Every week",
+  },
+  Object {
+    "default": false,
+    "key": "EVERY_TWO_WEEKS",
+    "label": "Every two weeks",
+  },
+  Object {
+    "default": false,
+    "key": "EVERY_MONTH",
+    "label": "Every month",
+  },
+  Object {
+    "default": false,
+    "key": "EVERY_THREE_MONTHS",
+    "label": "Every three months",
+  },
+]
+`;
+
+exports[`Utils formOptionsGenerator returns an object containing keepN 1`] = `
+Array [
+  Object {
+    "default": false,
+    "key": "ONE_TAG",
+    "label": "1 tag per image name",
+    "variable": 1,
+  },
+  Object {
+    "default": false,
+    "key": "FIVE_TAGS",
+    "label": "5 tags per image name",
+    "variable": 5,
+  },
+  Object {
+    "default": true,
+    "key": "TEN_TAGS",
+    "label": "10 tags per image name",
+    "variable": 10,
+  },
+  Object {
+    "default": false,
+    "key": "TWENTY_FIVE_TAGS",
+    "label": "25 tags per image name",
+    "variable": 25,
+  },
+  Object {
+    "default": false,
+    "key": "FIFTY_TAGS",
+    "label": "50 tags per image name",
+    "variable": 50,
+  },
+  Object {
+    "default": false,
+    "key": "ONE_HUNDRED_TAGS",
+    "label": "100 tags per image name",
+    "variable": 100,
+  },
+]
+`;
+
+exports[`Utils formOptionsGenerator returns an object containing olderThan 1`] = `
+Array [
+  Object {
+    "default": false,
+    "key": "SEVEN_DAYS",
+    "label": "7 day until tags are automatically removed",
+    "variable": 7,
+  },
+  Object {
+    "default": false,
+    "key": "FOURTEEN_DAYS",
+    "label": "14 day until tags are automatically removed",
+    "variable": 14,
+  },
+  Object {
+    "default": false,
+    "key": "THIRTY_DAYS",
+    "label": "30 day until tags are automatically removed",
+    "variable": 30,
+  },
+  Object {
+    "default": true,
+    "key": "NINETY_DAYS",
+    "label": "90 day until tags are automatically removed",
+    "variable": 90,
+  },
+]
+`;

spec/frontend/registry/shared/utils_spec.js

+import { formOptionsGenerator, optionLabelGenerator } from '~/registry/shared/utils';
+
+describe('Utils', () => {
+  describe('optionLabelGenerator', () => {
+    it('returns an array with a set label', () => {
+      const result = optionLabelGenerator([{ variable: 1 }, { variable: 2 }], '%d day', '%d days');
+      expect(result).toEqual([{ variable: 1, label: '1 day' }, { variable: 2, label: '2 days' }]);
+    });
+  });
+
+  describe('formOptionsGenerator', () => {
+    it('returns an object containing olderThan', () => {
+      expect(formOptionsGenerator().olderThan).toBeDefined();
+      expect(formOptionsGenerator().olderThan).toMatchSnapshot();
+    });
+
+    it('returns an object containing cadence', () => {
+      expect(formOptionsGenerator().cadence).toBeDefined();
+      expect(formOptionsGenerator().cadence).toMatchSnapshot();
+    });
+
+    it('returns an object containing keepN', () => {
+      expect(formOptionsGenerator().keepN).toBeDefined();
+      expect(formOptionsGenerator().keepN).toMatchSnapshot();
+    });
+  });
+});