@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,258 @@
+<script>
+import { GlButton, GlFormGroup, GlFormTextarea, GlFormInput } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import GlDuoWorkflowPanel from '../duo_workflow_panel/duo_workflow_panel.vue';
+
+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/components/experimental/experiment_badge/constants.js

@@ -0,0 +1,2 @@
+export const badgeTypes = ['experiment', 'beta', null];
+export const badgeTypeValidator = (value) => badgeTypes.includes(value);

package/src/components/experimental/experiment_badge/experiment_badge.md

@@ -0,0 +1,9 @@
+The component is representing a badge, marking the experimental features.
+It is supposed to be used with the AI experiments, and comes with a popover explaining
+what experiment means.
+
+## Usage
+
+```html
+<gl-experiment-badge help-page-url="https://gitlab.com" popover-placement="bottom" />
+```

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -0,0 +1,113 @@
+<script>
+import uniqueId from 'lodash/uniqueId';
+import GlBadge from '../../base/badge/badge.vue';
+import GlLink from '../../base/link/link.vue';
+import GlPopover from '../../base/popover/popover.vue';
+import GlSprintf from '../../utilities/sprintf/sprintf.vue';
+import { badgeTypes, badgeTypeValidator } from './constants';
+
+export const i18n = {
+  experiment: {
+    BADGE: 'Experiment',
+    POPOVER_TITLE: "What's an experiment?",
+    POPOVER_CONTENT:
+      'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.%{line-breakStart}Experiments:%{line-breakEnd} %{bullets}',
+    POPOVER_BULLETS: [
+      'Might be unstable or cause data loss.',
+      'Are not supported and might not be documented.',
+      'Could be changed or removed at any time.',
+      'Are subject to the GitLab Testing Agreement.',
+    ],
+  },
+  beta: {
+    BADGE: 'Beta',
+    POPOVER_TITLE: "What's a beta?",
+    POPOVER_CONTENT:
+      "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.%{line-breakStart}Beta features:%{line-breakEnd} %{bullets}",
+    POPOVER_BULLETS: [
+      'Have a low risk of data loss, but might still be unstable.',
+      'Are supported on a commercially-reasonable effort basis.',
+      'Have a near complete user experience.',
+      'Are subject to the GitLab Testing Agreement.',
+    ],
+  },
+};
+
+export default {
+  name: 'GlExperimentBadge',
+  components: {
+    GlBadge,
+    GlPopover,
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    /**
+     * The URL of a page to provide more explanations on the experiment.
+     */
+    helpPageUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The placement of the popover in relation to the button.
+     */
+    popoverPlacement: {
+      type: String,
+      required: false,
+      default: 'bottom',
+    },
+    /**
+     * The type of the badge.
+     */
+    type: {
+      type: String,
+      required: false,
+      default: badgeTypes[0],
+      validator: badgeTypeValidator,
+    },
+  },
+  computed: {
+    activeType() {
+      return i18n[this.type];
+    },
+  },
+  created() {
+    this.triggerId = uniqueId('experiment-badge-');
+  },
+};
+</script>
+
+<template>
+  <gl-badge :id="triggerId" class="gl-mx-4 hover:gl-cursor-pointer" variant="neutral">
+    <span>{{ activeType.BADGE }}</span>
+    <gl-popover
+      triggers="click"
+      show-close-button
+      :placement="popoverPlacement"
+      :target="triggerId"
+      :css-classes="['!gl-z-9999']"
+      :title="activeType.POPOVER_TITLE"
+    >
+      <gl-sprintf :message="activeType.POPOVER_CONTENT">
+        <template #link="{ content }">
+          <gl-link v-if="helpPageUrl" :href="helpPageUrl" target="_blank" class="!gl-text-sm">
+            {{ content }}
+          </gl-link>
+          <span v-else>{{ content }}</span>
+        </template>
+        <template #bullets>
+          <ul class="gl-mb-0 gl-pl-5">
+            <li v-for="(item, i) in activeType.POPOVER_BULLETS" :key="`li-${i}`">
+              {{ item }}
+            </li>
+          </ul>
+        </template>
+        <template #line-break="{ content }">
+          <span class="gl-mb-0 gl-mt-5 gl-block">{{ content }}</span>
+        </template>
+      </gl-sprintf>
+    </gl-popover>
+  </gl-badge>
+</template>

package/src/components/mixins/button_mixin.js

@@ -0,0 +1,9 @@
+import { buttonSizeOptions } from '../../utils/constants';
+
+export const ButtonMixin = {
+  computed: {
+    buttonSize() {
+      return buttonSizeOptions[this.size];
+    },
+  },
+};

package/src/components/mixins/safe_link_mixin.js

@@ -0,0 +1,28 @@
+import { SafeLinkDirective } from '../../directives/safe_link/safe_link';
+
+export const SafeLinkMixin = {
+  directives: {
+    SafeLink: SafeLinkDirective,
+  },
+  props: {
+    isUnsafeLink: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // This prevents bootstrap-vue from setting target="_self"
+    // when target attribute is not present
+    target: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    safeLinkConfig() {
+      return {
+        skipSanitization: this.isUnsafeLink,
+      };
+    },
+  },
+};

package/src/components/mixins/tooltip_mixin.js

@@ -0,0 +1,21 @@
+import { tooltipActionEvents } from '../../utils/constants';
+
+// eslint-disable-next-line import/no-default-export
+export default (tooltipRefName) => ({
+  mounted() {
+    /**
+     * Pass through the events to programmatically open, close, enable
+     * and disable a tooltip or a popover.
+     *
+     * References
+     * https://bootstrap-vue.org/docs/components/popover#programmatically-show-and-hide-popover
+     * https://bootstrap-vue.org/docs/components/tooltip#programmatically-show-and-hide-tooltip
+     */
+    tooltipActionEvents.forEach((event) =>
+      this.$on(event, () => this.$refs[tooltipRefName].$emit(event))
+    );
+  },
+  beforeDestroy() {
+    tooltipActionEvents.forEach((event) => this.$off(event));
+  },
+});

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.md

@@ -0,0 +1,4 @@
+## Dashboard Skeleton
+
+This is a skeleton loading component for a dashboards page. Renders three cards, but can be adjusted
+based on the `cards` prop.

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue

@@ -0,0 +1,40 @@
+<script>
+export default {
+  name: 'GlDashboardSkeleton',
+  props: {
+    /**
+     * Number of cards to be shown
+     */
+    cards: {
+      type: Number,
+      required: false,
+      default: 3,
+    },
+  },
+};
+</script>
+<template>
+  <div class="row dashboard-cards">
+    <div v-for="index in cards" :key="index" class="col-12 col-md-6 col-xl-4 px-2">
+      <div class="rounded-top py-4 bg-light"></div>
+      <div class="dashboard-card-body card-body bg-secondary">
+        <div class="row">
+          <div class="col-1 align-self-center">
+            <div class="bg-light p-3 rounded-circle"></div>
+          </div>
+
+          <div class="col-10 col-sm-6 align-self-center pl-4">
+            <div class="dashboard-card-skeleton-info bg-light py-2 w-100 mb-2"></div>
+            <div class="dashboard-card-skeleton-info bg-light py-2 w-100"></div>
+          </div>
+
+          <div class="col-sm-5 align-self-center d-none d-sm-block">
+            <div class="dashboard-card-skeleton-info bg-light py-2 w-100"></div>
+          </div>
+        </div>
+
+        <div class="dashboard-card-footer bg-light py-3 mt-3"></div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/regions/empty_state/empty_state.md

@@ -0,0 +1,4 @@
+### Buttons
+
+You can either have a primary button, a secondary button, or both.
+Buttons require both text a link in order for the button to render.

package/src/components/regions/empty_state/empty_state.scss

@@ -0,0 +1,3 @@
+.gl-empty-state-content {
+    max-width: 65ch;
+}

package/src/components/regions/empty_state/empty_state.vue

@@ -0,0 +1,187 @@
+<script>
+import GlButton from '../../base/button/button.vue';
+
+export default {
+  name: 'GlEmptyState',
+  components: {
+    GlButton,
+  },
+  props: {
+    /**
+     * The title (heading) of the empty state.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The illustration's URL.
+     */
+    svgPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The illustration's height used to prevent content reflow.
+     */
+    svgHeight: {
+      type: Number,
+      required: false,
+      default: 144,
+    },
+    /**
+     * The desciption/body text of the empty state.
+     */
+    description: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The primary GlButton's href.
+     */
+    primaryButtonLink: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The primary GlButton's text. If falsey, the button is not shown.
+     */
+    primaryButtonText: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The secondary GlButton's href.
+     */
+    secondaryButtonLink: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The secondary GlButton's text. If falsey, the button is not shown.
+     */
+    secondaryButtonText: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Determines whether to render the compact layout.
+     */
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    invertInDarkMode: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    /**
+     * CSS classes to add to the content container
+     */
+    contentClass: {
+      type: [Array, String, Object],
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    height() {
+      return this.shouldPreventImageReflow ? this.svgHeight : null;
+    },
+    shouldPreventImageReflow() {
+      return Boolean(this.svgHeight);
+    },
+    shouldRenderPrimaryButton() {
+      return Boolean(this.primaryButtonLink && this.primaryButtonText);
+    },
+    shouldRenderSecondaryButton() {
+      return Boolean(this.secondaryButtonLink && this.secondaryButtonText);
+    },
+    contentClasses() {
+      return [this.compact ? 'gl-grow gl-basis-0 gl-px-4' : 'gl-m-auto gl-p-5', this.contentClass];
+    },
+  },
+};
+</script>
+
+<template>
+  <section
+    class="gl-flex"
+    :class="{
+      'gl-empty-state gl-flex-col gl-text-center': !compact,
+      'gl-flex-row': compact,
+    }"
+  >
+    <div :class="{ 'gl-hidden gl-px-4 sm:gl-block': compact, 'gl-max-w-full': !compact }">
+      <img
+        v-if="svgPath"
+        :src="svgPath"
+        alt=""
+        :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
+        class="gl-max-w-full"
+        :height="height"
+      />
+    </div>
+    <div
+      class="gl-empty-state-content gl-mx-auto gl-my-0"
+      :class="contentClasses"
+      data-testid="gl-empty-state-content"
+    >
+      <!--
+          @slot Use this slot to customize the empty state's title area.
+          Overrides the `title` prop.
+        -->
+      <slot ref="title" name="title">
+        <h1
+          class="gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-36"
+          :class="compact ? 'h5' : 'h4'"
+        >
+          {{ title }}
+        </h1>
+      </slot>
+      <p v-if="description || $scopedSlots.description" ref="description" class="gl-mb-0 gl-mt-4">
+        <!--
+          @slot Use this slot to customize the empty state's description
+          area. Overrides the `description` prop.
+        -->
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </p>
+      <div class="gl-mt-5 gl-flex gl-flex-wrap" :class="{ 'gl-justify-center': !compact }">
+        <!--
+          @slot Use this slot to customize the empty state's actions area,
+          where the buttons are. Overrides button-related props:
+          `primaryButtonLink`, `primaryButtonText`, `secondaryButtonLink`,
+          `secondaryButtonText`.
+        -->
+        <slot name="actions">
+          <gl-button
+            v-if="shouldRenderPrimaryButton"
+            variant="confirm"
+            :class="compact ? 'gl-mr-3' : 'gl-mx-2'"
+            class="gl-mb-3"
+            :href="primaryButtonLink"
+            >{{ primaryButtonText }}</gl-button
+          >
+          <gl-button
+            v-if="shouldRenderSecondaryButton"
+            class="gl-mb-3 gl-mr-3"
+            :class="{ '!gl-mx-2': !compact }"
+            :href="secondaryButtonLink"
+            >{{ secondaryButtonText }}
+          </gl-button>
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>