Add feature flag for CI variables drawer

What does this MR do and why?

For #410414 (closed)

The drawer will replace the modal form for creating, editing, and deleting CI Variables.

This MR is purely for the rendering the drawer under the feature flag. Interactions with the UI (such as validations and submitting the form) will be implemented in future iterations.

The MR is broken down into different commits for: 1) showing the drawer under a feature flag; 2) scaffolding the component with UI elements. The feature flag will be rolled out on a user actor basis because the CI variables setting exists on the instance-level, group-level, and project-level. The drawer/modal component is shared in all three contexts.

No changelog entry yet since this will be developed under the ci_variable_drawer feature flag.

Implementation

Iteration	MR
Setup drawer with feature flag	👈 You are here!
Add form validations	⏳
Ensure that all mutations are working and update QA specs	⏳
Rollout	#418005 (closed)

Screenshots or screen recordings

Before	After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Enable the ci_variable_drawer feature flag.
2. Go to Settings > CI/CD > Variables.
3. Click on the Add variable button or edit a variable.
4. The drawer should show up instead of the modal.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue

+<script>
+import {
+  GlButton,
+  GlDrawer,
+  GlFormCheckbox,
+  GlFormCombobox,
+  GlFormGroup,
+  GlFormSelect,
+  GlFormTextarea,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
+import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import {
+  defaultVariableState,
+  ENVIRONMENT_SCOPE_LINK_TITLE,
+  EXPANDED_VARIABLES_NOTE,
+  FLAG_LINK_TITLE,
+  VARIABLE_ACTIONS,
+  variableOptions,
+} from '../constants';
+import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
+import { awsTokenList } from './ci_variable_autocomplete_tokens';
+
+const i18n = {
+  addVariable: s__('CiVariables|Add Variable'),
+  cancel: __('Cancel'),
+  environments: __('Environments'),
+  environmentScopeLinkTitle: ENVIRONMENT_SCOPE_LINK_TITLE,
+  expandedField: s__('CiVariables|Expand variable reference'),
+  expandedDescription: EXPANDED_VARIABLES_NOTE,
+  flags: __('Flags'),
+  flagsLinkTitle: FLAG_LINK_TITLE,
+  key: __('Key'),
+  maskedField: s__('CiVariables|Mask variable'),
+  maskedDescription: s__(
+    'CiVariables|Variable will be masked in job logs. Requires values to meet regular expression requirements.',
+  ),
+  protectedField: s__('CiVariables|Protect variable'),
+  protectedDescription: s__(
+    'CiVariables|Export variable to pipelines running on protected branches and tags only.',
+  ),
+  type: __('Type'),
+  value: __('Value'),
+};
+
+export default {
+  DRAWER_Z_INDEX,
+  components: {
+    CiEnvironmentsDropdown,
+    GlButton,
+    GlDrawer,
+    GlFormCheckbox,
+    GlFormCombobox,
+    GlFormGroup,
+    GlFormSelect,
+    GlFormTextarea,
+    GlIcon,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['environmentScopeLink'],
+  props: {
+    areEnvironmentsLoading: {
+      type: Boolean,
+      required: true,
+    },
+    environments: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    hasEnvScopeQuery: {
+      type: Boolean,
+      required: true,
+    },
+    mode: {
+      type: String,
+      required: true,
+      validator(val) {
+        return VARIABLE_ACTIONS.includes(val);
+      },
+    },
+  },
+  data() {
+    return {
+      key: defaultVariableState.key,
+      variableType: defaultVariableState.variableType,
+    };
+  },
+  computed: {
+    getDrawerHeaderHeight() {
+      return getContentWrapperHeight();
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('close-form');
+    },
+  },
+  awsTokenList,
+  flagLink: helpPagePath('ci/variables/index', {
+    anchor: 'define-a-cicd-variable-in-the-ui',
+  }),
+  i18n,
+  variableOptions,
+};
+</script>
+<template>
+  <gl-drawer
+    open
+    data-testid="ci-variable-drawer"
+    :header-height="getDrawerHeaderHeight"
+    :z-index="$options.DRAWER_Z_INDEX"
+    @close="close"
+  >
+    <template #title>
+      <h2 class="gl-m-0">{{ $options.i18n.addVariable }}</h2>
+    </template>
+    <gl-form-group
+      :label="$options.i18n.type"
+      label-for="ci-variable-type"
+      class="gl-border-none gl-mb-n5"
+    >
+      <gl-form-select
+        id="ci-variable-type"
+        v-model="variableType"
+        :options="$options.variableOptions"
+      />
+    </gl-form-group>
+    <gl-form-group
+      class="gl-border-none gl-mb-n5"
+      label-for="ci-variable-env"
+      data-testid="environment-scope"
+    >
+      <template #label>
+        <div class="gl-display-flex gl-align-items-center">
+          <span class="gl-mr-2">
+            {{ $options.i18n.environments }}
+          </span>
+          <gl-link
+            class="gl-display-flex"
+            :title="$options.i18n.environmentScopeLinkTitle"
+            :href="environmentScopeLink"
+            target="_blank"
+            data-testid="environment-scope-link"
+          >
+            <gl-icon name="question-o" :size="14" />
+          </gl-link>
+        </div>
+      </template>
+      <ci-environments-dropdown
+        class="gl-mb-5"
+        :are-environments-loading="areEnvironmentsLoading"
+        :environments="environments"
+        :has-env-scope-query="hasEnvScopeQuery"
+        selected-environment-scope=""
+      />
+    </gl-form-group>
+    <gl-form-group class="gl-border-none gl-mb-n8">
+      <template #label>
+        <div class="gl-display-flex gl-align-items-center gl-mb-n3">
+          <span class="gl-mr-2">
+            {{ $options.i18n.flags }}
+          </span>
+          <gl-link
+            class="gl-display-flex"
+            :title="$options.i18n.flagsLinkTitle"
+            :href="$options.flagLink"
+            target="_blank"
+          >
+            <gl-icon name="question-o" :size="14" />
+          </gl-link>
+        </div>
+      </template>
+      <gl-form-checkbox data-testid="ci-variable-protected-checkbox">
+        {{ $options.i18n.protectedField }}
+        <p class="gl-text-secondary">
+          {{ $options.i18n.protectedDescription }}
+        </p>
+      </gl-form-checkbox>
+      <gl-form-checkbox data-testid="ci-variable-masked-checkbox">
+        {{ $options.i18n.maskedField }}
+        <p class="gl-text-secondary">{{ $options.i18n.maskedDescription }}</p>
+      </gl-form-checkbox>
+      <gl-form-checkbox data-testid="ci-variable-expanded-checkbox">
+        {{ $options.i18n.expandedField }}
+        <p class="gl-text-secondary">
+          <gl-sprintf :message="$options.i18n.expandedDescription" class="gl-text-secondary">
+            <template #code="{ content }">
+              <code>{{ content }}</code>
+            </template>
+          </gl-sprintf>
+        </p>
+      </gl-form-checkbox>
+    </gl-form-group>
+    <gl-form-combobox
+      v-model="key"
+      :token-list="$options.awsTokenList"
+      :label-text="$options.i18n.key"
+      class="gl-border-none gl-pb-0! gl-mb-n5"
+      data-testid="pipeline-form-ci-variable-key"
+      data-qa-selector="ci_variable_key_field"
+    />
+    <gl-form-group
+      :label="$options.i18n.value"
+      label-for="ci-variable-value"
+      class="gl-border-none gl-mb-n2"
+    >
+      <gl-form-textarea
+        id="ci-variable-value"
+        class="gl-border-none gl-font-monospace!"
+        rows="3"
+        max-rows="10"
+        data-testid="pipeline-form-ci-variable-value"
+        data-qa-selector="ci_variable_value_field"
+        spellcheck="false"
+      />
+    </gl-form-group>
+    <div class="gl-display-flex gl-justify-content-end">
+      <gl-button category="primary" class="gl-mr-3" data-testid="cancel-button" @click="close"
+        >{{ $options.i18n.cancel }}
+      </gl-button>
+      <gl-button category="primary" variant="confirm" data-testid="confirm-button"
+        >{{ $options.i18n.addVariable }}
+      </gl-button>
+    </div>
+  </gl-drawer>
+</template>