From eeda33ac5eaabb4c2c2226f6b4158e63ddde77e3 Mon Sep 17 00:00:00 2001
From: Amit Fainholts <amit@up9.com>
Date: Wed, 26 Jan 2022 14:49:21 +0200
Subject: [PATCH] styling added to addworkspacemodal

---
 .../AddWorkspaceModal/AddWorkspaceModal.sass  | 10 ++++
 .../AddWorkspaceModal/AddWorkspaceModal.tsx   | 47 ++++++++++++++++---
 .../WorkspaceSettings/WorkspaceSettings.tsx   | 11 ++---
 3 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass

diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass
new file mode 100644
index 000000000..d5ea7c2aa
--- /dev/null
+++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.sass
@@ -0,0 +1,10 @@
+@import '../../../variables.module.scss'
+
+.workspace__name
+    width: 58%
+
+.searchNamespace
+    width: 32%
+
+.headline
+    color: $font-color
\ No newline at end of file
diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx
index a49d11765..c960ac7d8 100644
--- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx
+++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx
@@ -1,27 +1,62 @@
 import React, { FC, useEffect, useState } from 'react';
+import { useCommonStyles } from '../../../helpers/commonStyle';
 import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
+import SelectList from '../../UI/SelectList';
+import './AddWorkspaceModal.sass'
 // import './AddUserModal.sass';
 
+export type WorkspaceData = {
+    name:string;
+    namespaces: string[];
+  }
+
 interface AddWorkspaceModal {
   isOpen : boolean,
-  onCloseModal: () => void
+  onCloseModal: () => void,
+  workspaceData: WorkspaceData
 }
 
-const AddWorkspaceModal: FC<AddWorkspaceModal> = ({isOpen,onCloseModal,children}) => {
+const AddWorkspaceModal: FC<AddWorkspaceModal> = ({isOpen,onCloseModal, workspaceData ={}}) => {
 
-  const [isOpenModal,setIsOpen] = useState(isOpen)
+  const [isOpenModal,setIsOpen] = useState(isOpen);
+  const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData);
+  const [searchValue, setSearchValue] = useState("");
+  const classes = useCommonStyles()
+  const [namespaces, SetNamespaces] = useState({})
 
   useEffect(() => {
     setIsOpen(isOpen)
   },[isOpen])
 
-  const onClose = () => {}
+  useEffect(() => {
+    (async () => {
+        try {
+            const namespacesList = {"default": false, "blabla": false, "test":true};
+            SetNamespaces(namespacesList)    
+                          
+        } catch (e) {
+            console.error(e);
+        }
+    })();
+},[])
 
   const onConfirm = () => {}
 
   return (<>
-    <ConfirmationModal isOpen={isOpenModal} onClose={onClose} onConfirm={onConfirm} title=''>
-      {children}
+    <ConfirmationModal isOpen={isOpenModal} onClose={onCloseModal} onConfirm={onConfirm} title='Add Workspace'>
+    <h3 className='headline'>DETAILS</h3>
+      <div>
+        <input type="text" value={workspaceDataModel?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} 
+               onChange={(e) => {}}></input>
+        </div>
+        <h3 className='headline'>TAP SETTINGS</h3>     
+      <div className="namespacesSettingsContainer">
+        <div>
+            <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
+                    onChange={(event) => setSearchValue(event.target.value)}/>
+        </div>
+        <SelectList valuesListInput={namespaces} tableName={"Namespaces"} multiSelect={true} searchValue={searchValue} setValues={setUserData} tabelClassName={undefined}></SelectList>
+            </div>
     </ConfirmationModal>
     </>); 
 };
diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx
index 0df387d8a..2cb8f3c1b 100644
--- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx
+++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx
@@ -2,7 +2,7 @@ import "../UserSettings/UserSettings.sass"
 import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
 // import Api from "../../helpers/api"
 import { useEffect, useState } from "react";
-import AddWorkspaceModal from "../Modals/AddWorkspaceModal/AddWorkspaceModal";
+import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal";
 import SelectList from "../UI/SelectList";
 
 interface Props {}
@@ -12,11 +12,10 @@ interface Props {}
 export const WorkspaceSettings : React.FC<Props> = ({}) => {
 
     const [workspacesRows, setWorkspaces] = useState([]);
+    const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData);
     const [isOpenModal,setIsOpen] = useState(false);
     const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}];
 
-    const namespaces = {"default": false, "blabla": false, "test":true};
-
 
     useEffect(() => {
         (async () => {
@@ -50,10 +49,8 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                                buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}>
         </FilterableTableAction>
-        <AddWorkspaceModal isOpen={isOpenModal} onCloseModal={() => { setIsOpen(false); } }>
-            <SelectList valuesListInput={namespaces} tableName={"Namespaces"} multiSelect={false} setValues={function (newValues: any): void {
-                throw new Error("Function not implemented.");
-            } } tabelClassName={undefined}></SelectList>
+        <AddWorkspaceModal isOpen={isOpenModal} workspaceData={workspaceData} onCloseModal={() => { setIsOpen(false); } } >
+
             
         </AddWorkspaceModal>
     </>);