From 00b2996a922333d9db235bb9b87db3aaaa1b6988 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 22 Jul 2022 22:27:14 +0530
Subject: [PATCH 1/6] refactor/gui-v2-settings-modal-added

---
 packages/nc-gui-v2/components.d.ts            |   2 +-
 .../dashboard/settings/AuditTab.vue           |  44 +++---
 .../dashboard/settings/SettingsModal.vue      | 147 ++++++++++++++++++
 packages/nc-gui-v2/package.json               |   1 +
 4 files changed, 172 insertions(+), 22 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 598349f0f6..1bdea8dc28 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -50,4 +50,4 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
-}
+}
\ No newline at end of file
diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 66f17fcc67..8ac63e235d 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -45,35 +45,36 @@ async function loadAudits(page = currentPage, limit = currentLimit) {
 
 onMounted(async () => {
   if (audits === null) {
-    await loadProject(projectId)
     await loadAudits(currentPage, currentLimit)
   }
 })
 
+const tableHeaderRenderer = (label: string) => (value: { text: string }) => h('div', { class: 'text-gray-500' }, label)
+
 const columns = [
   {
-    title: 'Operation Type',
+    title: tableHeaderRenderer('Operation Type'),
     dataIndex: 'op_type',
     key: 'op_type',
   },
   {
-    title: 'Operation sub-type',
+    title: tableHeaderRenderer('Operation sub-type'),
     dataIndex: 'op_sub_type',
     key: 'op_sub_type',
   },
   {
-    title: 'Description',
+    title: tableHeaderRenderer('Description'),
     dataIndex: 'description',
     key: 'description',
   },
   {
-    title: 'User',
+    title: tableHeaderRenderer('User'),
     dataIndex: 'user',
     key: 'user',
-    customRender: (value: { text: string }) => h('div', () => value.text || 'Shared base'),
+    customRender: (value: { text: string }) => h('div', {}, value.text || 'Shared base'),
   },
   {
-    title: 'Created',
+    title: tableHeaderRenderer('Created'),
     dataIndex: 'created_at',
     key: 'created_at',
     sort: 'desc',
@@ -85,21 +86,22 @@ const columns = [
 
 <template>
   <div class="flex flex-col gap-4 w-full">
-    <a-button class="self-start" @click="loadAudits">
-      <div class="flex items-center gap-2">
-        <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
-        Reload
-      </div>
-    </a-button>
+    <div class="flex flex-row justify-between items-center">
+      <a-button class="self-start" @click="loadAudits">
+        <div class="flex items-center gap-2 text-gray-600 font-light">
+          <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+          Reload
+        </div>
+      </a-button>
+      <a-pagination
+        v-model:current="currentPage"
+        :page-size="currentLimit"
+        :total="totalRows"
+        show-less-items
+        @change="loadAudits"
+      />
+    </div>
 
     <a-table class="w-full" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
-
-    <a-pagination
-      v-model:current="currentPage"
-      :page-size="currentLimit"
-      :total="totalRows"
-      show-less-items
-      @change="loadAudits"
-    />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
new file mode 100644
index 0000000000..496dac8f55
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { FunctionalComponent, SVGAttributes, VNode } from 'vue'
+import AuditTab from './AuditTab.vue'
+import StoreFrontOutline from '~icons/mdi/storefront-outline'
+import TeamFillIcon from '~icons/ri/team-fill'
+import MultipleTableIcon from '~icons/mdi/table-multiple'
+import NootbookOutline from '~icons/mdi/notebook-outline'
+
+interface Props {
+  show: boolean
+}
+
+interface SubTabGroup {
+  [key: string]: {
+    title: string
+    body: any
+  }
+}
+
+interface TabGroup {
+  [key: string]: {
+    title: string
+    icon: FunctionalComponent<SVGAttributes, {}>
+    subTabs: SubTabGroup
+  }
+}
+
+const { show } = defineProps<Props>()
+
+const emits = defineEmits(['closed'])
+
+const tabsInfo: TabGroup = {
+  teamAndAuth: {
+    title: 'Team and Auth',
+    icon: TeamFillIcon,
+    subTabs: {
+      usersManagement: {
+        title: 'Users Management',
+        body: () => AuditTab,
+      },
+      apiTokenManagement: {
+        title: 'API Token Management',
+        body: () => AuditTab,
+      },
+    },
+  },
+  appStore: {
+    title: 'App Store',
+    icon: StoreFrontOutline,
+    subTabs: {
+      new: {
+        title: 'Apps',
+        body: () => AuditTab,
+      },
+    },
+  },
+  metaData: {
+    title: 'Project Metadata',
+    icon: MultipleTableIcon,
+    subTabs: {
+      metaData: {
+        title: 'Metadata',
+        body: () => AuditTab,
+      },
+      acl: {
+        title: 'UI Access Control',
+        body: () => AuditTab,
+      },
+    },
+  },
+  audit: {
+    title: 'Audit',
+    icon: NootbookOutline,
+    subTabs: {
+      audit: {
+        title: 'Audit',
+        body: () => AuditTab,
+      },
+    },
+  },
+}
+
+const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
+
+// Array of keys of tabs which are selected. In our case will be only one.
+const selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
+const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
+
+let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
+const selectedSubTab = $computed(() => {
+  const isSubTabInSelectedTab = (subTab: any) => subTab in selectedTab.subTabs
+
+  // Select the first subtab
+  const currentlySelectedSubTabKey = selectedSubTabKeys[0]
+  const subTabKey = isSubTabInSelectedTab(currentlySelectedSubTabKey)
+    ? currentlySelectedSubTabKey
+    : firstKeyOfObject(selectedTab.subTabs)
+
+  if (subTabKey !== selectedSubTabKeys[0]) {
+    selectedSubTabKeys = [subTabKey]
+  }
+
+  return selectedTab.subTabs[subTabKey]
+})
+</script>
+
+<template>
+  <a-modal :footer="null" :visible="show" width="max(90vw, 600px)" @cancel="emits('closed')">
+    <a-typography-title class="ml-4 mb-2 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
+    <a-layout class="mt-3 modal-body">
+      <!-- Side tabs -->
+      <a-layout-sider theme="light">
+        <a-menu v-model:selectedKeys="selectedTabKeys" class="h-full" mode="inline" :open-keys="[]">
+          <a-menu-item v-for="(tab, key) of tabsInfo" :key="key">
+            <div class="flex flex-row items-center space-x-2">
+              <component :is="tab.icon" class="flex" />
+              <div class="flex select-none">
+                {{ tab.title }}
+              </div>
+            </div>
+          </a-menu-item>
+        </a-menu>
+      </a-layout-sider>
+
+      <!-- Sub Tabs -->
+      <a-layout-content class="h-full px-4">
+        <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
+          <a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="select-none">
+            {{ tab.title }}
+          </a-menu-item>
+        </a-menu>
+
+        <component :is="selectedSubTab.body()" class="px-2 py-6" />
+      </a-layout-content>
+    </a-layout>
+  </a-modal>
+</template>
+
+<style scoped>
+.modal-body {
+  height: 70vh;
+}
+::-webkit-scrollbar-thumb {
+  width: 8px;
+  background-color: darkgrey;
+}
+</style>
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 62b794d2e4..359b6a0d18 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -30,6 +30,7 @@
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
+    "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
     "@types/sortablejs": "^1.13.0",
     "@vitejs/plugin-vue": "^2.3.3",

From 472b1bf4233a6429df93dd09295432e356064a95 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 23 Jul 2022 11:08:52 +0530
Subject: [PATCH 2/6] refactor/gui-v2-settings-modal-minor-cleanup

---
 .../dashboard/settings/SettingsModal.vue           | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
index 496dac8f55..e56d1e8ae8 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FunctionalComponent, SVGAttributes, VNode } from 'vue'
+import type { FunctionalComponent, SVGAttributes } from 'vue'
 import AuditTab from './AuditTab.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
@@ -96,12 +96,15 @@ const selectedSubTab = $computed(() => {
     ? currentlySelectedSubTabKey
     : firstKeyOfObject(selectedTab.subTabs)
 
-  if (subTabKey !== selectedSubTabKeys[0]) {
-    selectedSubTabKeys = [subTabKey]
-  }
-
   return selectedTab.subTabs[subTabKey]
 })
+
+watch(
+  () => selectedTabKeys[0],
+  (newTabKey) => {
+    selectedSubTabKeys = [firstKeyOfObject(tabsInfo[newTabKey].subTabs)]
+  },
+)
 </script>
 
 <template>
@@ -141,7 +144,6 @@ const selectedSubTab = $computed(() => {
   height: 70vh;
 }
 ::-webkit-scrollbar-thumb {
-  width: 8px;
   background-color: darkgrey;
 }
 </style>

From a5d4429e6dd100a348fa0a8fbba2d0a275ab6bd3 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 23 Jul 2022 11:14:21 +0530
Subject: [PATCH 3/6] 
 refactor/gui-v2-removed-project-id-prop-from-settings-modal

---
 .../nc-gui-v2/components/dashboard/settings/AuditTab.vue  | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 8ac63e235d..18045ead4f 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -5,14 +5,8 @@ import { timeAgo } from '~/utils/dateTimeUtils'
 import { h, useNuxtApp, useProject } from '#imports'
 import MdiReload from '~icons/mdi/reload'
 
-interface Props {
-  projectId: string
-}
-
-const { projectId } = defineProps<Props>()
-
 const { $api } = useNuxtApp()
-const { project, loadProject } = useProject()
+const { project } = useProject()
 
 let isLoading = $ref(false)
 

From f6cf44029d82577174825bb7becd65df0dc16444 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 23 Jul 2022 11:17:28 +0530
Subject: [PATCH 4/6] refactor/gui-v2-settings-modal-minor-cleanup

---
 .../components/dashboard/settings/SettingsModal.vue  | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
index e56d1e8ae8..b894442a9e 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -87,17 +87,7 @@ const selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
 const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
 
 let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
-const selectedSubTab = $computed(() => {
-  const isSubTabInSelectedTab = (subTab: any) => subTab in selectedTab.subTabs
-
-  // Select the first subtab
-  const currentlySelectedSubTabKey = selectedSubTabKeys[0]
-  const subTabKey = isSubTabInSelectedTab(currentlySelectedSubTabKey)
-    ? currentlySelectedSubTabKey
-    : firstKeyOfObject(selectedTab.subTabs)
-
-  return selectedTab.subTabs[subTabKey]
-})
+const selectedSubTab = $computed(() => selectedTab.subTabs[selectedSubTabKeys[0]])
 
 watch(
   () => selectedTabKeys[0],

From 5e9b17eb0428aba974ff9d04dd533f65652101c5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 25 Jul 2022 16:36:13 +0530
Subject: [PATCH 5/6] 
 refactor/gui-v2-settings-modal-rebase-issues-solved-and-pr-reviews-followed

---
 packages/nc-gui-v2/components.d.ts            |  3 ++-
 .../components/dashboard/TreeView.vue         |  3 ++-
 .../dashboard/settings/AuditTab.vue           |  2 +-
 .../dashboard/settings/SettingsModal.vue      |  2 +-
 packages/nc-gui-v2/package-lock.json          | 19 +++++++++++++++++++
 5 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 1bdea8dc28..5e5f7425e2 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -46,8 +46,9 @@ declare module '@vue/runtime-core' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
-}
\ No newline at end of file
+}
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index ee49e992ae..37d97671bf 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -19,6 +19,7 @@ import MdiPlus from '~icons/mdi/plus-circle-outline'
 import MdiDrag from '~icons/mdi/drag-vertical'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiAPIDocIcon from '~icons/mdi/open-in-new'
+import SettingsModal from '~/components/dashboard/settings/SettingsModal.vue'
 
 const { addTab } = useTabs()
 const toast = useToast()
@@ -290,7 +291,7 @@ const addTableTab = (table: TableType) => {
       <span> {{ $t('title.teamAndSettings') }}</span>
     </div>
 
-    <a-modal v-model:visible="settingsDlg" width="max(90vw, 600px)"> Team and settings</a-modal>
+    <SettingsModal :show="settingsDlg" @closed="settingsDlg = false" />
     <DlgTableCreate v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 18045ead4f..a11e763013 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -43,7 +43,7 @@ onMounted(async () => {
   }
 })
 
-const tableHeaderRenderer = (label: string) => (value: { text: string }) => h('div', { class: 'text-gray-500' }, label)
+const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gray-500' }, label)
 
 const columns = [
   {
diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
index b894442a9e..38807b799e 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -131,7 +131,7 @@ watch(
 
 <style scoped>
 .modal-body {
-  height: 70vh;
+  @apply h-[70vh];
 }
 ::-webkit-scrollbar-thumb {
   background-color: darkgrey;
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 7f1dbc4ea1..f55e71ed2e 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -24,6 +24,7 @@
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
+        "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^4.0.0",
         "@types/sortablejs": "^1.13.0",
         "@vitejs/plugin-vue": "^2.3.3",
@@ -986,6 +987,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/ri": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
+      "integrity": "sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -14919,6 +14929,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/ri": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
+      "integrity": "sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",

From 5bef422509f3bca655137169fca735673b6cbf11 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 25 Jul 2022 16:40:41 +0530
Subject: [PATCH 6/6] refactor/gui-v2-settings-modal-pr-reviews-followed

---
 .../components/dashboard/settings/SettingsModal.vue          | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
index 38807b799e..f7f7456c17 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
@@ -116,7 +116,7 @@ watch(
       </a-layout-sider>
 
       <!-- Sub Tabs -->
-      <a-layout-content class="h-full px-4">
+      <a-layout-content class="h-full px-4 scrollbar-thumb-gray-500">
         <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
           <a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="select-none">
             {{ tab.title }}
@@ -133,7 +133,4 @@ watch(
 .modal-body {
   @apply h-[70vh];
 }
-::-webkit-scrollbar-thumb {
-  background-color: darkgrey;
-}
 </style>