Add latest changes from gitlab-org/gitlab@master

4 files changed, 144 insertions, 0 deletions

diff --git a/app/assets/javascripts/token_access/components/opt_in_jwt.vue b/app/assets/javascripts/token_access/components/opt_in_jwt.vue
new file mode 100644
index 00000000000..2daab124b4d
--- /dev/null
+++ b/app/assets/javascripts/token_access/components/opt_in_jwt.vue
@@ -0,0 +1,125 @@
+<script>
+import { GlLoadingIcon, GlSprintf, GlToggle } from '@gitlab/ui';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import { createAlert } from '~/flash';
+import { __, s__ } from '~/locale';
+import updateOptInJwtMutation from '../graphql/mutations/update_opt_in_jwt.mutation.graphql';
+import getOptInJwtSettingQuery from '../graphql/queries/get_opt_in_jwt_setting.query.graphql';
+
+const LIMIT_JWT_ACCESS_SNIPPET = `job_name:
+  id_tokens:
+    ID_TOKEN_1: # or any other name
+      aud: "..." # sub-keyword to configure the token's audience
+  secrets:
+    TEST_SECRET:
+      vault: db/prod
+`;
+
+export default {
+  i18n: {
+    labelText: s__('CICD|Limit JSON Web Token (JWT) access'),
+    helpText: s__(
+      `CICD|The JWT must be manually declared in each job that needs it. When disabled, the token is always available in all jobs in the pipeline.`,
+    ),
+    expandedText: s__(
+      'CICD|Use the %{codeStart}secrets%{codeEnd} keyword to configure a job with a JWT.',
+    ),
+    copyToClipboard: __('Copy to clipboard'),
+    fetchError: s__('CICD|There was a problem fetching the token access settings.'),
+    updateError: s__('CICD|An error occurred while update the setting. Please try again.'),
+  },
+  components: {
+    CodeInstruction,
+    GlLoadingIcon,
+    GlSprintf,
+    GlToggle,
+  },
+  inject: ['fullPath'],
+  apollo: {
+    optInJwt: {
+      query: getOptInJwtSettingQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update({
+        project: {
+          ciCdSettings: { optInJwt },
+        },
+      }) {
+        return optInJwt;
+      },
+      error() {
+        createAlert({ message: this.$options.i18n.fetchError });
+      },
+    },
+  },
+  data() {
+    return {
+      optInJwt: null,
+    };
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.optInJwt.loading;
+    },
+  },
+  methods: {
+    async updateOptInJwt() {
+      try {
+        const {
+          data: {
+            ciCdSettingsUpdate: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: updateOptInJwtMutation,
+          variables: {
+            input: {
+              fullPath: this.fullPath,
+              optInJwt: this.optInJwt,
+            },
+          },
+        });
+
+        if (errors.length) {
+          throw new Error(errors[0]);
+        }
+      } catch (error) {
+        createAlert({ message: this.$options.i18n.updateError });
+      }
+    },
+  },
+  LIMIT_JWT_ACCESS_SNIPPET,
+};
+</script>
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-5" />
+    <template v-else>
+      <gl-toggle
+        v-model="optInJwt"
+        class="gl-mt-5"
+        :label="$options.i18n.labelText"
+        @change="updateOptInJwt"
+      >
+        <template #help>
+          {{ $options.i18n.helpText }}
+        </template>
+      </gl-toggle>
+      <div v-if="optInJwt" class="gl-mt-5" data-testid="opt-in-jwt-expanded-section">
+        <gl-sprintf :message="$options.i18n.expandedText">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+        <code-instruction
+          class="gl-mt-3"
+          :instruction="$options.LIMIT_JWT_ACCESS_SNIPPET"
+          :copy-text="$options.i18n.copyToClipboard"
+          multiline
+        />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/token_access/components/token_access.vue b/app/assets/javascripts/token_access/components/token_access.vue
index fe99f3e1fdd..527f01f0a6f 100644
--- a/app/assets/javascripts/token_access/components/token_access.vue
+++ b/app/assets/javascripts/token_access/components/token_access.vue
@@ -17,6 +17,7 @@ import removeProjectCIJobTokenScopeMutation from '../graphql/mutations/remove_pr
 import updateCIJobTokenScopeMutation from '../graphql/mutations/update_ci_job_token_scope.mutation.graphql';
 import getCIJobTokenScopeQuery from '../graphql/queries/get_ci_job_token_scope.query.graphql';
 import getProjectsWithCIJobTokenScopeQuery from '../graphql/queries/get_projects_with_ci_job_token_scope.query.graphql';
+import OptInJwt from './opt_in_jwt.vue';
 import TokenProjectsTable from './token_projects_table.vue';
 
 export default {
@@ -44,6 +45,7 @@ export default {
     GlLoadingIcon,
     GlSprintf,
     GlToggle,
+    OptInJwt,
     TokenProjectsTable,
   },
   inject: {
@@ -230,6 +232,7 @@ export default {
         </gl-alert>
         <token-projects-table :projects="projects" @removeProject="removeProject" />
       </div>
+      <opt-in-jwt />
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/token_access/graphql/mutations/update_opt_in_jwt.mutation.graphql b/app/assets/javascripts/token_access/graphql/mutations/update_opt_in_jwt.mutation.graphql
new file mode 100644
index 00000000000..c12b5646423
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/mutations/update_opt_in_jwt.mutation.graphql
@@ -0,0 +1,8 @@
+mutation updateOptInJwt($input: CiCdSettingsUpdateInput!) {
+  ciCdSettingsUpdate(input: $input) {
+    ciCdSettings {
+      optInJwt
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/token_access/graphql/queries/get_opt_in_jwt_setting.query.graphql b/app/assets/javascripts/token_access/graphql/queries/get_opt_in_jwt_setting.query.graphql
new file mode 100644
index 00000000000..a1a216b7dc3
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/queries/get_opt_in_jwt_setting.query.graphql
@@ -0,0 +1,8 @@
+query getOptInJwtSetting($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    ciCdSettings {
+      optInJwt
+    }
+  }
+}