@gitlab/ui 87.1.2 → 87.2.1

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/action.tokens.json

@@ -41,7 +41,7 @@
               "dark": "{color.neutral.50}"
             },
             "$type": "color",
-            "$description": "Used for the foreground of outlined and borderless neutral actions."
+            "$description": "Used for the foreground of a neutral action in the default state."
           },
           "hover": {
             "$value": "{action.neutral.foreground.color.default}",

package/src/tokens/build/css/tokens.css

@@ -595,7 +595,7 @@
   --gl-action-confirm-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) action in the default state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
-  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of outlined and borderless neutral actions. */
+  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of a neutral action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */

package/src/tokens/build/css/tokens.dark.css

@@ -595,7 +595,7 @@
   --gl-action-confirm-foreground-color-default: var(--gl-color-blue-400); /* Used for the foreground of a confirm (positive) action in the default state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
-  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of outlined and borderless neutral actions. */
+  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a neutral action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */

package/src/tokens/build/js/tokens.dark.js

@@ -6,7 +6,7 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled action.
-export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of outlined and borderless neutral actions.
+export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a neutral action in the active state.

package/src/tokens/build/js/tokens.js

@@ -6,7 +6,7 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#ececef'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled action.
-export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of outlined and borderless neutral actions.
+export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#28272d'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#28272d'; // Used for the foreground of a neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#28272d'; // Used for the foreground of a neutral action in the active state.

package/src/tokens/build/json/tokens.dark.json

@@ -83,7 +83,7 @@
           "default": {
             "value": "#ececef",
             "$type": "color",
-            "comment": "Used for the foreground of outlined and borderless neutral actions.",
+            "comment": "Used for the foreground of a neutral action in the default state.",
             "filePath": "src/tokens/action.tokens.json",
             "isSource": true,
             "original": {
@@ -92,7 +92,7 @@
                 "dark": "{color.neutral.50}"
               },
               "$type": "color",
-              "comment": "Used for the foreground of outlined and borderless neutral actions."
+              "comment": "Used for the foreground of a neutral action in the default state."
             },
             "name": "ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
             "attributes": {},

package/src/tokens/build/json/tokens.json

@@ -83,7 +83,7 @@
           "default": {
             "value": "#28272d",
             "$type": "color",
-            "comment": "Used for the foreground of outlined and borderless neutral actions.",
+            "comment": "Used for the foreground of a neutral action in the default state.",
             "filePath": "src/tokens/action.tokens.json",
             "isSource": true,
             "original": {
@@ -92,7 +92,7 @@
                 "dark": "{color.neutral.50}"
               },
               "$type": "color",
-              "comment": "Used for the foreground of outlined and borderless neutral actions."
+              "comment": "Used for the foreground of a neutral action in the default state."
             },
             "name": "ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
             "attributes": {},

package/src/tokens/build/scss/_tokens.dark.scss

@@ -593,7 +593,7 @@ $gl-action-confirm-foreground-color-hover: $gl-color-blue-200; // Used for the f
 $gl-action-confirm-foreground-color-default: $gl-color-blue-400; // Used for the foreground of a confirm (positive) action in the default state.
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
-$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of outlined and borderless neutral actions.
+$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.

package/src/tokens/build/scss/_tokens.scss

@@ -593,7 +593,7 @@ $gl-action-confirm-foreground-color-hover: $gl-color-blue-700; // Used for the f
 $gl-action-confirm-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) action in the default state.
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
-$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of outlined and borderless neutral actions.
+$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.

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',