Remove the regulated tab from compliance frameworks list

Removes the tab structure from the compliance frameworks list and moves
the Add framework button from the top to the bottom of the list.

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/64690
EE: true

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

@@ -8052,9 +8052,6 @@ msgstr ""
 msgid "ComplianceFrameworks|Add framework"
 msgstr ""
 
-msgid "ComplianceFrameworks|All"
-msgstr ""
-
 msgid "ComplianceFrameworks|Combines with the CI configuration at runtime."
 msgstr ""
 
@@ -8091,9 +8088,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 ""