From da9bbd848e04c126023ef3704d7e273bc74e479a Mon Sep 17 00:00:00 2001
From: Amit Fainholts <amit@up9.com>
Date: Tue, 25 Jan 2022 10:05:25 +0200
Subject: [PATCH 1/3] basic tabs component added

---
 .../AdminSettings/AdminSettings.tsx           | 15 ++++++++
 ui/src/components/UI/BasicTab/BasicTabs.tsx   | 37 +++++++++++++++++++
 ui/src/components/UI/BasicTab/Tab.tsx         | 11 ++++++
 ui/src/components/UI/BasicTab/TabTitle.tsx    | 29 +++++++++++++++
 .../components/UI/style/BasicTabs.module.sass | 33 +++++++++++++++++
 5 files changed, 125 insertions(+)
 create mode 100644 ui/src/components/AdminSettings/AdminSettings.tsx
 create mode 100644 ui/src/components/UI/BasicTab/BasicTabs.tsx
 create mode 100644 ui/src/components/UI/BasicTab/Tab.tsx
 create mode 100644 ui/src/components/UI/BasicTab/TabTitle.tsx
 create mode 100644 ui/src/components/UI/style/BasicTabs.module.sass

diff --git a/ui/src/components/AdminSettings/AdminSettings.tsx b/ui/src/components/AdminSettings/AdminSettings.tsx
new file mode 100644
index 000000000..8937d0f5a
--- /dev/null
+++ b/ui/src/components/AdminSettings/AdminSettings.tsx
@@ -0,0 +1,15 @@
+import BasicTabs from "../UI/BasicTab/BasicTabs";
+import Tab from "../UI/BasicTab/Tab";
+
+const AdminSettings: React.FC = () => {
+  return (
+      <div style={{overflowY:"auto", height:"100%", backgroundColor:"white",color:"$494677",borderRadius:"4px",padding:"10px",position:"relative",display: 'inline-block',}}>
+        <BasicTabs>
+            <Tab title="USERS">USERS</Tab>
+            <Tab title="WORKSPACE">WORKSPACE</Tab>
+        </BasicTabs>
+    </div>
+  )
+}
+
+export default AdminSettings;
\ No newline at end of file
diff --git a/ui/src/components/UI/BasicTab/BasicTabs.tsx b/ui/src/components/UI/BasicTab/BasicTabs.tsx
new file mode 100644
index 000000000..e04ed8eaf
--- /dev/null
+++ b/ui/src/components/UI/BasicTab/BasicTabs.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement, useState } from "react";
+import TabTitle from "./TabTitle";
+import styles from '../style/BasicTabs.module.sass'
+
+
+type Props = {
+  children: ReactElement[]
+}
+
+const Tabs: React.FC<Props> = ({ children }) => {
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  return (
+    <div>
+      <ul style={{"display":"flex","justifyContent":"space-between", listStyleType:"none"}}>
+        {children.map((item, index) => {
+          <TabTitle
+            key={index}
+            title={item.props.title}
+            index={index}
+            setSelectedTab={setSelectedTab}
+          />
+          {<span style={{    
+            cursor: "unset",
+            height: "20px",
+            margin: "0 20px",
+            borderRight: "1px solid #303f9f",
+            verticalAlign: "middle"
+            }}></span>}
+    })}
+      </ul>
+      {children[selectedTab]}
+    </div>
+  )
+}
+
+export default Tabs
\ No newline at end of file
diff --git a/ui/src/components/UI/BasicTab/Tab.tsx b/ui/src/components/UI/BasicTab/Tab.tsx
new file mode 100644
index 000000000..3263858a6
--- /dev/null
+++ b/ui/src/components/UI/BasicTab/Tab.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+type Props = {
+  title: string
+}
+
+const Tab: React.FC<Props> = ({ children }) => {
+  return <div >{children}</div>
+}
+
+export default Tab
\ No newline at end of file
diff --git a/ui/src/components/UI/BasicTab/TabTitle.tsx b/ui/src/components/UI/BasicTab/TabTitle.tsx
new file mode 100644
index 000000000..d89e95ea9
--- /dev/null
+++ b/ui/src/components/UI/BasicTab/TabTitle.tsx
@@ -0,0 +1,29 @@
+import React, { useCallback } from "react"
+
+type Props = {
+  title: string
+  index: number
+  setSelectedTab: (index: number) => void
+}
+
+const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index }) => {
+
+  const onClick = useCallback(() => {
+    setSelectedTab(index)
+  }, [setSelectedTab, index])
+
+  return (
+    <li style={{color: "rgb(32,92,245" ,cursor:"pointer"}}>
+      <div onClick={onClick}>{title}</div>
+      <span style={{    
+              cursor: "unset",
+              height: "20px",
+              margin: "0 20px",
+              borderRight: "1px solid #303f9f",
+              verticalAlign: "middle"
+          }}></span>
+    </li>
+  )
+}
+
+export default TabTitle
\ No newline at end of file
diff --git a/ui/src/components/UI/style/BasicTabs.module.sass b/ui/src/components/UI/style/BasicTabs.module.sass
new file mode 100644
index 000000000..cffb89719
--- /dev/null
+++ b/ui/src/components/UI/style/BasicTabs.module.sass
@@ -0,0 +1,33 @@
+@import '../../../variables.module'
+    
+.root
+    height: 40%
+    paddingTop: 15px
+
+.tab
+    display: 'inline-block'
+    textTransform: 'uppercase'
+    color: $blue-color
+    cursor: 'pointer'
+
+.tabsAlignLeft
+    textAlign: 'left'
+
+.active
+    color: $font-color
+    cursor: 'unset'
+    borderBottom: "2px solid " + $font-color
+    paddingBottom: 6
+
+    &.dark
+
+.disabled
+
+.highlight
+
+.separator
+    borderRight: "1px solid " + 'black'
+    height: 20
+    verticalAlign: 'middle'
+    margin: '0 20px'
+    cursor: 'unset'

From 16449305163835598e5aa036cdf1081cc455f0a6 Mon Sep 17 00:00:00 2001
From: Amit Fainholts <amit@up9.com>
Date: Tue, 25 Jan 2022 11:50:12 +0200
Subject: [PATCH 2/3] remove new basicTabs

---
 .../AdminSettings/AdminSettings.tsx           | 24 ++++++------
 ui/src/components/Header/EntHeader.tsx        |  4 +-
 ui/src/components/UI/BasicTab/BasicTabs.tsx   | 37 -------------------
 ui/src/components/UI/BasicTab/Tab.tsx         | 11 ------
 ui/src/components/UI/BasicTab/TabTitle.tsx    | 29 ---------------
 .../components/UI/style/BasicTabs.module.sass | 33 -----------------
 6 files changed, 16 insertions(+), 122 deletions(-)
 delete mode 100644 ui/src/components/UI/BasicTab/BasicTabs.tsx
 delete mode 100644 ui/src/components/UI/BasicTab/Tab.tsx
 delete mode 100644 ui/src/components/UI/BasicTab/TabTitle.tsx
 delete mode 100644 ui/src/components/UI/style/BasicTabs.module.sass

diff --git a/ui/src/components/AdminSettings/AdminSettings.tsx b/ui/src/components/AdminSettings/AdminSettings.tsx
index 8937d0f5a..9c036a16e 100644
--- a/ui/src/components/AdminSettings/AdminSettings.tsx
+++ b/ui/src/components/AdminSettings/AdminSettings.tsx
@@ -1,15 +1,17 @@
-import BasicTabs from "../UI/BasicTab/BasicTabs";
-import Tab from "../UI/BasicTab/Tab";
+import { useState } from "react";
+import Tabs from "../UI/Tabs"
 
-const AdminSettings: React.FC = () => {
-  return (
-      <div style={{overflowY:"auto", height:"100%", backgroundColor:"white",color:"$494677",borderRadius:"4px",padding:"10px",position:"relative",display: 'inline-block',}}>
-        <BasicTabs>
-            <Tab title="USERS">USERS</Tab>
-            <Tab title="WORKSPACE">WORKSPACE</Tab>
-        </BasicTabs>
+const AdminSettings: React.FC<any> = ({color}) => {
+    var TABS = [
+        {tab:"USERS"}, {tab:"WORKSPACE"}
+    ];
+    
+    const [currentTab, setCurrentTab] = useState(TABS[0].tab);
+    return (
+        <div style={{padding:" 0 1rem"}}>
+        <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned/>
     </div>
-  )
-}
+    )
+  }
 
 export default AdminSettings;
\ No newline at end of file
diff --git a/ui/src/components/Header/EntHeader.tsx b/ui/src/components/Header/EntHeader.tsx
index b67e76d01..03507c308 100644
--- a/ui/src/components/Header/EntHeader.tsx
+++ b/ui/src/components/Header/EntHeader.tsx
@@ -11,6 +11,7 @@ import Api from "../../helpers/api";
 import {toast} from "react-toastify";
 import {useSetRecoilState} from "recoil";
 import entPageAtom, {Page} from "../../recoil/entPage";
+import AdminSettings from "../AdminSettings/AdminSettings";
 
 const api = Api.getInstance();
 
@@ -44,7 +45,8 @@ export const EntHeader: React.FC<EntHeaderProps> = ({isFirstLogin, setIsFirstLog
             <img className="headerIcon" alt="settings" src={settingImg} style={{marginRight: 25}} onClick={() => setIsSettingsModalOpen(true)}/>
             <ProfileButton/>
         </div>
-        <SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} isFirstLogin={isFirstLogin}/>
+        {/* <SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} isFirstLogin={isFirstLogin}/> */}
+        {/* <AdminSettings isOpen={isSettingsModalOpen} onClose={onSettingsModalClose}/> */}
     </div>;
 }
 
diff --git a/ui/src/components/UI/BasicTab/BasicTabs.tsx b/ui/src/components/UI/BasicTab/BasicTabs.tsx
deleted file mode 100644
index e04ed8eaf..000000000
--- a/ui/src/components/UI/BasicTab/BasicTabs.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { ReactElement, useState } from "react";
-import TabTitle from "./TabTitle";
-import styles from '../style/BasicTabs.module.sass'
-
-
-type Props = {
-  children: ReactElement[]
-}
-
-const Tabs: React.FC<Props> = ({ children }) => {
-  const [selectedTab, setSelectedTab] = useState(0);
-
-  return (
-    <div>
-      <ul style={{"display":"flex","justifyContent":"space-between", listStyleType:"none"}}>
-        {children.map((item, index) => {
-          <TabTitle
-            key={index}
-            title={item.props.title}
-            index={index}
-            setSelectedTab={setSelectedTab}
-          />
-          {<span style={{    
-            cursor: "unset",
-            height: "20px",
-            margin: "0 20px",
-            borderRight: "1px solid #303f9f",
-            verticalAlign: "middle"
-            }}></span>}
-    })}
-      </ul>
-      {children[selectedTab]}
-    </div>
-  )
-}
-
-export default Tabs
\ No newline at end of file
diff --git a/ui/src/components/UI/BasicTab/Tab.tsx b/ui/src/components/UI/BasicTab/Tab.tsx
deleted file mode 100644
index 3263858a6..000000000
--- a/ui/src/components/UI/BasicTab/Tab.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-type Props = {
-  title: string
-}
-
-const Tab: React.FC<Props> = ({ children }) => {
-  return <div >{children}</div>
-}
-
-export default Tab
\ No newline at end of file
diff --git a/ui/src/components/UI/BasicTab/TabTitle.tsx b/ui/src/components/UI/BasicTab/TabTitle.tsx
deleted file mode 100644
index d89e95ea9..000000000
--- a/ui/src/components/UI/BasicTab/TabTitle.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useCallback } from "react"
-
-type Props = {
-  title: string
-  index: number
-  setSelectedTab: (index: number) => void
-}
-
-const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index }) => {
-
-  const onClick = useCallback(() => {
-    setSelectedTab(index)
-  }, [setSelectedTab, index])
-
-  return (
-    <li style={{color: "rgb(32,92,245" ,cursor:"pointer"}}>
-      <div onClick={onClick}>{title}</div>
-      <span style={{    
-              cursor: "unset",
-              height: "20px",
-              margin: "0 20px",
-              borderRight: "1px solid #303f9f",
-              verticalAlign: "middle"
-          }}></span>
-    </li>
-  )
-}
-
-export default TabTitle
\ No newline at end of file
diff --git a/ui/src/components/UI/style/BasicTabs.module.sass b/ui/src/components/UI/style/BasicTabs.module.sass
deleted file mode 100644
index cffb89719..000000000
--- a/ui/src/components/UI/style/BasicTabs.module.sass
+++ /dev/null
@@ -1,33 +0,0 @@
-@import '../../../variables.module'
-    
-.root
-    height: 40%
-    paddingTop: 15px
-
-.tab
-    display: 'inline-block'
-    textTransform: 'uppercase'
-    color: $blue-color
-    cursor: 'pointer'
-
-.tabsAlignLeft
-    textAlign: 'left'
-
-.active
-    color: $font-color
-    cursor: 'unset'
-    borderBottom: "2px solid " + $font-color
-    paddingBottom: 6
-
-    &.dark
-
-.disabled
-
-.highlight
-
-.separator
-    borderRight: "1px solid " + 'black'
-    height: 20
-    verticalAlign: 'middle'
-    margin: '0 20px'
-    cursor: 'unset'

From 5d6f53409c3e9aaab2386872ee57fbfac62c15ab Mon Sep 17 00:00:00 2001
From: Amit Fainholts <amit@up9.com>
Date: Tue, 25 Jan 2022 12:15:32 +0200
Subject: [PATCH 3/3] added settings page

---
 ui/src/components/Header/EntHeader.tsx                          | 2 +-
 .../AdminSettings.tsx => Pages/SettingsPage/SettingsPage.tsx}   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename ui/src/components/{AdminSettings/AdminSettings.tsx => Pages/SettingsPage/SettingsPage.tsx} (92%)

diff --git a/ui/src/components/Header/EntHeader.tsx b/ui/src/components/Header/EntHeader.tsx
index 947c01d05..9d0e9dc1f 100644
--- a/ui/src/components/Header/EntHeader.tsx
+++ b/ui/src/components/Header/EntHeader.tsx
@@ -11,7 +11,7 @@ import Api from "../../helpers/api";
 import {toast} from "react-toastify";
 import {useSetRecoilState} from "recoil";
 import entPageAtom, {Page} from "../../recoil/entPage";
-import AdminSettings from "../AdminSettings/AdminSettings";
+import AdminSettings from "../Pages/SettingsPage/SettingsPage";
 import {useNavigate} from "react-router-dom";
 
 const api = Api.getInstance();
diff --git a/ui/src/components/AdminSettings/AdminSettings.tsx b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx
similarity index 92%
rename from ui/src/components/AdminSettings/AdminSettings.tsx
rename to ui/src/components/Pages/SettingsPage/SettingsPage.tsx
index 9c036a16e..5fd55e170 100644
--- a/ui/src/components/AdminSettings/AdminSettings.tsx
+++ b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import Tabs from "../UI/Tabs"
+import Tabs from "../../UI/Tabs"
 
 const AdminSettings: React.FC<any> = ({color}) => {
     var TABS = [