From 2f34ce5a042d75cddd2ccafa8f81d1730ef4cc71 Mon Sep 17 00:00:00 2001 From: Leon <> Date: Wed, 26 Jan 2022 10:58:34 +0200 Subject: [PATCH] changes --- .../Modals/AddUserModal/AddUserModal.lazy.tsx | 11 --- .../Modals/AddUserModal/AddUserModal.less | 1 - .../Modals/AddUserModal/AddUserModal.sass | 5 ++ .../Modals/AddUserModal/AddUserModal.tsx | 90 +++++++++++++++++-- .../Pages/SettingsPage/SettingsPage.tsx | 2 +- .../SettingsModal/SettingsModal.sass | 28 ------ ui/src/components/UI/SelectList.tsx | 3 +- .../UI/style/FilterableTableAction.sass | 2 +- .../components/UserSettings/UserSettings.tsx | 19 +++- ui/src/components/style/SelectList.sass | 29 ++++++ ui/src/helpers/api.js | 5 ++ 11 files changed, 139 insertions(+), 56 deletions(-) delete mode 100644 ui/src/components/Modals/AddUserModal/AddUserModal.lazy.tsx delete mode 100644 ui/src/components/Modals/AddUserModal/AddUserModal.less create mode 100644 ui/src/components/Modals/AddUserModal/AddUserModal.sass create mode 100644 ui/src/components/style/SelectList.sass diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.lazy.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.lazy.tsx deleted file mode 100644 index b661c6602..000000000 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.lazy.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { lazy, Suspense } from 'react'; - -const LazyAddUserModal = lazy(() => import('./AddUserModal')); - -const AddUserModal = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode;isOpen:boolean }) => ( - - - -); - -export default AddUserModal; diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.less b/ui/src/components/Modals/AddUserModal/AddUserModal.less deleted file mode 100644 index 06dfc9e98..000000000 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.less +++ /dev/null @@ -1 +0,0 @@ -.AddUserModal {} \ No newline at end of file diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass new file mode 100644 index 000000000..99fa4c686 --- /dev/null +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass @@ -0,0 +1,5 @@ +.user__email + width : 301px + +.user__role + width : 186px \ No newline at end of file diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index 7223d7560..b2278f854 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -1,26 +1,98 @@ +import { FormControl, MenuItem, Select } from '@material-ui/core'; import React, { FC, useEffect, useState } from 'react'; +import Api from '../../../helpers/api'; +import { useCommonStyles } from '../../../helpers/commonStyle'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; -import './AddUserModal.less'; +import SelectList from '../../UI/SelectList'; +import './AddUserModal.sass'; -interface AddUserModalProps { - isOpen : boolean +type UserData = { + role:string; + email : string; + workspace : string; } -const AddUserModal: FC = ({isOpen}) => { +interface AddUserModalProps { + isOpen : boolean, + onCloseModal : () => void + userData : UserData; +} + +const api = Api.getInstance(); + +const AddUserModal: FC = ({isOpen, onCloseModal, userData = {}}) => { const [isOpenModal,setIsOpen] = useState(isOpen) + //const [editUserData, setEditUserData] = useState(userData) + const [searchValue, setSearchValue] = useState(""); + //const [userRole,setUserRole] = useState("") + const [workspaces, setWorkspaces] = useState([]) + const roles = [{key:"1",value:"Admin"}] + const classes = useCommonStyles() + + const [userDataModel, setUserData] = useState(userData as UserData) + + // useEffect(() => { + // setIsOpen(isOpen) + // },[isOpen]) useEffect(() => { - setIsOpen(isOpen) - },[isOpen]) + (async () => { + try { + const workspacesList = [{"default":true}] //await api.getWorkspaces() + setWorkspaces(workspacesList) + + } catch (e) { + console.error(e); + } + })(); +},[]) - const onClose = () => {} + useEffect(()=> { + setUserData(userData as UserData) + },[userData]) + + // const onClose = () => { + // setIsOpen(false) + // } const onConfirm = () => {} + const workspaceChange = (newVal) => { + setWorkspaces(newVal); + const data = {...userDataModel, workspace : newVal} + setUserData(data) + } + + const userRoleChange = (e) => { + const data = {...userDataModel, role : e.currentTarget.value} + setUserData(data) + } + return (<> - - + +

DETAILS

+
+ {}}> + + + +
+

WORKSPACE ACCESS

+
+
+ setSearchValue(event.target.value)}/> +
+ +
); }; diff --git a/ui/src/components/Pages/SettingsPage/SettingsPage.tsx b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx index cd6fdceca..d7f467633 100644 --- a/ui/src/components/Pages/SettingsPage/SettingsPage.tsx +++ b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx @@ -10,7 +10,7 @@ const AdminSettings: React.FC = ({color}) => { const [currentTab, setCurrentTab] = useState(TABS[0].tab); return ( -
+
{currentTab === TABS[0].tab && diff --git a/ui/src/components/SettingsModal/SettingsModal.sass b/ui/src/components/SettingsModal/SettingsModal.sass index 863262638..2b27914aa 100644 --- a/ui/src/components/SettingsModal/SettingsModal.sass +++ b/ui/src/components/SettingsModal/SettingsModal.sass @@ -24,31 +24,3 @@ justify-content: flex-end padding: 20px border-top: 2px $data-background-color solid - -.namespacesTable - table - width: 100% - margin-top: 20px - - tbody - max-height: calc(70vh - 355px) - overflow-y: auto - display: block - - th - color: $blue-gray - text-align: left - padding: 10px - - tr - border-bottom-width: 1px - border-bottom-color: $data-background-color - border-bottom-style: solid - display: table - table-layout: fixed - width: 100% - - td - color: $light-gray - padding: 10px - font-size: 16px diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx index 0659de6b2..d00986099 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/ui/src/components/UI/SelectList.tsx @@ -1,5 +1,6 @@ import { useMemo, useState } from "react"; import Checkbox from "./Checkbox" +import '../style/SelectList.sass'; export interface Props { valuesListInput; @@ -64,7 +65,7 @@ const SelectList: React.FC = ({valuesListInput,tableName,multiSelect=true return Object.keys(valuesList).filter((listValue) => listValue.includes(searchValue)); },[valuesList, searchValue]) - return
+ return
{tableHead} diff --git a/ui/src/components/UI/style/FilterableTableAction.sass b/ui/src/components/UI/style/FilterableTableAction.sass index bea6b042b..73ebe4d4c 100644 --- a/ui/src/components/UI/style/FilterableTableAction.sass +++ b/ui/src/components/UI/style/FilterableTableAction.sass @@ -1,7 +1,7 @@ @import '../../../variables.module' .filterable-table - padding: 0 5%; + .actions-header diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx index c25032cbc..90dbe824b 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -4,6 +4,11 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction" import Api from "../../helpers/api" import { useEffect, useState } from "react"; import AddUserModal from "../Modals/AddUserModal/AddUserModal"; +import { Select } from "../UI/Select"; +import { MenuItem } from "@material-ui/core"; +import { settings } from "cluster"; +import { SettingsModal } from "../SettingsModal/SettingModal"; +import OasModal from "../Modals/OasModal/OasModal"; interface Props { @@ -20,12 +25,14 @@ export const UserSettings : React.FC = ({}) => { return val === "Active" ? "status--active" : "status--pending" }}] const [isOpenModal,setIsOpen] = useState(false) + useEffect(() => { (async () => { try { const users = [{userName:"asd",role:"Admin",status:"Active"}]//await api.getUsers() - setUserRows(users) + setUserRows(users) + } catch (e) { console.error(e); } @@ -50,13 +57,17 @@ export const UserSettings : React.FC = ({}) => { // open Edit user Modal } + + const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add User"} + return (<> - - - + {setIsOpen(false)}}> + {/* */} ); } diff --git a/ui/src/components/style/SelectList.sass b/ui/src/components/style/SelectList.sass new file mode 100644 index 000000000..6c15c8d79 --- /dev/null +++ b/ui/src/components/style/SelectList.sass @@ -0,0 +1,29 @@ +@import "../../variables.module" + +.namespacesTable + table + width: 100% + margin-top: 20px + + tbody + max-height: calc(70vh - 355px) + overflow-y: auto + display: block + + th + color: $blue-gray + text-align: left + padding: 10px + + tr + border-bottom-width: 1px + border-bottom-color: $data-background-color + border-bottom-style: solid + display: table + table-layout: fixed + width: 100% + + td + color: $light-gray + padding: 10px + font-size: 16px \ No newline at end of file diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js index 19644d0af..8a48105f0 100644 --- a/ui/src/helpers/api.js +++ b/ui/src/helpers/api.js @@ -53,6 +53,11 @@ export default class Api { return response.data; } + // getRoles = async(filter = "") =>{ + // const response = await this.client.get(`/user/listUsers?usernameFilter=${filter}`); + // return response.data; + // } + getWorkspaces = async() =>{ const response = await this.client.get(``); return response.data;