@gitlab/ui 80.13.1 → 80.14.0

package/src/components/base/filtered_search/filtered_search_utils.spec.js

@@ -1,82 +0,0 @@
-import { splitOnQuotes, wrapTokenInQuotes, stepIndexAndWrap } from './filtered_search_utils';
-
-describe('FilteredSearchUtils', () => {
-  describe('splitOnQuotes', () => {
-    it('returns token as an array', () => {
-      const token = 'token';
-
-      expect(splitOnQuotes(token)).toEqual([token]);
-    });
-
-    it('splits the token by spaces', () => {
-      const token = 'some token with spaces';
-
-      expect(splitOnQuotes(token)).toEqual(['some', 'token', 'with', 'spaces']);
-    });
-
-    it("doesn't split if token is inside quotes", () => {
-      const token = '"token inside"';
-
-      expect(splitOnQuotes(token)).toEqual([token]);
-    });
-
-    it("doesn't split if the token has multiple quotes", () => {
-      const token = `'My "old" milestone'`;
-
-      expect(splitOnQuotes(token)).toEqual([token]);
-    });
-  });
-
-  describe('wrapTokenInQuotes', () => {
-    it('returns token if no space is present', () => {
-      const token = 'foo';
-
-      expect(wrapTokenInQuotes(token)).toEqual(token);
-    });
-
-    it('returns token if already wrapped in quotes', () => {
-      const token1 = '"foo"';
-      const token2 = "'foo'";
-
-      expect(wrapTokenInQuotes(token1)).toEqual(token1);
-      expect(wrapTokenInQuotes(token2)).toEqual(token2);
-    });
-
-    it('returns wrapped token', () => {
-      const token = 'foo bar';
-
-      expect(wrapTokenInQuotes(token)).toEqual(`"${token}"`);
-    });
-  });
-
-  describe('stepIndexAndWrap', () => {
-    it.each`
-      index  | step   | length | result
-      ${0}   | ${0}   | ${5}   | ${0}
-      ${0}   | ${1}   | ${5}   | ${1}
-      ${0}   | ${-1}  | ${5}   | ${4}
-      ${0}   | ${6}   | ${5}   | ${1}
-      ${0}   | ${-6}  | ${5}   | ${4}
-      ${1}   | ${0}   | ${5}   | ${1}
-      ${1}   | ${1}   | ${5}   | ${2}
-      ${1}   | ${-2}  | ${5}   | ${4}
-      ${1}   | ${-5}  | ${5}   | ${1}
-      ${-1}  | ${0}   | ${5}   | ${-1}
-      ${6}   | ${0}   | ${5}   | ${6}
-      ${6}   | ${1}   | ${5}   | ${0}
-      ${6}   | ${-1}  | ${5}   | ${4}
-      ${-1}  | ${1}   | ${5}   | ${0}
-      ${-1}  | ${-1}  | ${5}   | ${4}
-      ${-1}  | ${-5}  | ${5}   | ${0}
-      ${-1}  | ${5}   | ${5}   | ${4}
-      ${4}   | ${1}   | ${5}   | ${0}
-      ${4}   | ${2}   | ${5}   | ${1}
-      ${NaN} | ${1}   | ${1}   | ${0}
-      ${0}   | ${NaN} | ${1}   | ${NaN}
-      ${0}   | ${1}   | ${NaN} | ${NaN}
-      ${0}   | ${1}   | ${0}   | ${NaN}
-    `('stepIndex($index, $step, $length) === $result', ({ index, step, length, result }) => {
-      expect(stepIndexAndWrap(index, step, length, result)).toBe(result);
-    });
-  });
-});

package/src/components/base/form/form.stories.js

@@ -1,101 +0,0 @@
-import GlButton from '../button/button.vue';
-import { setStoryTimeout } from '../../../utils/test_utils';
-import GlFormCheckboxGroup from './form_checkbox/form_checkbox_group.vue';
-import GlForm from './form.vue';
-import GlFormGroup from './form_group/form_group.vue';
-import GlFormInput from './form_input/form_input.vue';
-import GlFormSelect from './form_select/form_select.vue';
-import GlFormCheckbox from './form_checkbox/form_checkbox.vue';
-import readme from './form.md';
-
-export const Default = (args) => ({
-  components: {
-    GlForm,
-    GlFormGroup,
-    GlFormInput,
-    GlFormSelect,
-    GlFormCheckbox,
-    GlFormCheckboxGroup,
-    GlButton,
-  },
-  props: Object.keys(args),
-  data() {
-    return {
-      form: {
-        submitDisabled: false,
-        email: '',
-        name: '',
-        mergeState: null,
-        checked: [],
-      },
-      states: [{ text: 'Select One', value: null }, 'Open', 'Resolved', 'Closed', 'Blocked'],
-      show: true,
-    };
-  },
-  methods: {
-    onReset() {
-      this.form.name = '';
-      this.form.submitDisabled = false;
-    },
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.form.submitDisabled = true;
-      setStoryTimeout(() => {
-        this.form.submitDisabled = false;
-        // eslint-disable-next-line no-alert
-        alert(JSON.stringify(this.form));
-      }, 1000);
-    },
-  },
-  template: `
-    <gl-form @submit="onSubmit" @reset="onReset">
-      <gl-form-group
-        id="input-group-1"
-        label="Email address:"
-        label-for="input-1"
-        description="We'll never share your email with anyone else."
-      >
-        <gl-form-input
-          id="input-1"
-          v-model="form.email"
-          type="email"
-          required
-          placeholder="Enter email"
-        />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-2" label="Your Name:" label-for="input-2">
-        <gl-form-input id="input-2" v-model="form.name" required placeholder="Enter name" />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-3" label="Merge State:" label-for="input-3">
-        <gl-form-select id="input-3" v-model="form.mergeState" :options="states" required />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-4">
-        <gl-form-checkbox-group id="checkboxes-4" v-model="form.checked">
-          <gl-form-checkbox value="squash">Squash Commits</gl-form-checkbox>
-          <gl-form-checkbox value="new">Create New Issue</gl-form-checkbox>
-        </gl-form-checkbox-group>
-      </gl-form-group>
-
-      <div class="gl-display-flex gl-justify-content-end">
-        <gl-button type="reset" class="gl-mr-3">Cancel</gl-button>
-        <gl-button type="submit" variant="confirm">Submit</gl-button>
-      </div>
-    </gl-form>
-  `,
-});
-
-export default {
-  title: 'base/form/form',
-  component: GlForm,
-  parameters: {
-    bootstrapComponent: 'b-form',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/form/form_checkbox/form_checkbox.stories.js

@@ -1,55 +0,0 @@
-import GlFormCheckbox from './form_checkbox.vue';
-import GlFormCheckboxGroup from './form_checkbox_group.vue';
-import readme from './form_checkbox.md';
-
-const components = {
-  GlFormCheckbox,
-  GlFormCheckboxGroup,
-};
-
-const data = () => ({
-  selected: ['checked-option', 'checked-disabled-option'],
-  indeterminate: true,
-});
-
-const template = `
-<div>
-  <gl-form-checkbox-group v-model="selected">
-    <gl-form-checkbox value="option">Option</gl-form-checkbox>
-    <gl-form-checkbox value="slot-option">
-      Slot option
-      <template #help> With help text </template>
-    </gl-form-checkbox>
-    <gl-form-checkbox value="checked-option">Checked option</gl-form-checkbox>
-    <gl-form-checkbox value="checked-disabled-option" :disabled="true">Checked disabled option</gl-form-checkbox>
-    <gl-form-checkbox value="disabled-option" :disabled="true">Disabled option</gl-form-checkbox>
-    <template #first>
-      <gl-form-checkbox value="first">First</gl-form-checkbox>
-    </template>
-  </gl-form-checkbox-group>
-  <gl-form-checkbox value="indeterminate-option" :indeterminate="indeterminate">Indeterminate option</gl-form-checkbox>
-  <gl-form-checkbox value="indeterminate-disabled-option" :indeterminate="indeterminate" :disabled="true">Indeterminate disabled option</gl-form-checkbox>
-</div>
-`;
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  data,
-  template,
-});
-
-export const Default = Template.bind({});
-
-export default {
-  title: 'base/form/form checkbox',
-  component: GlFormCheckbox,
-  parameters: {
-    bootstrapComponent: 'b-form-checkbox',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js

@@ -1,265 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GlFormCheckbox from '../form_checkbox/form_checkbox.vue';
-import GlFormCheckboxTree from './form_checkbox_tree.vue';
-import { V_MODEL, QA_PREFIX } from './models/constants';
-
-/**
- * Construct an options tree based on shape passed as a string
- * @param {string} shape
- * @returns {array} The options tree
- */
-const getOptions = (shape = '') => {
-  const options = [];
-  const parsed = shape
-    .split('\n')
-    .map((line) => line.trim())
-    .filter((line) => line.length);
-
-  const makeOption = (value) => ({ value, label: value, children: [] });
-
-  const getDepthAndValue = (str) => {
-    const [prefix, value] = str.split('.');
-    return [prefix.length, value];
-  };
-
-  const addChildren = (option, depth, index) => {
-    for (let i = index + 1; i < parsed.length; i += 1) {
-      const [childDepth, value] = getDepthAndValue(parsed[i]);
-      if (childDepth <= depth) {
-        break;
-      }
-      if (childDepth === depth + 1) {
-        const child = makeOption(value);
-        option.children.push(child);
-        addChildren(child, depth + 1, i);
-      }
-    }
-  };
-
-  parsed.forEach((line, index) => {
-    const [depth, value] = getDepthAndValue(line);
-
-    if (depth === 1) {
-      const option = makeOption(value);
-      options.push(option);
-      addChildren(option, depth, index);
-    }
-  });
-
-  return options;
-};
-
-const SHAPE = {
-  NO_NESTING: `
-  _.1
-  _.2
-  _.3
-  _.4
-  _.5
-  `,
-  NESTED: `
-  _.1
-  __.2
-  __.3
-  ___.4
-  ___.5
-`,
-
-  COMPLEX: `
-_.1
-__.2
-__.3
-___.4
-___.5
-____.6
-__.7
-__.8
-___.9
-___.10
-__.11
-_.12
-`,
-};
-
-describe('GlFormCheckboxTree', () => {
-  let wrapper;
-
-  const findCheckboxes = (el = wrapper) => el.findAllComponents(GlFormCheckbox);
-  const countIndeterminate = () => wrapper.findAll('.js-is-indeterminate').length || 0;
-  const countChecked = () => wrapper.findAll('.js-is-checked').length || 0;
-  const findCheckboxByValue = (value) => wrapper.find(`[data-testid="${QA_PREFIX}${value}"]`);
-  const getCheckboxesCount = (el) => findCheckboxes(el).length;
-  const findCheckboxInput = (checkbox) => checkbox.find('input[type="checkbox"]');
-  const expectCheckboxUnchecked = (checkbox) => {
-    const input = findCheckboxInput(checkbox);
-    expect(input.element.checked).toBe(false);
-    expect(input.element.indeterminate).toBe(false);
-  };
-  const expectCheckboxIndeterminate = (checkbox) =>
-    expect(findCheckboxInput(checkbox).element.indeterminate).toBe(true);
-  const expectCheckboxChecked = (checkbox) =>
-    expect(findCheckboxInput(checkbox).element.checked).toBe(true);
-
-  const createWrapper = (props = {}) => {
-    wrapper = mount(GlFormCheckboxTree, {
-      propsData: {
-        hideToggleAll: true,
-        ...props,
-      },
-    });
-  };
-
-  describe.each`
-    description     | shape               | expected | initiallyChecked    | indeterminateBoxes
-    ${'non-nested'} | ${SHAPE.NO_NESTING} | ${5}     | ${['1', '2', '3']}  | ${[]}
-    ${'nested'}     | ${SHAPE.NESTED}     | ${5}     | ${['3', '4', '5']}  | ${[1]}
-    ${'complex'}    | ${SHAPE.COMPLEX}    | ${12}    | ${[]}               | ${[]}
-    ${'complex'}    | ${SHAPE.COMPLEX}    | ${12}    | ${['5', '6', '10']} | ${['1', '3', '8']}
-  `(
-    'initial state with a $description tree',
-    ({ shape, expected, initiallyChecked, indeterminateBoxes }) => {
-      beforeEach(() => {
-        createWrapper({ options: getOptions(shape), [V_MODEL.PROP]: initiallyChecked });
-      });
-
-      it('renders as many checkboxes as there are options', () => {
-        expect(getCheckboxesCount()).toBe(expected);
-      });
-
-      it('checks boxes based on passed value', () => {
-        expect(countChecked()).toBe(initiallyChecked.length);
-        initiallyChecked.forEach((box) => {
-          expectCheckboxChecked(findCheckboxByValue(box));
-        });
-      });
-
-      it('sets indeterminate state on checkboxes that have some children checked', () => {
-        expect(countIndeterminate()).toBe(indeterminateBoxes.length);
-        indeterminateBoxes.forEach((box) => {
-          expectCheckboxIndeterminate(findCheckboxByValue(box));
-        });
-      });
-    }
-  );
-
-  describe.each`
-    description     | shape               | boxToCheck
-    ${'non-nested'} | ${SHAPE.NO_NESTING} | ${1}
-    ${'nested'}     | ${SHAPE.NESTED}     | ${1}
-    ${'complex'}    | ${SHAPE.COMPLEX}    | ${1}
-  `('when checking a parent checkbox in a $description tree', ({ shape, boxToCheck }) => {
-    let checkbox;
-
-    beforeEach(async () => {
-      createWrapper({ options: getOptions(shape) });
-      checkbox = wrapper.find(`[data-testid="${QA_PREFIX}${boxToCheck}"]`);
-      await checkbox.find('input').setChecked();
-    });
-
-    it("checks all of the checkbox's children, if any", () => {
-      const childrenBoxes = findCheckboxes(checkbox);
-      const checkedChildren = childrenBoxes.filter((box) => findCheckboxInput(box).element.checked);
-      expect(checkedChildren.length).toBe(childrenBoxes.length);
-    });
-  });
-
-  describe.each`
-    description  | shape            | boxesToCheck  | indeterminateBoxes | checkedParents
-    ${'nested'}  | ${SHAPE.NESTED}  | ${[4]}        | ${[1, 3]}          | ${[]}
-    ${'nested'}  | ${SHAPE.NESTED}  | ${[4, 5]}     | ${[1]}             | ${[3]}
-    ${'nested'}  | ${SHAPE.NESTED}  | ${[2, 4, 5]}  | ${[]}              | ${[1, 3]}
-    ${'complex'} | ${SHAPE.COMPLEX} | ${[6]}        | ${[1, 3]}          | ${[5]}
-    ${'complex'} | ${SHAPE.COMPLEX} | ${[6, 10]}    | ${[1, 3, 8]}       | ${[5]}
-    ${'complex'} | ${SHAPE.COMPLEX} | ${[6, 9, 10]} | ${[1, 3]}          | ${[5, 8]}
-  `(
-    'when checking child checkboxes in a $description tree',
-    ({ shape, boxesToCheck, indeterminateBoxes, checkedParents }) => {
-      beforeEach(async () => {
-        createWrapper({ options: getOptions(shape) });
-        await Promise.allSettled(
-          boxesToCheck.map((box) => findCheckboxInput(findCheckboxByValue(box)).setChecked())
-        );
-      });
-
-      it('parents that have remaining unchecked children become indeterminate', () => {
-        expect(countIndeterminate()).toBe(indeterminateBoxes.length);
-        indeterminateBoxes.forEach((indeterminateBox) => {
-          expectCheckboxIndeterminate(findCheckboxByValue(indeterminateBox));
-        });
-      });
-
-      it('parents that have all their children checked become checked as well', () => {
-        checkedParents.forEach((checkedParent) => {
-          expectCheckboxChecked(findCheckboxByValue(checkedParent));
-        });
-      });
-    }
-  );
-
-  describe.each`
-    description  | shape            | initiallyChecked                        | boxesToUncheck | indeterminateBoxes | uncheckedBoxes
-    ${'nested'}  | ${SHAPE.NESTED}  | ${['1', '2', '3', '4', '5']}            | ${[1]}         | ${[]}              | ${[1, 2, 3, 4, 5]}
-    ${'nested'}  | ${SHAPE.NESTED}  | ${['1', '2', '3', '4', '5']}            | ${[3]}         | ${[1]}             | ${[3, 4, 5]}
-    ${'complex'} | ${SHAPE.COMPLEX} | ${['3', '4', '5', '6']}                 | ${[3]}         | ${[]}              | ${[3, 4, 5, 6]}
-    ${'complex'} | ${SHAPE.COMPLEX} | ${['3', '4', '5', '6']}                 | ${[4, 6]}      | ${[]}              | ${[3, 4, 5, 6]}
-    ${'complex'} | ${SHAPE.COMPLEX} | ${['3', '4', '5', '6', '8', '9', '10']} | ${[10]}        | ${[1, 8]}          | ${[10]}
-  `(
-    'when unchecking checkboxes in a $description tree',
-    ({ shape, initiallyChecked, boxesToUncheck, indeterminateBoxes, uncheckedBoxes }) => {
-      beforeEach(async () => {
-        createWrapper({ options: getOptions(shape), [V_MODEL.PROP]: initiallyChecked });
-        await Promise.allSettled(
-          boxesToUncheck.map((box) => findCheckboxInput(findCheckboxByValue(box)).setChecked(false))
-        );
-      });
-
-      it("unchecks all of the checkbox's children if any", () => {
-        uncheckedBoxes.forEach((uncheckedBox) => {
-          expectCheckboxUnchecked(findCheckboxByValue(uncheckedBox));
-        });
-      });
-
-      it('sets parent checkboxes in the indeterminate state if needed', () => {
-        expect(countIndeterminate()).toBe(indeterminateBoxes.length);
-        indeterminateBoxes.forEach((indeterminateBox) => {
-          expectCheckboxIndeterminate(findCheckboxByValue(indeterminateBox));
-        });
-      });
-    }
-  );
-
-  describe.each`
-    description               | shape               | initiallyChecked             | checked  | indeterminate | finallyChecked
-    ${'no option checked'}    | ${SHAPE.NO_NESTING} | ${[]}                        | ${false} | ${false}      | ${true}
-    ${'some options checked'} | ${SHAPE.NO_NESTING} | ${['1', '2', '3']}           | ${false} | ${true}       | ${true}
-    ${'all options checked'}  | ${SHAPE.NO_NESTING} | ${['1', '2', '3', '4', '5']} | ${true}  | ${false}      | ${false}
-  `(
-    'toggle all with $description',
-    ({ shape, initiallyChecked, checked, indeterminate, finallyChecked }) => {
-      let toggleAllCheckbox;
-
-      beforeEach(() => {
-        createWrapper({
-          options: getOptions(shape),
-          [V_MODEL.PROP]: initiallyChecked,
-          hideToggleAll: false,
-        });
-        toggleAllCheckbox = findCheckboxInput(findCheckboxes().at(0));
-      });
-
-      it('toggle all checkbox is in the correct state', () => {
-        expect(toggleAllCheckbox.element.checked).toBe(checked);
-        expect(toggleAllCheckbox.element.indeterminate).toBe(indeterminate);
-      });
-
-      it('once toggled, puts all checkboxes in the correct state', async () => {
-        await toggleAllCheckbox.setChecked(finallyChecked);
-
-        findCheckboxes().wrappers.forEach((checkbox) => {
-          expect(findCheckboxInput(checkbox).element.checked).toBe(finallyChecked);
-          expect(findCheckboxInput(checkbox).element.indeterminate).toBe(false);
-        });
-      });
-    }
-  );
-});

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.stories.js

@@ -1,134 +0,0 @@
-import GlToken from '../../token/token.vue';
-import readme from './form_checkbox_tree.md';
-import GlFormCheckboxTree from './form_checkbox_tree.vue';
-
-const components = {
-  GlFormCheckboxTree,
-  GlToken,
-};
-
-const defaultOptions = [
-  {
-    value: 1,
-    label: 'Felidae',
-    children: [
-      {
-        value: 11,
-        label: 'Lion',
-      },
-      {
-        value: 12,
-        label: 'Felinae',
-        children: [
-          {
-            value: 121,
-            label: 'Cheetah',
-          },
-          {
-            value: 122,
-            label: 'Ocelot',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 2,
-    label: 'Canidae',
-    children: [
-      {
-        value: 21,
-        label: 'Caninae',
-        children: [
-          {
-            value: 211,
-            label: 'Canis lupus',
-            children: [
-              {
-                value: 2112,
-                label: 'Wolf',
-              },
-              {
-                value: 2113,
-                label: 'Himalayan wolf',
-              },
-              {
-                value: 2114,
-                label: 'Dingo',
-              },
-            ],
-          },
-          {
-            value: 212,
-            label: 'Black-backed jackal',
-          },
-        ],
-      },
-      {
-        value: 22,
-        label: 'Fennec fox',
-      },
-    ],
-  },
-  {
-    value: 3,
-    label: 'Karabair',
-  },
-  {
-    value: 4,
-    label: 'Okapi',
-  },
-];
-
-const defaultValue = (prop) => GlFormCheckboxTree.props[prop].default;
-
-const generateProps = ({
-  options = defaultOptions,
-  hideToggleAll = defaultValue('hideToggleAll'),
-  selectAllLabel = defaultValue('selectAllLabel'),
-  unselectAllLabel = defaultValue('unselectAllLabel'),
-  label = defaultValue('label'),
-  labelSrOnly = defaultValue('labelSrOnly'),
-} = {}) => ({
-  options,
-  hideToggleAll,
-  selectAllLabel,
-  unselectAllLabel,
-  label,
-  labelSrOnly,
-});
-
-export const Default = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  data: () => ({
-    checked: [1, 11, 12, 121, 122, 2113, 3],
-  }),
-  components,
-  template: `
-    <div>
-      <gl-form-checkbox-tree
-        v-model="checked"
-        :options="options"
-        :hide-toggle-all="hideToggleAll"
-        :select-all-label="selectAllLabel"
-        :unselect-all-label="unselectAllLabel"
-        :label="label"
-        :label-sr-only="labelSrOnly" />
-      Selected options:
-      <gl-token v-for="value in checked" :key="value" class="gl-mr-1" view-only>{{ value }}</gl-token>
-    </div>
-  `,
-});
-Default.args = generateProps();
-
-export default {
-  title: 'base/form/form-checkbox-tree',
-  component: GlFormCheckboxTree,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};