Merge branch 'work-items-remove-widget-wrapper' into 'master'

Remove unused widget_wrapper.vue

See merge request !165300



Merged-by: Coung Ngo <cngo@gitlab.com>
Approved-by: Rajan Mistry <rmistry@gitlab.com>
Approved-by: Coung Ngo <cngo@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/work_items/components/widget_wrapper.vue

-<script>
-import { GlAlert, GlButton, GlLink } from '@gitlab/ui';
-import { __ } from '~/locale';
-
-export default {
-  components: {
-    GlAlert,
-    GlButton,
-    GlLink,
-  },
-  props: {
-    error: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    widgetName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isOpen: true,
-    };
-  },
-  computed: {
-    toggleIcon() {
-      return this.isOpen ? 'chevron-lg-up' : 'chevron-lg-down';
-    },
-    toggleLabel() {
-      return this.isOpen ? __('Collapse') : __('Expand');
-    },
-    isOpenString() {
-      return this.isOpen ? 'true' : 'false';
-    },
-    anchorLink() {
-      return `#${this.widgetName}`;
-    },
-    anchorLinkId() {
-      return `user-content-${this.widgetName}-links`;
-    },
-  },
-  methods: {
-    hide() {
-      this.isOpen = false;
-    },
-    show() {
-      this.isOpen = true;
-    },
-    toggle() {
-      this.isOpen = !this.isOpen;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :id="widgetName"
-    data-testid="widget-wrapper"
-    class="gl-new-card"
-    :class="{ 'is-collapsed': !isOpen }"
-  >
-    <div class="gl-new-card-header">
-      <div class="gl-new-card-title-wrapper">
-        <h2 class="gl-new-card-title">
-          <div aria-hidden="true">
-            <gl-link :id="anchorLinkId" class="gl-hidden gl-no-underline" :href="anchorLink" />
-          </div>
-          <slot name="header"></slot>
-        </h2>
-        <slot name="header-suffix"></slot>
-      </div>
-      <slot name="header-right"></slot>
-      <div class="gl-new-card-toggle">
-        <!-- https://www.w3.org/TR/wai-aria-1.2/#aria-expanded -->
-        <gl-button
-          category="tertiary"
-          size="small"
-          :icon="toggleIcon"
-          :aria-label="toggleLabel"
-          data-testid="widget-toggle"
-          :aria-expanded="isOpenString"
-          :aria-controls="widgetName"
-          @click="toggle"
-        />
-      </div>
-    </div>
-    <gl-alert v-if="error" variant="danger" @dismiss="$emit('dismissAlert')">
-      {{ error }}
-    </gl-alert>
-    <div v-if="isOpen" class="gl-new-card-body" :class="{ error: error }" data-testid="widget-body">
-      <slot name="body"></slot>
-    </div>
-  </div>
-</template>

spec/frontend/work_items/components/widget_wrapper_spec.js

-import { nextTick } from 'vue';
-import { GlAlert, GlButton } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import WidgetWrapper from '~/work_items/components/widget_wrapper.vue';
-
-describe('WidgetWrapper component', () => {
-  let wrapper;
-
-  const createComponent = ({ error, widgetName } = {}) => {
-    wrapper = shallowMountExtended(WidgetWrapper, { propsData: { error, widgetName } });
-  };
-
-  const findAlert = () => wrapper.findComponent(GlAlert);
-  const findToggleButton = () => wrapper.findComponent(GlButton);
-  const findWidgetBody = () => wrapper.findByTestId('widget-body');
-  const findWidgetWrapper = () => wrapper.findByTestId('widget-wrapper');
-
-  it('is expanded by default', () => {
-    createComponent();
-
-    const toggleButton = findToggleButton();
-
-    expect(toggleButton.props('icon')).toBe('chevron-lg-up');
-    expect(toggleButton.attributes('aria-expanded')).toBe('true');
-    expect(findWidgetWrapper().classes()).not.toContain('is-collapsed');
-    expect(findWidgetBody().exists()).toBe(true);
-  });
-
-  it('collapses on click toggle button', async () => {
-    createComponent();
-    findToggleButton().vm.$emit('click');
-    await nextTick();
-
-    const toggleButton = findToggleButton();
-
-    expect(toggleButton.props('icon')).toBe('chevron-lg-down');
-    expect(toggleButton.attributes('aria-expanded')).toBe('false');
-    expect(findWidgetWrapper().classes()).toContain('is-collapsed');
-    expect(findWidgetBody().exists()).toBe(false);
-  });
-
-  it('shows an alert when list loading fails', () => {
-    const error = 'Some error';
-    createComponent({ error });
-
-    expect(findAlert().text()).toBe(error);
-  });
-
-  it('emits event when dismissing the alert', () => {
-    createComponent({ error: 'error' });
-    findAlert().vm.$emit('dismiss');
-
-    expect(wrapper.emitted('dismissAlert')).toEqual([[]]);
-  });
-
-  describe('"aria-controls" attribute', () => {
-    it('is set and identifies the correct element', () => {
-      createComponent({ widgetName: 'test-widget-name' });
-
-      expect(findWidgetWrapper().attributes('id')).toBe('test-widget-name');
-      expect(findToggleButton().attributes('aria-controls')).toBe('test-widget-name');
-    });
-  });
-});