Merge pull request #4629 from FlowFuse/fix-admin-actions-alignment

Fix admin action tabs alignment
FlowFuse · Oct 10, 2024 · 091eeaa · 091eeaa
2 parents 48ca06b + 22c53e5
commit 091eeaa
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/frontend/src/pages/admin/Settings/index.vue b/frontend/src/pages/admin/Settings/index.vue
@@ -1,26 +1,27 @@
 <template>
-    <SectionTopMenu hero="Settings" :options="sideNavigation" />
-    <div class="flex-grow">
-        <router-view />
+    <div class="clear-page-gutters">
+        <div class="ff-instance-header">
+            <ff-page-header title="Settings" :tabs="sideNavigation" />
+        </div>
+        <div class="px-3 py-3 md:px-6 md:py-6">
+            <div class="flex-grow">
+                <router-view />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 
-import SectionTopMenu from '../../../components/SectionTopMenu.vue'
-
 export default {
     name: 'AdminSettings',
-    components: {
-        SectionTopMenu
-    },
     data () {
         return {
             sideNavigation: [
-                { name: 'General', path: './general' },
-                { name: 'License', path: './license' },
-                { name: 'Email', path: './email' }
+                { label: 'General', to: './general', tag: 'general' },
+                { label: 'License', to: './license', tag: 'license' },
+                { label: 'Email', to: './email', tag: 'email' }
             ]
         }
     },
@@ -29,8 +30,14 @@ export default {
     },
     mounted () {
         if (this.features.sso) {
-            this.sideNavigation.push({ name: 'SSO', path: './sso' })
+            this.sideNavigation.push({ label: 'SSO', to: './sso' })
         }
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.clear-page-gutters {
+    margin: -1.75rem
+}
+</style>
diff --git a/frontend/src/pages/admin/Users/index.vue b/frontend/src/pages/admin/Users/index.vue
@@ -1,28 +1,35 @@
 <template>
-    <SectionTopMenu hero="Users" :options="sideNavigation" />
-    <div class="flex-grow">
-        <router-view />
+    <div class="clear-page-gutters">
+        <div class="ff-instance-header">
+            <ff-page-header title="Users" :tabs="sideNavigation" />
+        </div>
+        <div class="px-3 py-3 md:px-6 md:py-6">
+            <div class="flex-grow">
+                <router-view />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 
-import SectionTopMenu from '../../../components/SectionTopMenu.vue'
-
 const sideNavigation = [
-    { name: 'Users', path: './general' },
-    { name: 'Invitations', path: './invitations' }
+    { label: 'Users', to: './general' },
+    { label: 'Invitations', to: './invitations' }
 ]
 
 export default {
     name: 'AdminUsers',
-    components: {
-        SectionTopMenu
-    },
     setup () {
         return {
             sideNavigation
         }
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.clear-page-gutters {
+    margin: -1.75rem
+}
+</style>
diff --git a/test/e2e/frontend/cypress/tests/admin.spec.js b/test/e2e/frontend/cypress/tests/admin.spec.js
@@ -39,7 +39,7 @@ describe('FlowFuse platform admin users', () => {
 
         cy.get('#platform-sidenav [data-nav="admin-settings"]').click()
 
-        cy.get('[data-nav="section-license"]').click()
+        cy.get('[data-nav="license"]').click()
 
         cy.get('[data-form="update-licence"]').click()
 
@@ -52,7 +52,7 @@ describe('FlowFuse platform admin users', () => {
         cy.get('[data-form="submit"]').click()
 
         // Back to license screen
-        cy.get('[data-el="license-details"]').should('exist')
+        cy.get('[data-nav="license"]').should('exist')
     })
 
     it("can view applications and instances from teams they're not a member of", () => {