Merge branch 'origin/ui/TRA-4204_user_managment' of github.com:up9inc/mizu into feature/ui/TRA-4192_workspace_management

# Conflicts: # ui/src/components/Modals/AddUserModal/AddUserModal.tsx # ui/src/components/UserSettings/UserSettings.tsx
2025-09-26 04:54:36 +00:00 · 2022-01-27 11:45:29 +02:00
parent 5aa16eaf56 9c45d63237
commit 5bd40a6581
6 changed files with 153 additions and 46 deletions
--- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass
+++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass
@@ -9,6 +9,21 @@
        background-size: 26px
        margin-right: 10px

+.invite-link
+    &-row
+        display: flex
+        justify-content: space-between
+        align-items: center
+        align-content: center
+
+        & .done-btn
+            box-sizing: border-box
+            height: 30px
+            width: 78px
+
+    &-field
+        width: 80%
+        max-width: 435px

 .generate-link-button
    &:disabled
@@ -21,10 +36,6 @@
        @include generate-icon
        background-image: url('../../assets/copy-enabled.svg')
        
-
-        
-
-
 .user
    &__details
        display: flex;
@@ -35,6 +46,10 @@

        & .user__email
            width : 40%
+            height: 30px;
+            box-sizing: border-box;

        & .user__role
            width : 40%
+
+
--- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
+++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
@@ -1,4 +1,4 @@
-import { Button, FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select } from '@material-ui/core';
 import { FC, useEffect, useState } from 'react';
 import Api from '../../../helpers/api';
 import { useCommonStyles } from '../../../helpers/commonStyle';
@@ -6,10 +6,11 @@ import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
 import SelectList from '../../UI/SelectList';
 import './AddUserModal.sass';
 import spinner from "../../assets/spinner.svg";
+import { useForm,Controller } from "react-hook-form";

 export type UserData = {
  role:string;
-  email : string;
+  username : string;
  workspace : string;
 }

@@ -17,16 +18,21 @@ interface AddUserModalProps {
  isOpen : boolean,
  onCloseModal : () => void
  userData : UserData;
+  setShowAlert : ({open:boolean,sevirity: Color}) => void;
 }

 const api = Api.getInstance();

-export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {}}) => {
+export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {}, setShowAlert}) => {

  //const [editUserData, setEditUserData] = useState(userData)
  const [searchValue, setSearchValue] = useState("");
-  const [workspaces, setWorkspaces] = useState({})
-  const roles = [{key:"1",value:"Admin"}]
+  const [workspaces, setWorkspaces] = useState([])
+  //const { control, handleSubmit,register } = useForm<UserData>();
+  const [disable, setDisable] = useState(true);
+  
+  const [invite, setInvite] = useState({sent:false,isSuceeded:false,link : null});
+  const roles = [{key:"1",value:"Admin"},{key:"2",value:"User"}]
  const classes = useCommonStyles()

  const [userDataModel, setUserData] = useState(userData as UserData)
@@ -39,7 +45,16 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
  useEffect(() => {
    (async () => {
        try {
-            const workspacesList = [{"default":true}] //await api.getWorkspaces() 
+            const workspacesList = [
+              {
+                  "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93",
+                  "name": "sock-shop"
+              },
+              {
+                  "id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
+                  "name": "test"
+              }
+          ]//{"default":true} //await api.getWorkspaces() 
            setWorkspaces(workspacesList)    
                          
        } catch (e) {
@@ -56,57 +71,109 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
  //   setIsOpen(false)
  // }

-  const onConfirm = () => {}
+  const onConfirm = () => {
+    setUserData({} as UserData)
+    onCloseModal()
+  }

  const workspaceChange = (newVal) => {
-    setWorkspaces(newVal);
+    //setWorkspaces(newVal);
    const  data = {...userDataModel, workspace : newVal}
    setUserData(data)
+    setGenarateDisabledState()
  }

  const userRoleChange = (e) => {
-    const  data = {...userDataModel, role : e.currentTarget.value}
+    const  data = {...userDataModel, role : e.target.value}
    setUserData(data)
+    setGenarateDisabledState()
  }

-  function isFormValid(): boolean {
-    return true;
+  const userNameChange = (e) => {
+    const  data = {...userDataModel, username : e.currentTarget.value}
+    setUserData(data)
+    setGenarateDisabledState()
+  }
+
+  const handleChange = (prop) => (event) => {
+    //setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const isFormValid = () : boolean => {
+    return (Object.values(userDataModel).length === 3) && Object.values(userDataModel).every(val => val !== null)
+  }
+
+  const setGenarateDisabledState = () => {
+    const isValid = isFormValid()
+    setDisable(!isValid)
+    
  }

  const generateLink =  () => {
    try {
-      api.genareteInviteLink(userDataModel)    
-      console.log(workspaces);          
+      //const res = await api.genareteInviteLink(userDataModel) 
+      //setInvite({...invite,isSuceeded:true,sent:true,link:res})
+
+      setInvite({...invite,isSuceeded:true,sent:true,link:"asdasdasdasdasdasdasdasdads"})
+      setShowAlert({open:true,sevirity:"error"})             
  } catch (e) {
-      console.error(e);
+    setShowAlert({open:true,sevirity:"error"}) 
  }
    
  }

+  const handleCopyinviteLink = (e) => {navigator.clipboard.writeText(invite.link)}
+
  const modalCustomActions = <>
-
+            {(!invite.isSuceeded || !(invite.link && invite.sent)) && <Button 
+                                            className={classes.button + " generate-link-button"} size={"small"} onClick={generateLink}
+                                            disabled={disable}  
+                                            endIcon={isLoading && <img src={spinner} alt="spinner"/>}>
+                                              <span className='generate-link-button__icon'></span>
+                                              {"Generate Invite Link"}
+                              </Button>}
+                              {invite.isSuceeded && invite.link && <div className="invite-link-row">
+        <FormControl variant="outlined" size={"small"} className='invite-link-field'>
+          <InputLabel htmlFor="outlined-adornment-password">Invite link</InputLabel>
+          <OutlinedInput 
+            type={'text'}
+            value={invite.link}           
+            onChange={handleChange('password')}
+            endAdornment={
+              <InputAdornment position="end">
+                <IconButton aria-label="cpoy invite link" onClick={handleCopyinviteLink} edge="end">
+                  {<span className='generate-link-button__icon'></span>}
+                </IconButton>
+              </InputAdornment>
+            }
+            label="Invite link"
+          />
+        </FormControl>
+            <Button style={{height: '100%'}} className={classes.button} size={"small"} onClick={onConfirm}>
+                        Done
+            </Button>
+      </div>}
                            </>;

  return (<>

-    <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title='Add User'>
-      <Button 
-                                            className={classes.button + " generate-link-button"} size={"small"} onClick={generateLink}
-                                            //disabled={isFormValid()}  
-                                            endIcon={isLoading && <img src={spinner} alt="spinner"/>}>
-                                              <span className='generate-link-button__icon'></span>
+    <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title='Add User' customActions={modalCustomActions}>

-                                              {"Generate Invite Link"}
-      </Button>
      <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
      <div className='comfirmation-modal__sub-section'>
      <div className='user__details'>
-        <input type="text" value={userDataModel?.email ?? ""} className={classes.textField + " user__email"} placeholder={"User Email"} 
-               onChange={(e) => {}}></input>
+        <input type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"} 
+                placeholder={"User Email"} onChange={userNameChange}>
+        </input>
+        
+              {/* <Controller name="role" control={control} rules={{ required: true }}
+        render={({ field }) =>    }
+      /> */}
+
      <FormControl size='small' variant="outlined" className='user__role'>
        <InputLabel>User Role</InputLabel>
-        <Select value={userDataModel.role} onChange={userRoleChange} >
-          <MenuItem value="">
+        <Select value={userDataModel.role ?? ""} onChange={userRoleChange} >
+          <MenuItem value="0">
            <em>None</em>
          </MenuItem>
          {roles.map((role) => (
@@ -118,16 +185,17 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
      </FormControl>
      </div>
      </div>
-
      <h3 className='comfirmation-modal__sub-section-header'>WORKSPACE ACCESS </h3>     
      <div className="namespacesSettingsContainer">
        <div style={{margin: "10px 0"}}>
            <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
                    onChange={(event) => setSearchValue(event.target.value)}/>
        </div>
-        <SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue} setValues={workspaceChange} tabelClassName={''} ></SelectList>
+        <SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue} 
+                    setValues= {workspaceChange} tabelClassName={''} >
+        </SelectList>
      </div>
+
    </ConfirmationModal>
    </>); 
 };
-
--- a/ui/src/components/UI/Modals/ConfirmationModal.tsx
+++ b/ui/src/components/UI/Modals/ConfirmationModal.tsx
@@ -62,7 +62,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, is
            </div>

            <div className="confirmationActions">
-                {customActions}
+                {customActions ?? defualtActions}
            </div>
        </CustomModal>
    )
--- a/ui/src/components/UserSettings/UserSettings.sass
+++ b/ui/src/components/UserSettings/UserSettings.sass
@@ -19,3 +19,10 @@

    &--pending
        @include status-base(rgba(242, 201, 76, 0.5), #8C7325, 1px solid #F2994A)
+
+.alert--right.MuiSnackbar-root
+    display: flex;
+    justify-content: flex-end;
+    left: auto;
+    right: 1vw;
+    transform: unset;
--- a/ui/src/components/UserSettings/UserSettings.tsx
+++ b/ui/src/components/UserSettings/UserSettings.tsx
@@ -3,6 +3,13 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
 // import Api from "../../helpers/api"
 import { useEffect, useState } from "react";
 import { UserData,AddUserModal } from "../Modals/AddUserModal/AddUserModal";
+import {Snackbar} from "@material-ui/core";
+import MuiAlert from "@material-ui/lab/Alert";
+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,6 +27,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
                                   return val === "Active" ? "status--active" : "status--pending"
                               }}]
    const [isOpenModal,setIsOpen] = useState(false)
+    const [alert,setAlert] = useState({open:false,sevirity:"success"})
    

    useEffect(() => {
@@ -27,7 +35,6 @@ export const UserSettings : React.FC<Props> = ({}) => {
            try {
                const users = [{userName:"asd",role:"Admin",status:"Active"}]//await api.getUsers() 
                setUserRows(users)                                
-                              
            } catch (e) {
                console.error(e);
            }
@@ -49,7 +56,8 @@ export const UserSettings : React.FC<Props> = ({}) => {
    }

    const onRowEdit = (row) => {
-        // open Edit user Modal
+        SetUsetData(row)
+        setIsOpen(true)
    }


@@ -60,7 +68,14 @@ export const UserSettings : React.FC<Props> = ({}) => {
        <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                               buttonConfig={buttonConfig} rows={usersRows} cols={cols}>
        </FilterableTableAction>
-        <AddUserModal isOpen={isOpenModal} onCloseModal={() => { setIsOpen(false); } } userData={userData}></AddUserModal>
+        <AddUserModal isOpen={isOpenModal} onCloseModal={() => { setIsOpen(false); } } userData={userData} setShowAlert={setAlert}>
+        </AddUserModal>
+        <Snackbar open={alert.open} classes={{root: "alert--right"}}>
+        <MuiAlert classes={{filledWarning: 'customWarningStyle'}} elevation={6} variant="filled"
+                  onClose={() => setAlert({...alert,open:false})} severity={"success"}>
+                    User has been added
+        </MuiAlert>
+    </Snackbar>
        {/* <SettingsModal isOpen={false} onClose={function (): void {
            throw new Error("Function not implemented.");
        } } isFirstLogin={false}></SettingsModal> */}
--- a/ui/src/helpers/commonStyle.ts
+++ b/ui/src/helpers/commonStyle.ts
@@ -7,7 +7,7 @@ export const useCommonStyles = makeStyles(() => ({
        color: "white",
        fontWeight: "600 !important",
        fontSize: 12,
-        padding: "8px 12px",
+        padding: "9px 12px",
        borderRadius: "6px ! important",

        "&:hover": {
@@ -34,7 +34,9 @@ export const useCommonStyles = makeStyles(() => ({
        padding: "8px 10px",
        border: "1px #9D9D9D solid",
        fontSize: "14px",
-        color: "#494677"
+        color: "#494677",
+        height: "30px",
+        boxSizing: "border-box"
    },
    modal :{
        position: 'absolute',