@gitlab/ui 87.1.1 → 87.2.0

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue

@@ -0,0 +1,87 @@
+<script>
+import GlIcon from '../../../../../base/icon/icon.vue';
+import GlCollapse from '../../../../../base/collapse/collapse.vue';
+import GlButton from '../../../../../base/button/button.vue';
+import { GlTooltipDirective as GlTooltip } from '../../../../../../directives/tooltip';
+import { translate } from '../../../../../../utils/i18n';
+
+export default {
+  name: 'GlDuoWorkflowPanel',
+  components: { GlCollapse, GlButton, GlIcon },
+  directives: { GlTooltip },
+  props: {
+    /**
+     * The icon to show in the header.
+     */
+    headerIcon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is collapsed
+     */
+    expandPanelButtonTitle: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPanel.expandButtonTitle', 'Expand'),
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is expanded
+     */
+    collapsePanelButtonTitle: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse'),
+    },
+  },
+  data() {
+    return { expanded: true };
+  },
+  computed: {
+    buttonIcon() {
+      return this.expanded ? 'chevron-up' : 'chevron-down';
+    },
+    buttonTitle() {
+      return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
+    },
+  },
+  methods: {
+    toggleExpanded() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="gl-flex gl-flex-nowrap gl-items-center">
+      <gl-icon v-if="headerIcon" :name="headerIcon" :size="24" class="gl-mr-3" />
+      <div class="gl-flex gl-flex-grow gl-items-baseline">
+        <h2 class="gl-mb-0">
+          <!-- @slot Panel title. -->
+          <slot name="title"></slot>
+        </h2>
+        <small class="gl-ml-3">
+          <!-- @slot Panel subtitle. -->
+          <slot name="subtitle"></slot
+        ></small>
+      </div>
+
+      <gl-button
+        v-gl-tooltip
+        category="tertiary"
+        :icon="buttonIcon"
+        :title="buttonTitle"
+        :aria-label="buttonTitle"
+        @click="toggleExpanded"
+      />
+    </div>
+    <gl-collapse :visible="expanded">
+      <div class="gl-ml-7 gl-mt-4 gl-flex-grow">
+        <!-- @slot Panel content. -->
+        <slot name="content"></slot>
+      </div>
+    </gl-collapse>
+  </div>
+</template>

package/src/components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.md

@@ -0,0 +1,37 @@
+This is the UI panel to capture the user's AI prompt for Duo Workflow. This
+prompt is emitted upwards so it may be sent to the Duo Workflow service.
+
+## Usage
+
+To use this component, import it and be sure to set the following props:
+
+* `prompt`: the prompt the user enters, can be provided if the prompt has been
+  cached
+* `summary`: the summary of the goal as provided by the Duo Workflow service,
+displayed adjacent to the title
+* `loading`: sets the loading state for the panel while waiting on responses
+
+Also listen to the following events:
+
+* `update:prompt`: Emitted when the prompt textarea's `input` event fires, when
+  the text within the textarea is changed
+* `update:image`: Emitted when the image input's `input` event fires, when the
+    text within the input is changed
+* `confirm`: Emitted when the confirm button is clicked
+* `cancel`: Emitted when the cancel button is clicked
+
+Translations for the title of the panel, labels, and other strings can be set via
+the props as documented or via translation configuration:
+
+```js
+setConfigs({
+  translations: {
+    'GlDuoWorkflowPrompt.header': __('Plan'),
+    'GlDuoWorkflowPrompt.promptLabel': __('Prompt'),
+    'GlDuoWorkflowPrompt.promptLabelDescription': __('What is your task?'),
+    'GlDuoWorkflowPrompt.promptDescription': __('Be specific and include references!'),
+    'GlDuoWorkflowPrompt.confirmButtonText': __('Start plan'),
+    'GlDuoWorkflowPrompt.cancelButtonText': __('Stop'),
+  },
+});
+```

package/src/components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.vue

@@ -0,0 +1,261 @@
+<script>
+import GlDuoWorkflowPanel from '../duo_workflow_panel/duo_workflow_panel.vue';
+import GlButton from '../../../../../base/button/button.vue';
+import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
+import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea.vue';
+import GlFormInput from '../../../../../base/form/form_input/form_input.vue';
+import { translate } from '../../../../../../utils/i18n';
+
+export default {
+  name: 'GlDuoWorkflowPrompt',
+  components: {
+    GlDuoWorkflowPanel,
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlFormTextarea,
+  },
+  props: {
+    /**
+     * The prompt the user has entered
+     */
+    prompt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The image to run the workflow in
+     */
+    image: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The text for the title of the panel
+     */
+    title: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.title', 'Goal'),
+    },
+    /**
+     * The summary of the ongoing workflow plan
+     */
+    summary: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Whether or not the panel is loading
+     */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * The label of the prompt text area
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    promptLabel: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.promptLabel', 'Description'),
+    },
+    /**
+     * The label description of the prompt text area
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    promptLabelDescription: {
+      type: String,
+      required: false,
+      default: translate(
+        'GlDuoWorkflowPrompt.promptLabelDescription',
+        'What would you like to do and how.'
+      ),
+    },
+    /**
+     * The description of the prompt text area
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    promptDescription: {
+      type: String,
+      required: false,
+      default: translate(
+        'GlDuoWorkflowPrompt.promptDescription',
+        'Be specific and include any requirements.'
+      ),
+    },
+
+    /**
+     * The HTML ID of the textarea for the prompt
+     */
+    promptId: {
+      type: String,
+      required: false,
+      default: 'duo-workflow-prompt',
+    },
+    /**
+     * The label of the image input
+     */
+    imageLabel: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.imageLabel', 'Image'),
+    },
+    /**
+     * The label description of the image input
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    imageLabelDescription: {
+      type: String,
+      required: false,
+      default: translate(
+        'GlDuoWorkflowPrompt.imageLabelDescription',
+        'The container image to run the workflow in.'
+      ),
+    },
+    /**
+     * The description of the image input
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    imageDescription: {
+      type: String,
+      required: false,
+      default: translate(
+        'GlDuoWorkflowPrompt.imageDescription',
+        'It should have any tools necessary for the workflow installed.'
+      ),
+    },
+    /**
+     * The ID of the image input
+     */
+    imageId: {
+      type: String,
+      required: false,
+      default: 'duo-workflow-image',
+    },
+    /**
+     * The text for the confirmation button. This button emits a `confirm` event.
+     */
+    confirmButtonText: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.confirmButtonText', 'Generate plan'),
+    },
+    /**
+     * The text for the cancellation button. This button emits a `cancel` event.
+     */
+    cancelButtonText: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.cancelButtonText', 'Cancel'),
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is collapsed
+     *
+     * See `GlDuoWorkflowPanel`
+     */
+    expandPanelButtonTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is expanded
+     *
+     * See `GlDuoWorkflowPanel`
+     */
+    collapsePanelButtonTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    emitChange(prompt) {
+      /**
+       * Notify listeners about prompt change
+       * @param {string} prompt The newly entered prompt
+       */
+      this.$emit('update:prompt', prompt);
+    },
+    emitImage(image) {
+      /**
+       * Notify listeners about image change
+       * @param {string} image The newly entered image
+       */
+      this.$emit('update:image', image);
+    },
+    clickConfirm(event) {
+      /**
+       * Notify listeners about prompt submission
+       * @param {*} event A click event
+       */
+      this.$emit('confirm', event);
+    },
+    clickCancel(event) {
+      /**
+       * Notify listeners about prompt submission cancellation.
+       * @param {*} event A click event
+       */
+      this.$emit('cancel', event);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-duo-workflow-panel
+    header-icon="issue-type-objective"
+    :expand-panel-button-title="expandPanelButtonTitle"
+    :collapse-panel-button-title="collapsePanelButtonTitle"
+  >
+    <template #title>{{ title }}</template>
+    <template #subtitle>{{ summary }}</template>
+    <template #content>
+      <gl-form-group
+        :label="promptLabel"
+        :label-for="promptId"
+        :label-description="promptLabelDescription"
+        :description="promptDescription"
+      >
+        <gl-form-textarea
+          :id="promptId"
+          :value="prompt"
+          :disable="loading"
+          :no-resize="false"
+          @input="emitChange"
+        />
+      </gl-form-group>
+      <gl-form-group
+        :label="imageLabel"
+        :label-for="imageId"
+        :label-description="imageLabelDescription"
+        :description="imageDescription"
+      >
+        <gl-form-input :id="imageId" :value="image" :disable="loading" @input="emitImage" />
+      </gl-form-group>
+      <div class="gl-flex gl-gap-3">
+        <gl-button
+          variant="confirm"
+          data-test-id="duo-workflow-prompt-confirm"
+          :loading="loading"
+          @click="clickConfirm"
+          >{{ confirmButtonText }}</gl-button
+        >
+        <gl-button data-test-id="duo-workflow-prompt-cancel" @click="clickCancel">{{
+          cancelButtonText
+        }}</gl-button>
+      </div>
+    </template>
+  </gl-duo-workflow-panel>
+</template>

package/src/index.js

@@ -5,6 +5,8 @@
 
 // Components
 // ADD COMPONENT EXPORTS - needed for yarn generate:component. Do not remove
+export { default as GlDuoWorkflowPrompt } from './components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.vue';
+export { default as GlDuoWorkflowPanel } from './components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue';
 export { default as GlTableLite } from './components/base/table_lite/table_lite.vue';
 export { default as GlDropdownForm } from './components/base/dropdown/dropdown_form.vue';
 export { default as GlKeysetPagination } from './components/base/keyset_pagination/keyset_pagination.vue';

package/src/tokens/tokens_table.vue

@@ -1,8 +1,11 @@
 <script>
 import GlBadge from '../components/base/badge/badge.vue';
+import GlButton from '../components/base/button/button.vue';
 import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox.vue';
 import GlFormInput from '../components/base/form/form_input/form_input.vue';
+import GlLink from '../components/base/link/link.vue';
 import GlTable from '../components/base/table/table.vue';
+import { GlTooltipDirective } from '../directives/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 
@@ -12,10 +15,15 @@ export default {
   TOKENS_DARK,
   components: {
     GlBadge,
+    GlButton,
     GlCollapsibleListbox,
     GlFormInput,
+    GlLink,
     GlTable,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   fields: [
     {
       key: 'description',
@@ -29,6 +37,24 @@ export default {
   data() {
     return {
       filter: null,
+      platforms: [
+        {
+          value: 'name',
+          text: 'Name',
+        },
+        {
+          value: 'figma',
+          text: 'Figma',
+        },
+        {
+          value: 'css',
+          text: 'CSS',
+        },
+        {
+          value: 'scss',
+          text: 'SCSS',
+        },
+      ],
       modes: [
         {
           value: 'default',
@@ -39,6 +65,7 @@ export default {
           text: 'Dark',
         },
       ],
+      selectedPlatform: 'name',
       selectedMode: 'default',
       tokens: {
         default: this.$options.TOKENS_DEFAULT,
@@ -81,7 +108,8 @@ export default {
     },
     transformTokenToTableColumns(token) {
       return {
-        name: token.path.filter(Boolean).join('.'),
+        id: token.path.filter(Boolean).join('-'),
+        name: this.formatTokenName(this.selectedPlatform, token),
         type: token.$type,
         value: token.value,
         valueLabel: this.getValueLabel(token),
@@ -101,29 +129,79 @@ export default {
         }
       });
 
-      // Sort tokensArray so deprecated items are last
-      tokensArray.sort((a, b) => {
-        if (a.deprecated && !b.deprecated) {
-          return 1;
-        }
-        if (!a.deprecated && b.deprecated) {
-          return -1;
-        }
-        return 0;
-      });
+      tokensArray
+        // Sort tokensArray by id
+        .sort((a, b) => {
+          if (a.id < b.id) {
+            return -1;
+          }
+          if (a.id > b.id) {
+            return 1;
+          }
+          return 0;
+        })
+        // Sort tokensArray so deprecated items are last
+        .sort((a, b) => {
+          if (a.deprecated && !b.deprecated) {
+            return 1;
+          }
+          if (!a.deprecated && b.deprecated) {
+            return -1;
+          }
+          return 0;
+        });
 
       return tokensArray;
     },
+    formatTokenName(format, token) {
+      let figmaPrefix = '';
+      const prefix = token.prefix === false ? '' : 'gl';
+      switch (format) {
+        case 'figma':
+          if (token.filePath.match('contextual')) {
+            figmaPrefix = '🔒/';
+          }
+          if (token.deprecated) {
+            figmaPrefix = '⚠️ DEPRECATED/';
+          }
+          return `${figmaPrefix}${token.path.filter(Boolean).join('-')}`;
+        case 'css':
+          return `var(--${[prefix, ...token.path].filter(Boolean).join('-')})`;
+        case 'scss':
+          return `$${[prefix, ...token.path].filter(Boolean).join('-')}`;
+        default:
+          return token.path.filter(Boolean).join('.');
+      }
+    },
+    getTokenName(token) {
+      return `$${token.prefix === false ? '' : 'gl-'}${token.path.filter(Boolean).join('-')}`;
+    },
+    copyToClipboard(value) {
+      navigator.clipboard.writeText(value);
+    },
   },
 };
 </script>
 
 <template>
   <div>
+    <p class="gl-text-sm gl-text-subtle">
+      For full token details, see
+      <gl-link
+        href="https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json"
+        target="_blank"
+        >https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json</gl-link
+      >
+    </p>
     <div class="gl-mb-5 gl-flex gl-items-center gl-gap-3">
       <gl-form-input v-model="filter" placeholder="Type to search" />
       <gl-collapsible-listbox
-        id="component-listbox"
+        v-model="selectedPlatform"
+        :selected="selectedPlatform"
+        :items="platforms"
+        @search="query = $event"
+      />
+      <gl-collapsible-listbox
         v-model="selectedMode"
         :selected="selectedMode"
         :items="modes"
@@ -134,13 +212,21 @@ export default {
       :filter="filter"
       :items="items"
       :fields="$options.fields"
-      :tbody-tr-attr="(item) => ({ id: item.name })"
+      :tbody-tr-attr="(item) => ({ id: item.id })"
       hover
       stacked="sm"
     >
       <template #cell(description)="{ item: { name, deprecated, description } }">
         <code class="gl-text-base gl-text-strong">
           {{ name }}
+          <gl-button
+            v-gl-tooltip
+            :title="`Copy ${selectedPlatform} value to clipboard`"
+            icon="copy-to-clipboard"
+            :aria-label="`Copy ${selectedPlatform} value to clipboard`"
+            size="small"
+            @click="copyToClipboard(name)"
+          />
         </code>
         <gl-badge v-if="deprecated" variant="danger">Deprecated</gl-badge>
         <div v-if="description" class="gl-mt-3 gl-text-subtle">

package/translations.js

@@ -3,6 +3,18 @@ export default {
   'ClearIconButton.title': 'Clear',
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',
+  'GlDuoWorkflowPanel.expandButtonTitle': 'Expand',
+  'GlDuoWorkflowPrompt.cancelButtonText': 'Cancel',
+  'GlDuoWorkflowPrompt.confirmButtonText': 'Generate plan',
+  'GlDuoWorkflowPrompt.imageDescription':
+    'It should have any tools necessary for the workflow installed.',
+  'GlDuoWorkflowPrompt.imageLabel': 'Image',
+  'GlDuoWorkflowPrompt.imageLabelDescription': 'The container image to run the workflow in.',
+  'GlDuoWorkflowPrompt.promptDescription': 'Be specific and include any requirements.',
+  'GlDuoWorkflowPrompt.promptLabel': 'Description',
+  'GlDuoWorkflowPrompt.promptLabelDescription': 'What would you like to do and how.',
+  'GlDuoWorkflowPrompt.title': 'Goal',
   'GlKeysetPagination.navigationLabel': 'Pagination',
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',