Merge branch '326032-remove-the-regulated-tab-from-compliance-frameworks' into 'master'

Remove the 'Regulated' tab from compliance frameworks

See merge request gitlab-org/gitlab!64690

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/list.vue

 <script>
-import { GlAlert, GlButton, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -20,8 +20,6 @@ export default {
     GlButton,
     GlLoadingIcon,
     ListItem,
-    GlTab,
-    GlTabs,
   },
   props: {
     addFrameworkPath: {
@@ -96,9 +94,6 @@ export default {
     hasFrameworks() {
       return this.hasLoaded && this.frameworksCount > 0;
     },
-    regulatedCount() {
-      return 0;
-    },
     alertDismissible() {
       return !this.error;
     },
@@ -108,6 +103,9 @@ export default {
     alertMessage() {
       return this.error || this.message;
     },
+    showAddButton() {
+      return this.hasLoaded && this.addFrameworkPath && !this.isEmpty;
+    },
   },
   methods: {
     dismissAlertMessage() {
@@ -142,14 +140,12 @@ export default {
     fetchError: s__(
       'ComplianceFrameworks|Error fetching compliance frameworks data. Please refresh the page',
     ),
-    allTab: s__('ComplianceFrameworks|All'),
-    regulatedTab: s__('ComplianceFrameworks|Regulated'),
     addBtn: s__('ComplianceFrameworks|Add framework'),
   },
 };
 </script>
 <template>
-  <div class="gl-border-t-1 gl-border-t-solid gl-border-t-gray-100">
+  <div :class="{ 'gl-border-t-1 gl-border-t-solid gl-border-t-gray-100': isEmpty }">
     <gl-alert
       v-if="alertMessage"
       class="gl-mt-5"
@@ -166,29 +162,23 @@ export default {
       :add-framework-path="addFrameworkPath"
     />
 
-    <gl-tabs v-if="hasFrameworks">
-      <gl-tab class="gl-mt-6" :title="$options.i18n.allTab">
-        <list-item
-          v-for="framework in complianceFrameworks"
-          :key="framework.parsedId"
-          :framework="framework"
-          :loading="isDeleting(framework.id)"
-          @delete="markForDeletion"
-        />
-      </gl-tab>
-      <gl-tab disabled :title="$options.i18n.regulatedTab" />
-      <template #tabs-end>
-        <gl-button
-          v-if="addFrameworkPath"
-          class="gl-align-self-center gl-ml-auto"
-          category="primary"
-          variant="confirm"
-          :href="addFrameworkPath"
-        >
-          {{ $options.i18n.addBtn }}
-        </gl-button>
-      </template>
-    </gl-tabs>
+    <list-item
+      v-for="framework in complianceFrameworks"
+      :key="framework.parsedId"
+      :framework="framework"
+      :loading="isDeleting(framework.id)"
+      @delete="markForDeletion"
+    />
+
+    <gl-button
+      v-if="showAddButton"
+      class="gl-mt-3"
+      category="primary"
+      variant="confirm"
+      :href="addFrameworkPath"
+    >
+      {{ $options.i18n.addBtn }}
+    </gl-button>
     <delete-modal
       v-if="hasFrameworks"
       :id="markedForDeletion.id"

ee/spec/frontend/groups/settings/compliance_frameworks/components/list_spec.js

-import { GlAlert, GlButton, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
@@ -30,9 +30,7 @@ describe('List', () => {
   const findDeleteModal = () => wrapper.findComponent(DeleteModal);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findEmptyState = () => wrapper.findComponent(EmptyState);
-  const findTabs = () => wrapper.findAllComponents(GlTab);
   const findAddBtn = () => wrapper.findComponent(GlButton);
-  const findTabsContainer = () => wrapper.findComponent(GlTabs);
   const findListItems = () => wrapper.findAllComponents(ListItem);
 
   function createMockApolloProvider(resolverMock) {
@@ -56,8 +54,6 @@ describe('List', () => {
       },
       stubs: {
         GlLoadingIcon,
-        GlTab,
-        GlTabs,
       },
     });
   }
@@ -77,7 +73,8 @@ describe('List', () => {
 
     it('does not show the other parts of the app', () => {
       expect(findAlert().exists()).toBe(false);
-      expect(findTabsContainer().exists()).toBe(false);
+      expect(findListItems().exists()).toBe(false);
+      expect(findAddBtn().exists()).toBe(false);
       expect(findEmptyState().exists()).toBe(false);
     });
   });
@@ -97,7 +94,8 @@ describe('List', () => {
 
     it('does not show the other parts of the app', () => {
       expect(findLoadingIcon().exists()).toBe(false);
-      expect(findTabsContainer().exists()).toBe(false);
+      expect(findListItems().exists()).toBe(false);
+      expect(findAddBtn().exists()).toBe(false);
       expect(findEmptyState().exists()).toBe(false);
     });
 
@@ -128,7 +126,8 @@ describe('List', () => {
     it('does not show the other parts of the app', () => {
       expect(findAlert().exists()).toBe(false);
       expect(findLoadingIcon().exists()).toBe(false);
-      expect(findTabsContainer().exists()).toBe(false);
+      expect(findListItems().exists()).toBe(false);
+      expect(findAddBtn().exists()).toBe(false);
       expect(findDeleteModal().exists()).toBe(false);
     });
   });
@@ -144,22 +143,6 @@ describe('List', () => {
       expect(findEmptyState().exists()).toBe(false);
     });
 
-    it('shows the tabs', () => {
-      expect(findTabsContainer().exists()).toBe(true);
-      expect(findTabs()).toHaveLength(2);
-    });
-
-    it('shows the all tab', () => {
-      expect(findTabs().at(0).attributes('title')).toBe('All');
-    });
-
-    it('shows the disabled regulated tab', () => {
-      const tab = findTabs().at(1);
-
-      expect(tab.attributes('title')).toBe('Regulated');
-      expect(tab.attributes('disabled')).toBe('true');
-    });
-
     it('shows the add framework button', () => {
       const addBtn = findAddBtn();
 

locale/gitlab.pot

@@ -8055,9 +8055,6 @@ msgstr ""
 msgid "ComplianceFrameworks|Add framework"
 msgstr ""
 
-msgid "ComplianceFrameworks|All"
-msgstr ""
-
 msgid "ComplianceFrameworks|Combines with the CI configuration at runtime."
 msgstr ""
 
@@ -8094,9 +8091,6 @@ msgstr ""
 msgid "ComplianceFrameworks|Once a compliance framework is added it will appear here."
 msgstr ""
 
-msgid "ComplianceFrameworks|Regulated"
-msgstr ""
-
 msgid "ComplianceFrameworks|There are no compliance frameworks set up yet"
 msgstr ""