From 3e1278915ee1c9f5e15fa4315f24b4e315e1a2e2 Mon Sep 17 00:00:00 2001 From: neel <9098134+neelneelneel@users.noreply.github.com> Date: Fri, 2 Aug 2024 14:13:25 -0400 Subject: [PATCH 1/2] feat(client): updating / refactoring settings --- .../src/components/app/ChangeAccessModal.tsx | 5 +- .../components/engine/EditEngineDetails.tsx | 7 +- .../components/engine/EngineAccessButton.tsx | 29 +- .../src/components/engine/EngineShell.tsx | 3 +- .../src/components/settings/MembersTable.tsx | 1606 ----------------- .../settings/PendingMembersTable.tsx | 41 +- .../src/components/settings/SettingsTiles.tsx | 65 +- .../src/components/settings/UpdateSMSS.tsx | 16 +- .../client/src/components/settings/index.ts | 4 +- .../settings/member-permissions.constants.ts | 36 - .../settings/members/AddMembersOverlay.tsx | 474 +++++ .../members/AddMembersOverlayUser.tsx | 130 ++ .../settings/members/DeleteMembersOverlay.tsx | 140 ++ .../settings/members/MembersTable.tsx | 761 ++++++++ .../src/components/settings/members/index.ts | 1 + .../src/components/settings/settings.types.ts | 11 +- .../ui/LoadingScreen/LoadingScreen.tsx | 6 +- .../workspace/Settings/SettingsView.tsx | 9 +- packages/client/src/constants.ts | 38 + packages/client/src/hooks/index.ts | 2 + packages/client/src/hooks/useDebounceValue.ts | 25 + .../client/src/pages/app/AppDetailPage.tsx | 9 +- .../src/pages/engine/EngineSettingsPage.tsx | 8 +- .../src/pages/engine/EngineSmssPage.tsx | 4 +- .../pages/settings/AppSettingsDetailPage.tsx | 7 +- .../settings/EngineSettingsDetailPage.tsx | 22 +- .../settings/EngineSettingsIndexPage.tsx | 7 +- .../src/stores/monolith/monolith.store.ts | 20 +- .../components/Autocomplete/Autocomplete.tsx | 1 - .../src/components/Table/TablePagination.tsx | 6 + 30 files changed, 1742 insertions(+), 1751 deletions(-) delete mode 100644 packages/client/src/components/settings/MembersTable.tsx delete mode 100644 packages/client/src/components/settings/member-permissions.constants.ts create mode 100644 packages/client/src/components/settings/members/AddMembersOverlay.tsx create mode 100644 packages/client/src/components/settings/members/AddMembersOverlayUser.tsx create mode 100644 packages/client/src/components/settings/members/DeleteMembersOverlay.tsx create mode 100644 packages/client/src/components/settings/members/MembersTable.tsx create mode 100644 packages/client/src/components/settings/members/index.ts create mode 100644 packages/client/src/hooks/useDebounceValue.ts diff --git a/packages/client/src/components/app/ChangeAccessModal.tsx b/packages/client/src/components/app/ChangeAccessModal.tsx index 1798173b77..973ef2e8ed 100644 --- a/packages/client/src/components/app/ChangeAccessModal.tsx +++ b/packages/client/src/components/app/ChangeAccessModal.tsx @@ -11,7 +11,8 @@ import { import { Control, Controller } from 'react-hook-form'; import { HdrAuto, Edit, Visibility } from '@mui/icons-material'; import { AppDetailsFormTypes } from './app-details.utility'; -import { PERMISSION_DESCRIPTION_MAP } from '../settings/member-permissions.constants'; + +import { PERMISSION_DESCRIPTION_MAP } from '@/constants'; import { useRootStore } from '@/hooks'; const StyledContentBox = styled(Stack)(({ theme }) => ({ @@ -56,7 +57,7 @@ interface ChangeAccessModalProps { export const ChangeAccessModal = (props: ChangeAccessModalProps) => { const { open, onClose, control, getValues } = props; - const permissionDescriptions = PERMISSION_DESCRIPTION_MAP['app']; + const permissionDescriptions = PERMISSION_DESCRIPTION_MAP['APP']; const { monolithStore } = useRootStore(); const notification = useNotification(); diff --git a/packages/client/src/components/engine/EditEngineDetails.tsx b/packages/client/src/components/engine/EditEngineDetails.tsx index 5920533c6d..35bce2a0f2 100644 --- a/packages/client/src/components/engine/EditEngineDetails.tsx +++ b/packages/client/src/components/engine/EditEngineDetails.tsx @@ -20,9 +20,6 @@ const StyledEditorContainer = styled('div')(({ theme }) => ({ })); interface EditEngineDetailsProps { - /** Type of Engine */ - type: string; - /** Track if the edit is open */ open: boolean; @@ -37,7 +34,7 @@ interface EditEngineDetailsProps { * Wrap the Engine routes and provide styling/functionality */ export const EditEngineDetails = observer((props: EditEngineDetailsProps) => { - const { open = false, type, onClose = () => null, values = {} } = props; + const { open = false, onClose = () => null, values = {} } = props; // get the notification const notification = useNotification(); @@ -54,7 +51,7 @@ export const EditEngineDetails = observer((props: EditEngineDetailsProps) => { ); // get the engine information - const { id } = useEngine(); + const { id, type } = useEngine(); // track the options const [filterOptions, setFilterOptions] = useState< diff --git a/packages/client/src/components/engine/EngineAccessButton.tsx b/packages/client/src/components/engine/EngineAccessButton.tsx index b36f984a8e..9ce8fbd426 100644 --- a/packages/client/src/components/engine/EngineAccessButton.tsx +++ b/packages/client/src/components/engine/EngineAccessButton.tsx @@ -13,25 +13,17 @@ import { TextArea, } from '@semoss/ui'; import { EditRounded, RemoveRedEyeRounded, Add } from '@mui/icons-material'; -import { PERMISSION_DESCRIPTION_MAP } from '@/components/settings/member-permissions.constants'; import { Role } from '@/types'; import { useRootStore, useEngine } from '@/hooks'; +import { PERMISSION_DESCRIPTION_MAP } from '@/constants'; const StyledCard = styled(Card)({ borderRadius: '12px', }); -interface EngineAccessButtonProps { - /** - * Model, Vector, Storage, Database, Function - */ - name: string; -} - -export const EngineAccessButton = (props: EngineAccessButtonProps) => { - const { name } = props; - const { id, role } = useEngine(); +export const EngineAccessButton = () => { + const { id, type, role } = useEngine(); const { monolithStore } = useRootStore(); const notification = useNotification(); @@ -155,9 +147,8 @@ export const EngineAccessButton = (props: EngineAccessButtonProps) => { subheader={ { - PERMISSION_DESCRIPTION_MAP[ - name.toLowerCase() - ]?.author + PERMISSION_DESCRIPTION_MAP[type] + .author } } @@ -198,9 +189,8 @@ export const EngineAccessButton = (props: EngineAccessButtonProps) => { subheader={ { - PERMISSION_DESCRIPTION_MAP[ - name.toLowerCase() - ]?.editor + PERMISSION_DESCRIPTION_MAP[type] + .editor } } @@ -241,9 +231,8 @@ export const EngineAccessButton = (props: EngineAccessButtonProps) => { subheader={ { - PERMISSION_DESCRIPTION_MAP[ - name.toLowerCase() - ]?.readonly + PERMISSION_DESCRIPTION_MAP[type] + .readonly } } diff --git a/packages/client/src/components/engine/EngineShell.tsx b/packages/client/src/components/engine/EngineShell.tsx index 2df94c636b..3d28bc36f5 100644 --- a/packages/client/src/components/engine/EngineShell.tsx +++ b/packages/client/src/components/engine/EngineShell.tsx @@ -156,7 +156,7 @@ export const EngineShell = (props: EngineShellProps) => {   - + {role === 'OWNER' && ( - )} - - - - - - - - - - 0 - } - onChange={() => { - if ( - selectedMembers.length !== - verifiedMembers.length - ) { - setSelectedMembers( - verifiedMembers, - ); - } else { - setSelectedMembers([]); - } - }} - /> - - - Name - - - Permission - - - Permission Date - - - Action - - - - - {verifiedMembers.map((x, i) => { - const user = verifiedMembers[i]; - - let isSelected = false; - - if (user) { - isSelected = selectedMembers.some( - (value) => { - return value.id === user.id; - }, - ); - } - if (user) { - return ( - - - { - if ( - isSelected - ) { - const selMembers = - []; - selectedMembers.forEach( - (u) => { - if ( - u.id !== - user.id - ) - selMembers.push( - u, - ); - }, - ); - setSelectedMembers( - selMembers, - ); - } else { - setSelectedMembers( - [ - ...selectedMembers, - user, - ], - ); - } - }} - /> - - - - - {user.name[0].toUpperCase()} - - - - - {user.name} - - - {`${user.type} ID: ${user.id}`} - - - - - { - updateSelectedUsers( - [user], - permissionMapper[ - e.target - .value - ], - ); - }} - > - - - - - - - Not Available - - - { - // set user - setUserToDelete( - user, - ); - // open modal - setDeleteMemberModal( - true, - ); - }} - > - - - - - ); - } else { - return ( - - - - - - - - ); - } - })} - - - - { - setMembersPage(v + 1); - setSelectedMembers([]); - }} - page={membersPage - 1} - rowsPerPage={5} - count={filteredMembersCount} - /> - - - - - ) : ( - - - - - Members - - - - - - No members present - - - - - )} - - ) : ( - <> -
- { - setValue('SEARCH_FILTER', e.target.value); - }} - /> - -
- - - - Name - Permission - {/* Action */} - - - - {verifiedMembers.map((x, i) => { - const user = verifiedMembers[i]; - - let isSelected = false; - - if (user) { - isSelected = selectedMembers.some( - (value) => { - return value.id === user.id; - }, - ); - } - if (user) { - return ( - - {/* leaving this in case we want to add separate columns for name, id, login type */} - {/* - {user.name} - */} - - - - - {user.name[0].toUpperCase()} - - - - {user.name} - - {`${user.type} ID: ${user.id}`} - - - - - - - {/* { - updateSelectedUsers( - [user], - permissionMapper[ - e.target.value - ], - ); - }} - sx={{ - flexWrap: 'nowrap', - WebkitFlexWrap: 'nowrap', - }} - > - - - - */} - - {/* - { - // set user - setUserToDelete(user); - // open modal - setDeleteMemberModal(true); - }} - > - - - */} - - ); - } - })} - - - - { - setMembersPage(v + 1); - setSelectedMembers([]); - }} - page={membersPage - 1} - rowsPerPage={5} - count={filteredMembersCount} - /> - - - - - )} - - Are you sure? - - Would you like to delete all selected members - - - - - - - - - Are you sure? - - - - {userToDelete && ( - - This will remove {userToDelete.name} - - )} - - - - - - - - - - Add Members - - - - ` +${selectedNonCredentialedUsers.length - 2}` - } - value={[...selectedNonCredentialedUsers]} - getOptionLabel={(option: any) => { - return `${option.name}`; - }} - isOptionEqualToValue={(option, value) => { - return option.name === value.name; - }} - onChange={(event, newValue: any) => { - setSelectedNonCredentialedUsers([...newValue]); - }} - renderInput={(params) => ( - - )} - /> - - {selectedNonCredentialedUsers.map((user, idx) => ( - - - - - {user.name[0].toUpperCase() + - (user.name.indexOf(' ') > -1 - ? user.name[ - user.name.indexOf( - ' ', - ) + 1 - ].toUpperCase() - : '')} - - - - - {user.name} - - } - subheader={ - - - {`User ID: `} - - - {`• `} - - {`Email: `} - - {user.email} - - - - } - action={ - { - const filtered = - selectedNonCredentialedUsers.filter( - (val) => - val.id !== - user.id, - ); - setSelectedNonCredentialedUsers( - filtered, - ); - }} - > - - - } - /> - - ))} - - - - Permissions - - - { - const val = e.target.value; - if (val) { - setAddMemberRole(val as SETTINGS_ROLE); - } - }} - > - - - - - A - - Author - - } - sx={{ color: '#000' }} - subheader={ - - {PERMISSION_DESCRIPTION_MAP[ - name.toLowerCase() - ]?.author || - `Error: update key in test-editor.constants to "${name}"`} - - } - action={ - - } - /> - - - - - - - Editor - - } - sx={{ color: '#000' }} - subheader={ - - {PERMISSION_DESCRIPTION_MAP[ - name.toLowerCase() - ]?.editor || - `Error: update key in test-editor.constants to "${name}"`} - - } - action={ - - } - /> - - - - - - - Read-Only - - } - sx={{ color: '#000' }} - subheader={ - - {PERMISSION_DESCRIPTION_MAP[ - name.toLowerCase() - ]?.readonly || - `Error: update key in test-editor.constants to "${name}"`} - - } - action={ - - } - /> - - - - - - - - - - - - - ); -}; diff --git a/packages/client/src/components/settings/PendingMembersTable.tsx b/packages/client/src/components/settings/PendingMembersTable.tsx index 0a86248aa4..1635cc5ab6 100644 --- a/packages/client/src/components/settings/PendingMembersTable.tsx +++ b/packages/client/src/components/settings/PendingMembersTable.tsx @@ -18,7 +18,8 @@ import { AxiosResponse } from 'axios'; import { useRootStore, usePixel, useSettings } from '@/hooks'; -import { SETTINGS_ROLE, SETTINGS_MODE } from './settings.types'; +import { SETTINGS_ROLE } from './settings.types'; +import { ALL_TYPES } from '@/types'; const StyledMemberContent = styled('div')({ display: 'flex', @@ -152,18 +153,18 @@ const StyledNoPendingReqs = styled('div')(({ theme }) => ({ interface PendingMemberTableProps { /** - * Mode of setting + * Id of the engine */ - mode: SETTINGS_MODE; + id: string; /** - * Id of the setting + * Type of the engine */ - id: string; + type: ALL_TYPES; } export const PendingMembersTable = (props: PendingMemberTableProps) => { - const { mode, id } = props; + const { id, type } = props; const { monolithStore } = useRootStore(); const notification = useNotification(); @@ -194,9 +195,13 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { }, [pendingMembers]); const pendingUserAccessPixel = - mode === 'engine' + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' ? `GetEngineUserAccessRequest(engine='${id}');` - : mode === 'app' + : type === 'APP' ? `GetProjectUserAccessRequest(project='${id}')` : ''; @@ -279,13 +284,19 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { } let response: AxiosResponse<{ success: boolean }> | null = null; - if (mode === 'engine') { + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { response = await monolithStore.approveEngineUserAccessRequest( adminMode, id, requests, ); - } else if (mode === 'app') { + } else if (type === 'APP') { response = await monolithStore.approveProjectUserAccessRequest( adminMode, id, @@ -376,13 +387,19 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { } let response: AxiosResponse<{ success: boolean }> | null = null; - if (mode === 'engine') { + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { response = await monolithStore.denyEngineUserAccessRequest( adminMode, id, requests, ); - } else if (mode === 'app') { + } else if (type === 'APP') { response = await monolithStore.denyProjectUserAccessRequest( adminMode, id, diff --git a/packages/client/src/components/settings/SettingsTiles.tsx b/packages/client/src/components/settings/SettingsTiles.tsx index 0d8c36c50a..8a847b1670 100644 --- a/packages/client/src/components/settings/SettingsTiles.tsx +++ b/packages/client/src/components/settings/SettingsTiles.tsx @@ -15,11 +15,10 @@ import { import { AxiosResponse } from 'axios'; +import { ALL_TYPES } from '@/types'; import { useRootStore, usePixel, useSettings } from '@/hooks'; import { LoadingScreen } from '@/components/ui'; -import { SETTINGS_MODE } from './settings.types'; - const StyledAlert = styled(Alert, { shouldForwardProp: (prop) => prop !== 'setBounds', })<{ setBounds?: boolean }>(({ theme, setBounds }) => ({ @@ -58,9 +57,9 @@ const StyledTypography = styled(Typography)<{ interface SettingsTilesProps { /** - * Mode of setting + * Type of setting */ - mode: SETTINGS_MODE; + type: ALL_TYPES; /** * Id of the setting @@ -68,7 +67,7 @@ interface SettingsTilesProps { id: string; /** - * Name of setting + * Name of the setting */ name: string; @@ -90,7 +89,7 @@ interface SettingsTilesProps { } export const SettingsTiles = (props: SettingsTilesProps) => { - const { id, mode, name, condensed, onDelete, direction = 'column' } = props; + const { id, type, name, condensed, onDelete, direction = 'column' } = props; const { monolithStore, configStore } = useRootStore(); const notification = useNotification(); @@ -103,11 +102,15 @@ export const SettingsTiles = (props: SettingsTilesProps) => { const [loading, setLoading] = useState(false); const engineInfo = usePixel( - mode === 'engine' + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' ? adminMode ? `AdminEngineInfo(engine='${id}');` : `EngineInfo(engine='${id}');` - : mode === 'app' + : type === 'APP' ? adminMode ? `AdminProjectInfo(project='${id}')` : `ProjectInfo(project='${id}')` @@ -120,7 +123,13 @@ export const SettingsTiles = (props: SettingsTilesProps) => { return; } - if (mode === 'engine') { + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { const data = engineInfo.data as { database_global: boolean; database_discoverable: boolean; @@ -128,7 +137,7 @@ export const SettingsTiles = (props: SettingsTilesProps) => { setDiscoverable(data.database_discoverable); setGlobal(data.database_global); - } else if (mode === 'app') { + } else if (type === 'APP') { const data = engineInfo.data as { project_global: boolean; project_discoverable: boolean; @@ -149,9 +158,13 @@ export const SettingsTiles = (props: SettingsTilesProps) => { // run the pixel const response = await monolithStore.runQuery( - mode === 'engine' + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' ? `DeleteEngine(engine=['${id}']);` - : mode === 'app' + : type === 'APP' ? `DeleteProject(project=['${id}']);` : '', ); @@ -194,7 +207,13 @@ export const SettingsTiles = (props: SettingsTilesProps) => { // run the pixel const response = await monolithStore.runQuery( - mode === 'engine' ? `CloseEngine(engine=['${id}']);` : '', + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ? `CloseEngine(engine=['${id}']);` + : '', ); const operationType = response.pixelReturn[0].operationType; @@ -232,13 +251,19 @@ export const SettingsTiles = (props: SettingsTilesProps) => { setLoading(true); let response: AxiosResponse<{ success: boolean }> | null = null; - if (mode === 'engine') { + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { response = await monolithStore.setEngineVisiblity( adminMode, id, !discoverable, ); - } else if (mode === 'app') { + } else if (type === 'APP') { response = await monolithStore.setProjectVisiblity( adminMode, id, @@ -284,13 +309,19 @@ export const SettingsTiles = (props: SettingsTilesProps) => { setLoading(true); let response: AxiosResponse<{ success: boolean }> | null = null; - if (mode === 'engine') { + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { response = await monolithStore.setEngineGlobal( adminMode, id, !global, ); - } else if (mode === 'app') { + } else if (type === 'APP') { response = await monolithStore.setProjectGlobal( adminMode, id, diff --git a/packages/client/src/components/settings/UpdateSMSS.tsx b/packages/client/src/components/settings/UpdateSMSS.tsx index c303eb687c..60b02754b5 100644 --- a/packages/client/src/components/settings/UpdateSMSS.tsx +++ b/packages/client/src/components/settings/UpdateSMSS.tsx @@ -2,14 +2,14 @@ import { useState, useEffect } from 'react'; import { styled, useNotification, Button, Paper, Typography } from '@semoss/ui'; import Editor from '@monaco-editor/react'; +import { ALL_TYPES } from '@/types'; import { useRootStore, usePixel, useSettings } from '@/hooks'; -import { SETTINGS_MODE } from './settings.types'; interface UpdateSMSSProps { /** - * Mode of setting + * Type of setting */ - mode: SETTINGS_MODE; + type: ALL_TYPES; /** * Id of the setting @@ -36,7 +36,7 @@ const StyledPaper = styled(Paper)(() => ({ })); export const UpdateSMSS = (props: UpdateSMSSProps) => { - const { mode, id } = props; + const { type, id } = props; const { monolithStore } = useRootStore(); const notification = useNotification(); @@ -47,11 +47,15 @@ export const UpdateSMSS = (props: UpdateSMSSProps) => { const [readOnly, setReadOnly] = useState(true); const smssDetails = usePixel( - mode === 'engine' + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' ? adminMode ? `AdminGetEngineSMSS(engine=['${id}'])` : `GetEngineSMSS(engine=['${id}'])` - : mode === 'app' + : type === 'APP' ? adminMode ? `AdminGetProjectSMSS(project=['${id}'])` : `GetProjectSMSS(project=['${id}'])` diff --git a/packages/client/src/components/settings/index.ts b/packages/client/src/components/settings/index.ts index 51561ab63b..ab34ad329f 100644 --- a/packages/client/src/components/settings/index.ts +++ b/packages/client/src/components/settings/index.ts @@ -1,5 +1,7 @@ +export * from './settings.types'; +export * from './members/'; + export * from './PendingMembersTable'; -export * from './MembersTable'; export * from './TeamMembersTable'; export * from './TeamProjectsTable'; export * from './TeamEnginesTable'; diff --git a/packages/client/src/components/settings/member-permissions.constants.ts b/packages/client/src/components/settings/member-permissions.constants.ts deleted file mode 100644 index d3fab06e2e..0000000000 --- a/packages/client/src/components/settings/member-permissions.constants.ts +++ /dev/null @@ -1,36 +0,0 @@ -export const PERMISSION_DESCRIPTION_MAP: Record< - string, - Record -> = { - function: { - author: 'Ability to hide or delete the function, provision other authors, and all editor permissions', - editor: 'Ability to edit the function code, provision other users as editors and read-only users, and all read-only permissions', - readonly: 'Ability to execute the function', - }, - app: { - author: 'Ability to hide or delete the data app, provision other authors and all editor permissions', - editor: 'Ability to edit the data app code, provision other users as editors and read only users, and all read-only permissions', - readonly: - 'Ability to view the data app. User still requires permission to all dependent databases, models, remote storage, vector databases, etc', - }, - model: { - author: 'Ability to edit the model connection details, set the model as discoverable, delete the model, provision other authors, and all editor permissions', - editor: 'Ability to edit the model details, provision other users as editors and read-only users, and all read-only permissions', - readonly: 'Ability to run the model', - }, - storage: { - author: 'Ability to hide or delete the remote storage, provision other authors, and all editor permissions', - editor: 'Ability to push and delete files from the remote storage, and all read-only permissions', - readonly: 'Ability to view and pull files from the remote storage', - }, - database: { - author: 'Ability to edit the database connection details, set the database as discoverable, delete the database, provision other authors, and all editor permissions', - editor: 'Ability to edit the database structure, provision other users as editors and read-only users, and all read-only permissions', - readonly: 'Ability to query and read data from the database', - }, - vector: { - author: 'Ability to hide or delete the vector database, provision other authors, and all editor permissions', - editor: 'Ability to add and remove files from the vector database, and all read-only permissions', - readonly: 'Ability to query against the vector database', - }, -}; diff --git a/packages/client/src/components/settings/members/AddMembersOverlay.tsx b/packages/client/src/components/settings/members/AddMembersOverlay.tsx new file mode 100644 index 0000000000..7733041842 --- /dev/null +++ b/packages/client/src/components/settings/members/AddMembersOverlay.tsx @@ -0,0 +1,474 @@ +import { useEffect, useState } from 'react'; +import { + styled, + Button, + IconButton, + Avatar, + Modal, + RadioGroup, + Typography, + Autocomplete, + Card, + Box, + Icon, + Stack, + useNotification, + TextField, +} from '@semoss/ui'; +import { + EditRounded, + RemoveRedEyeRounded, + ClearRounded, +} from '@mui/icons-material'; +import { AxiosResponse } from 'axios'; + +import { ALL_TYPES } from '@/types'; +import { PERMISSION_DESCRIPTION_MAP } from '@/constants'; + +import { useAPI, useRootStore, useSettings } from '@/hooks'; +import { AddMembersOverlayUser } from './AddMembersOverlayUser'; +import { SETTINGS_ROLE } from '../settings.types'; + +const StyledCard = styled(Card)({ + borderRadius: '12px', +}); + +const StyledModalContentText = styled(Modal.ContentText)({ + display: 'flex', + flexDirection: 'column', + gap: '.5rem', + marginTop: '12px', +}); + +const StyledCardHeader = styled(Card.Header)({ + color: '#000', + width: '100%', +}); + +const StyledOuterBox = styled('div', { + shouldForwardProp: (prop) => prop !== 'userLength', +})<{ + userLength: number; +}>(({ userLength }) => ({ + maxHeight: userLength > 2 ? '300px' : 'auto', + overflow: 'auto', + transition: 'max-height 0.3s ease', +})); + +// maps for permissions, +const permissionMapper = { + 1: 'Author', // BE: 'DISPLAY' + OWNER: 'Author', // BE: 'DISPLAY' + Author: 'OWNER', // DISPLAY: BE + 2: 'Editor', // BE: 'DISPLAY' + EDIT: 'Editor', // BE: 'DISPLAY' + Editor: 'EDIT', // DISPLAY: BE + 3: 'Read-Only', // BE: 'DISPLAY' + READ_ONLY: 'Read-Only', // BE: 'DISPLAY' + 'Read-Only': 'READ_ONLY', // DISPLAY: BE +}; + +interface AddMembersOverlayProps { + /** + * Type of engine + */ + type: ALL_TYPES; + + /** + * ID of the app or engine being edited + */ + id: string; + + /** + * Track if the model is open or close + */ + open: boolean; + + /** + * Called on close + * + * @returns - method that is called onClose + */ + onClose: (success: boolean) => void; +} + +export const AddMembersOverlay = (props: AddMembersOverlayProps) => { + const { type, id, open = false, onClose = () => null } = props; + + const { monolithStore } = useRootStore(); + const notification = useNotification(); + const { adminMode } = useSettings(); + + /** Add Member State */ + const [selectedMembers, setSelectedMembers] = useState([]); + const [selectedRole, setSelectedRole] = + useState('Read-Only'); + + useEffect(() => { + // reset on open or close + setSelectedMembers([]); + setSelectedRole('Read-Only'); + }, [open]); + + // get the api + const getMembersApi: Parameters[0] = + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ? ['getEngineUsersNoCredentials', adminMode, id] + : type === 'APP' + ? ['getProjectUsersNoCredentials', adminMode, id] + : null; + + const getMembers = useAPI(open ? getMembersApi : null); + + const isLoading = + getMembers.status === 'INITIAL' || getMembers.status === 'LOADING'; + const renderedMembers = + getMembers.status === 'SUCCESS' ? getMembers.data.data : []; + + /** + * @name addMembers + * + * Add members to the app or engine + */ + const addMembers = async () => { + let success = false; + + try { + // construct requests for post data + const requests = selectedMembers.map((m) => { + return { + userid: m.id, + permission: permissionMapper[selectedRole], + }; + }); + + if (requests.length === 0) { + notification.add({ + color: 'warning', + message: `No permissions to change`, + }); + + return; + } + + let response: AxiosResponse<{ success: boolean }> | null = null; + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { + response = await monolithStore.addEngineUserPermissions( + adminMode, + id, + requests, + ); + } else if (type === 'APP') { + response = await monolithStore.addProjectUserPermissions( + adminMode, + id, + requests, + ); + } + + if (!response) { + return; + } + + // ignore if there is no response + if (response.data.success) { + notification.add({ + color: 'success', + message: 'Successfully added member permissions', + }); + + success = true; + } else { + notification.add({ + color: 'error', + message: `Error changing user permissions`, + }); + } + } catch (e) { + notification.add({ + color: 'error', + message: String(e), + }); + } finally { + // close the overlay + onClose(success); + } + }; + + return ( + + Add Members + + + + ` +${selectedMembers.length - 2}` + } + value={[...selectedMembers]} + getOptionLabel={(option: any) => { + return `${option.name}`; + }} + isOptionEqualToValue={(option, value) => { + return option.name === value.name; + }} + onChange={(event, newValue: any) => { + setSelectedMembers([...newValue]); + }} + renderOption={(props, option) => { + const { ...optionProps } = props; + return ( +
  • + +
    • + ); + }} + renderInput={(params) => ( + + )} + /> + + {selectedMembers.map((user) => ( + { + // remove any selected users from the array + const filtered = + selectedMembers.filter( + (val) => val.id !== user.id, + ); + + setSelectedMembers(filtered); + }} + > + + + } + /> + ))} + + + + Permissions + + + { + const val = e.target.value; + if (val) { + setSelectedRole(val as SETTINGS_ROLE); + } + }} + > + + + + + A + + Author + + } + sx={{ color: '#000' }} + subheader={ + + {PERMISSION_DESCRIPTION_MAP[ + type + ].author || + `Error: update key in test-editor.constants to "${name}"`} + + } + action={ + + } + /> + + + + + + + Editor + + } + sx={{ color: '#000' }} + subheader={ + + {PERMISSION_DESCRIPTION_MAP[ + type + ].editor || + `Error: update key in test-editor.constants to "${name}"`} + + } + action={ + + } + /> + + + + + + + Read-Only + + } + sx={{ color: '#000' }} + subheader={ + + {PERMISSION_DESCRIPTION_MAP[ + type + ].readonly || + `Error: update key in test-editor.constants to "${name}"`} + + } + action={ + + } + /> + + + + +     +     + + + + +     + ); +}; diff --git a/packages/client/src/components/settings/members/AddMembersOverlayUser.tsx b/packages/client/src/components/settings/members/AddMembersOverlayUser.tsx new file mode 100644 index 0000000000..d0ac262e47 --- /dev/null +++ b/packages/client/src/components/settings/members/AddMembersOverlayUser.tsx @@ -0,0 +1,130 @@ +import { styled, Avatar, Typography, Stack } from '@semoss/ui'; + +const StyledUser = styled(Stack)(({ theme }) => ({ + paddingTop: theme.spacing(1), + paddingRight: theme.spacing(2), + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(2), +})); + +const StyledAvatar = styled(Avatar)({ + height: '32px', + width: '32px', +}); + +// TODO:Refactor when Typography coloris updated +const StyledPrimaryText = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.primary, +})); + +const StyledSecondaryText = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.secondary, +})); + +interface AddMembersOverlayUserProps { + /** + * Name of the user + */ + name: string; + + /** + * Name of the user + */ + username: string; + + /** + * Email of the user + */ + email: string; + + /** + * Type of the user + */ + type: string; + + /** + * Optional action to render + */ + action?: React.ReactNode; +} + +/** + * @name extractInitials + * + * Extract a initials for a string + * + * @param str + */ +const extractInitials = (str: string): string => { + if (str.length < 1) { + return ''; + } + + return str.split(' ').reduce((prev, curr) => { + return prev + (curr[0] || ''); + }, ''); +}; + +export const AddMembersOverlayUser = (props: AddMembersOverlayUserProps) => { + const { name, username, email, type, action } = props; + + const initials = extractInitials(name); + + return ( + + {initials} + + + {name || <> } + + + + + User ID: + + + {username || <> } + + + + + Email: + + + {email || <> } + + + + + Type: + + + {type || <> } + + + + + {action} + + ); +}; diff --git a/packages/client/src/components/settings/members/DeleteMembersOverlay.tsx b/packages/client/src/components/settings/members/DeleteMembersOverlay.tsx new file mode 100644 index 0000000000..2d5fce2daa --- /dev/null +++ b/packages/client/src/components/settings/members/DeleteMembersOverlay.tsx @@ -0,0 +1,140 @@ +import { Button, Modal, useNotification } from '@semoss/ui'; +import { AxiosResponse } from 'axios'; + +import { ALL_TYPES } from '@/types'; +import { useRootStore, useSettings } from '@/hooks'; + +import { SETTINGS_MEMBER } from '../settings.types'; + +interface DeleteMembersOverlayProps { + /** + * Type of engine + */ + type: ALL_TYPES; + + /** + * ID of the app or engine being edited + */ + id: string; + + /** + * Members + */ + members: SETTINGS_MEMBER[]; + + /** + * Track if the model is open or close + */ + open: boolean; + + /** + * Called on close + * + * @returns - method that is called onClose + */ + onClose: (success: boolean) => void; +} + +export const DeleteMembersOverlay = (props: DeleteMembersOverlayProps) => { + const { + type, + id, + members = [], + open = false, + onClose = () => null, + } = props; + + const { monolithStore } = useRootStore(); + const notification = useNotification(); + const { adminMode } = useSettings(); + + /** + * @name deleteSelectedMembers + * @param members - members that will be deleted + * + * delete the selected members from the app or engine + */ + const deleteSelectedMembers = async (members: SETTINGS_MEMBER[]) => { + let success = false; + + try { + // construct requests for post data + const requests = members.map((m) => { + return m.id; + }); + + let response: AxiosResponse<{ success: boolean }> | null = null; + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { + response = await monolithStore.removeEngineUserPermissions( + adminMode, + id, + requests, + ); + } else if (type === 'APP') { + response = await monolithStore.removeProjectUserPermissions( + adminMode, + id, + requests, + ); + } + + if (!response) { + return; + } + + // ignore if there is no response + if (response.data.success) { + notification.add({ + color: 'success', + message: `Successfully removed ${ + requests.length > 1 ? 'members' : 'member' + }`, + }); + + success = true; + } else { + notification.add({ + color: 'error', + message: `Error changing user permissions`, + }); + } + } catch (e) { + notification.add({ + color: 'error', + message: String(e), + }); + } finally { + // close the overlay + onClose(success); + } + }; + + return ( + + Are you sure? + + Would you like to delete all selected members + + + + + + + ); +}; diff --git a/packages/client/src/components/settings/members/MembersTable.tsx b/packages/client/src/components/settings/members/MembersTable.tsx new file mode 100644 index 0000000000..2f9de1188c --- /dev/null +++ b/packages/client/src/components/settings/members/MembersTable.tsx @@ -0,0 +1,761 @@ +import { useEffect, useMemo, useState, useRef, useLayoutEffect } from 'react'; +import { + styled, + Button, + Checkbox, + Table, + IconButton, + AvatarGroup, + Avatar, + RadioGroup, + Typography, + Search, + Stack, + useNotification, +} from '@semoss/ui'; +import { Delete } from '@mui/icons-material'; +import { AxiosResponse } from 'axios'; + +import { ALL_TYPES } from '@/types'; +import { useRootStore, useAPI, useSettings, useDebounceValue } from '@/hooks'; +import { LoadingScreen } from '@/components/ui'; +import { SETTINGS_MEMBER } from '../settings.types'; + +import { DeleteMembersOverlay } from './DeleteMembersOverlay'; +import { AddMembersOverlay } from './AddMembersOverlay'; + +const UserInfoTableCell = styled(Table.Cell)({ + display: 'flex', + alignItems: 'center', + height: '84px', +}); + +const AvatarWrapper = styled('div')({ + display: 'inline-block', + width: '50px', +}); + +const NameIDWrapper = styled('div')({ + display: 'inline-block', +}); + +const StyledMemberContent = styled('div')({ + display: 'flex', + width: '100%', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '25px', + flexShrink: '0', +}); + +const StyledMemberInnerContent = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '20px', + alignSelf: 'stretch', +}); + +const StyledTableContainer = styled(Table.Container)(({ theme }) => ({ + borderRadius: '12px', + border: `1px solid ${theme.palette.secondary.border}`, +})); + +const StyledMemberLoading = styled('div')(({ theme }) => ({ + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: '160px', +})); + +const StyledMemberTable = styled(Table)({ + backgroundColor: 'white', +}); + +const StyledTableTitleContainer = styled('div')({ + display: 'flex', + alignItems: 'center', + alignSelf: 'stretch', + boxShadow: '0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset', + backgroundColor: 'white', +}); + +const StyledTableTitleDiv = styled('div')({ + display: 'flex', + padding: '12px 24px 12px 16px', + alignItems: 'center', + gap: '10px', +}); + +const StyledTableTitleMemberContainer = styled('div')({ + display: 'flex', + alignItems: 'flex-start', + flex: '1 0 0', +}); + +const StyledAvatarGroupContainer = styled('div')({ + display: 'flex', + width: '130px', + height: '56px', + padding: '10px 16px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', +}); + +const StyledTableTitleMemberCountContainer = styled('div')({ + display: 'flex', + height: '56px', + padding: '6px 16px 6px 8px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', +}); + +const StyledTableTitleMemberCount = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', +}); + +const StyledSearchButtonContainer = styled('div')({ + display: 'flex', + alignItems: 'center', + // gap: '10px', +}); + +const StyledDeleteSelectedContainer = styled('div')({ + display: 'flex', + padding: '10px 8px 10px 16px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', +}); + +const StyledAddMemberContainer = styled('div')({ + display: 'flex', + padding: '10px 24px 10px 8px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', +}); + +const StyledNoMembersDiv = styled('div')({ + width: '100%', + height: '503px', + display: 'flex', + flexDirection: 'column', + gap: '1rem', + justifyContent: 'center', + alignItems: 'center', +}); + +const StyledTableCell = styled(Table.Cell)({ + paddingLeft: '16px', +}); + +const StyledCheckbox = styled(Checkbox)({ + paddingBottom: '0px', +}); + +// maps for permissions, +const permissionMapper = { + 1: 'Author', // BE: 'DISPLAY' + OWNER: 'Author', // BE: 'DISPLAY' + Author: 'OWNER', // DISPLAY: BE + 2: 'Editor', // BE: 'DISPLAY' + EDIT: 'Editor', // BE: 'DISPLAY' + Editor: 'EDIT', // DISPLAY: BE + 3: 'Read-Only', // BE: 'DISPLAY' + READ_ONLY: 'Read-Only', // BE: 'DISPLAY' + 'Read-Only': 'READ_ONLY', // DISPLAY: BE +}; + +interface MembersTableProps { + /** + * Id of the engine + */ + id: string; + + /** + * Type of the engine + */ + type: ALL_TYPES; + + refreshPermission?: () => void; +} + +export const MembersTable = (props: MembersTableProps) => { + const { + id, + type, + refreshPermission = () => console.log('pass refresh function'), + } = props; + + const { monolithStore } = useRootStore(); + const notification = useNotification(); + const { adminMode } = useSettings(); + + /** Member Table State */ + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [searchFilter, setSearchFilter] = useState(''); + const [permissionFilter, setPermissionFilter] = useState(''); + const [selectedMembers, setSelectedMembers] = useState( + [], + ); + + // debounce the input + const debouncedSearchFilter = useDebounceValue(searchFilter); + + /** Delete Member */ + const [deleteMembersModal, setDeleteMembersModal] = + useState(false); + const [pendingDeletedMembers, setPendingDeletedMembers] = useState< + SETTINGS_MEMBER[] + >([]); + + /** Add Member State */ + const [addMembersModal, setAddMembersModal] = useState(false); + + const memberSearchRef = useRef(undefined); + + // get the api + const getMembersApi: Parameters[0] = + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ? [ + 'getEngineUsers', + adminMode, + id, + debouncedSearchFilter ? debouncedSearchFilter : undefined, + permissionMapper[permissionFilter], + (page + 1) * rowsPerPage - rowsPerPage, // offset + rowsPerPage, // limit + ] + : type === 'APP' + ? [ + 'getProjectUsers', + adminMode, + id, + debouncedSearchFilter ? debouncedSearchFilter : undefined, + permissionMapper[permissionFilter], + (page + 1) * rowsPerPage - rowsPerPage, // offset + rowsPerPage, // limit + ] + : null; + + const getMembers = useAPI(getMembersApi); + + /** + * When + **/ + useEffect(() => { + if (getMembers.status !== 'SUCCESS' || !getMembers.data) { + return; + } + + setPage(0); + setSelectedMembers([]); + + // select the member when done mounting + memberSearchRef.current?.focus(); + }, [getMembers.status, getMembers.data]); + + // useLayoutEffect(() => { + // if (getMembers.status !== 'SUCCESS' || !getMembers.data) { + // return; + // } + + // // select the member when done mounting + // memberSearchRef.current?.focus(); + // }, [getMembers.status, getMembers.data]); + + /** + * Update the selected users + * @param members + * @param quickUpdate + * @returns + */ + const updateSelectedUsers = async (members, quickUpdate) => { + try { + // construct requests for post data + const requests = members.map((m) => { + return { + userid: m.id, + permission: quickUpdate ? quickUpdate : 'OWNER', + }; + }); + + if (requests.length === 0) { + notification.add({ + color: 'warning', + message: `No permissions to change`, + }); + + return; + } + + let response: AxiosResponse<{ success: boolean }> | null = null; + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { + response = await monolithStore.editEngineUserPermissions( + adminMode, + id, + requests, + ); + } else if (type === 'APP') { + response = await monolithStore.editProjectUserPermissions( + adminMode, + id, + requests, + ); + } + + if (!response) { + return; + } + + // ignore if there is no response + if (response.data.success) { + notification.add({ + color: 'success', + message: 'Succesfully updated user permissions', + }); + + refreshPermission(); + } else { + notification.add({ + color: 'error', + message: `Error changing user permissions`, + }); + } + } catch (e) { + notification.add({ + color: 'error', + message: String(e), + }); + } finally { + // refresh the members + getMembers.refresh(); + } + }; + + /** + * Open the delete modal + * + * @param members - members that will be deleted + */ + const openDeleteMembersModal = (members: SETTINGS_MEMBER[]) => { + // notify if no members + if (members.length === 0) { + notification.add({ + color: 'warning', + message: `No permissions to change`, + }); + + return; + } + + // set the pending members + setPendingDeletedMembers(members); + + // close the model + setDeleteMembersModal(true); + }; + + /** + * Open the add modal + */ + const openAddMembersModal = () => { + // close the model + setAddMembersModal(true); + }; + + // track if the page is loading + const isLoading = + getMembers.status === 'INITIAL' || getMembers.status === 'LOADING'; + const renderedMembers = + getMembers.status === 'SUCCESS' ? getMembers.data['members'] : []; + const totalMembers = + getMembers.status === 'SUCCESS' ? getMembers.data['totalMembers'] : 0; + const hasMembers = + getMembers.status === 'SUCCESS' && getMembers.data['totalMembers'] > 0; + + // Avatars rendered + const Avatars = useMemo(() => { + if (!renderedMembers.length) { + return []; + } + + let i = 0; + const avatarList = []; + while (i < 5 && i < renderedMembers.length) { + avatarList.push( + + {(renderedMembers[i].name || ' ').charAt(0).toUpperCase()} + , + ); + + i++; + } + + return avatarList; + }, [renderedMembers.length]); + + return ( + + + + + + Members + + + {Avatars.length > 0 ? ( + + + {Avatars.map((el) => { + return el; + })} + + + ) : null} + + + + {totalMembers} Members + + + + + + + { + setSearchFilter(e.target.value); + }} + /> + + + + {selectedMembers.length > 0 && ( + + )} + + + + + + + {isLoading ? ( + + + + + + ) : ( + <> + {hasMembers ? ( + + + + + + 0 + } + onChange={() => { + if ( + selectedMembers.length !== + renderedMembers.length + ) { + setSelectedMembers( + renderedMembers, + ); + } else { + setSelectedMembers( + [], + ); + } + }} + /> + + + Name + + + Permission + + + Permission Date + + + Action + + + + + {renderedMembers.map((x, i) => { + const user = renderedMembers[i]; + + let isSelected = false; + + if (user) { + isSelected = + selectedMembers.some( + (value) => { + return ( + value.id === + user.id + ); + }, + ); + } + + if (user) { + return ( + + + { + if ( + isSelected + ) { + const selMembers = + []; + selectedMembers.forEach( + ( + u, + ) => { + if ( + u.id !== + user.id + ) + selMembers.push( + u, + ); + }, + ); + setSelectedMembers( + selMembers, + ); + } else { + setSelectedMembers( + [ + ...selectedMembers, + user, + ], + ); + } + }} + /> + + + + + {user.name[0].toUpperCase()} + + + + + {user.name} + + + {`${user.type} ID: ${user.id}`} + + + + + { + updateSelectedUsers( + [user], + permissionMapper[ + e + .target + .value + ], + ); + }} + > + + + + + + + Not Available + + + { + openDeleteMembersModal( + [user], + ); + }} + > + + + + + ); + } + + return null; + })} + + + + { + setPage(v); + setSelectedMembers([]); + }} + page={page} + rowsPerPage={rowsPerPage} + rowsPerPageOptions={[5, 10, 20]} + onRowsPerPageChange={(e) => { + // set the new limit + setRowsPerPage( + parseInt( + e.target.value, + 10, + ), + ); + }} + count={totalMembers} + /> + + + + ) : ( + + + No members + + + + )} + + )} + + + { + // clear out the deleted members + setPendingDeletedMembers([]); + + // close the model + setDeleteMembersModal(false); + + // refresh if successful + if (success) { + getMembers.refresh(); + } + }} + /> + { + // clear out the deleted members + setAddMembersModal(false); + + // refresh if successful + if (success) { + getMembers.refresh(); + } + }} + /> + + ); +}; diff --git a/packages/client/src/components/settings/members/index.ts b/packages/client/src/components/settings/members/index.ts new file mode 100644 index 0000000000..6484c0a904 --- /dev/null +++ b/packages/client/src/components/settings/members/index.ts @@ -0,0 +1 @@ +export * from './MembersTable'; diff --git a/packages/client/src/components/settings/settings.types.ts b/packages/client/src/components/settings/settings.types.ts index 1860628180..8dd4a6fa8b 100644 --- a/packages/client/src/components/settings/settings.types.ts +++ b/packages/client/src/components/settings/settings.types.ts @@ -1,3 +1,12 @@ export type SETTINGS_ROLE = 'Author' | 'Editor' | 'Read-Only'; -export type SETTINGS_MODE = 'engine' | 'app'; +export type SETTINGS_MEMBER = { + id: string; + name: string; + type: string; + email: string; + permission: string; + permission_granted_by: string; + permission_granted_by_type: string; + date_added: string; +}; diff --git a/packages/client/src/components/ui/LoadingScreen/LoadingScreen.tsx b/packages/client/src/components/ui/LoadingScreen/LoadingScreen.tsx index 6f8a4278da..625b8f43a3 100644 --- a/packages/client/src/components/ui/LoadingScreen/LoadingScreen.tsx +++ b/packages/client/src/components/ui/LoadingScreen/LoadingScreen.tsx @@ -4,12 +4,15 @@ import { Backdrop, CircularProgress, Typography, Stack } from '@semoss/ui'; import { LoadingScreenContext } from './LoadingScreenContext'; export interface LoadingScreenProps { + /** Relative loading screen */ + relative?: boolean; + /** Content to overlay the Loading Screen on */ children: React.ReactNode; } export const LoadingScreen = (props: LoadingScreenProps): JSX.Element => { - const { children } = props; + const { relative = false, children } = props; // when the count is > 0 it is loading const [count, setCount] = useState(0); @@ -73,6 +76,7 @@ export const LoadingScreen = (props: LoadingScreenProps): JSX.Element => { // zIndex: (theme) => // Math.max.apply(Math, Object.values(theme.zIndex)) + 1, zIndex: 1501, + position: relative ? 'relative' : undefined, }} > { {workspace.role === 'OWNER' ? ( { navigate('/settings/app'); @@ -89,15 +89,14 @@ export const SettingsView = () => { {view === 'CURRENT' && ( console.log('TODO')} /> )} {view === 'PENDING' && ( )} diff --git a/packages/client/src/constants.ts b/packages/client/src/constants.ts index 7d85ba4a56..eac5454ad6 100644 --- a/packages/client/src/constants.ts +++ b/packages/client/src/constants.ts @@ -1,3 +1,4 @@ +import { ALL_TYPES } from './types'; import Logo from '@/assets/logo.svg'; export const THEME_TITLE = process.env.THEME_TITLE; @@ -8,3 +9,40 @@ export const THEME = { name: THEME_TITLE || 'SEMOSS', logo: Logo, }; + +export const PERMISSION_DESCRIPTION_MAP: Record< + ALL_TYPES, + Record +> = { + APP: { + author: 'Ability to hide or delete the data app, provision other authors and all editor permissions', + editor: 'Ability to edit the data app code, provision other users as editors and read only users, and all read-only permissions', + readonly: + 'Ability to view the data app. User still requires permission to all dependent databases, models, remote storage, vector databases, etc', + }, + FUNCTION: { + author: 'Ability to hide or delete the function, provision other authors, and all editor permissions', + editor: 'Ability to edit the function code, provision other users as editors and read-only users, and all read-only permissions', + readonly: 'Ability to execute the function', + }, + MODEL: { + author: 'Ability to edit the model connection details, set the model as discoverable, delete the model, provision other authors, and all editor permissions', + editor: 'Ability to edit the model details, provision other users as editors and read-only users, and all read-only permissions', + readonly: 'Ability to run the model', + }, + STORAGE: { + author: 'Ability to hide or delete the remote storage, provision other authors, and all editor permissions', + editor: 'Ability to push and delete files from the remote storage, and all read-only permissions', + readonly: 'Ability to view and pull files from the remote storage', + }, + DATABASE: { + author: 'Ability to edit the database connection details, set the database as discoverable, delete the database, provision other authors, and all editor permissions', + editor: 'Ability to edit the database structure, provision other users as editors and read-only users, and all read-only permissions', + readonly: 'Ability to query and read data from the database', + }, + VECTOR: { + author: 'Ability to hide or delete the vector database, provision other authors, and all editor permissions', + editor: 'Ability to add and remove files from the vector database, and all read-only permissions', + readonly: 'Ability to query against the vector database', + }, +}; diff --git a/packages/client/src/hooks/index.ts b/packages/client/src/hooks/index.ts index e2091af033..ed6ccd2bce 100644 --- a/packages/client/src/hooks/index.ts +++ b/packages/client/src/hooks/index.ts @@ -13,6 +13,7 @@ import { useStepper } from './useStepper'; import { useWorkspace } from './useWorkspace'; import { useLLMComparison } from './useLLMCompare'; import { useDebounce } from './useDebounce'; +import { useDebounceValue } from './useDebounceValue'; export { useAPI, @@ -30,4 +31,5 @@ export { useWorkspace, useLLMComparison, useDebounce, + useDebounceValue, }; diff --git a/packages/client/src/hooks/useDebounceValue.ts b/packages/client/src/hooks/useDebounceValue.ts new file mode 100644 index 0000000000..b0c11b06bd --- /dev/null +++ b/packages/client/src/hooks/useDebounceValue.ts @@ -0,0 +1,25 @@ +import { useEffect, useRef, useState } from 'react'; + +/** + * Debouncea + * @param value - new value + * @param delay - delay timer + * @returns debounced value + */ +export const useDebounceValue = (value: T, delay = 500) => { + const [debouncedValue, setDebouncedValue] = useState(undefined); + const timerRef = useRef>(); + + useEffect(() => { + // waittill it is set + timerRef.current = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(timerRef.current); + }; + }, [value, delay]); + + return debouncedValue; +}; diff --git a/packages/client/src/pages/app/AppDetailPage.tsx b/packages/client/src/pages/app/AppDetailPage.tsx index c3731dfb03..c81c8c90b8 100644 --- a/packages/client/src/pages/app/AppDetailPage.tsx +++ b/packages/client/src/pages/app/AppDetailPage.tsx @@ -717,9 +717,9 @@ export const AppDetailPage = () => { }} > { navigate('/settings/app'); @@ -743,13 +743,12 @@ export const AppDetailPage = () => { > { fetchUserSpecificData(); }} diff --git a/packages/client/src/pages/engine/EngineSettingsPage.tsx b/packages/client/src/pages/engine/EngineSettingsPage.tsx index 0e5b39329e..791f7ab4c1 100644 --- a/packages/client/src/pages/engine/EngineSettingsPage.tsx +++ b/packages/client/src/pages/engine/EngineSettingsPage.tsx @@ -30,16 +30,16 @@ export const EngineSettingsPage = () => { > { navigate(`/engine/${type.toLowerCase()}`); }} /> - - + + ); diff --git a/packages/client/src/pages/engine/EngineSmssPage.tsx b/packages/client/src/pages/engine/EngineSmssPage.tsx index 20ca92fe21..7b6c2c23ce 100644 --- a/packages/client/src/pages/engine/EngineSmssPage.tsx +++ b/packages/client/src/pages/engine/EngineSmssPage.tsx @@ -13,7 +13,7 @@ const StyledContainer = styled('div')(({ theme }) => ({ })); export const EngineSmssPage = () => { - const { id } = useEngine(); + const { id, type } = useEngine(); return ( { }} > - + ); diff --git a/packages/client/src/pages/settings/AppSettingsDetailPage.tsx b/packages/client/src/pages/settings/AppSettingsDetailPage.tsx index 2f96bb303c..b77358d9dc 100644 --- a/packages/client/src/pages/settings/AppSettingsDetailPage.tsx +++ b/packages/client/src/pages/settings/AppSettingsDetailPage.tsx @@ -81,7 +81,7 @@ export const AppSettingsDetailPage = () => { {permission === 'OWNER' ? ( { {view === 'CURRENT' && ( getUserEnginePermission.refresh() } /> )} {view === 'PENDING' && ( - + )} {view === 'APP' && } diff --git a/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx b/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx index 3db3da0db4..e8777ea8e0 100644 --- a/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx +++ b/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { styled, ToggleTabsGroup } from '@semoss/ui'; -import { ENGINE_TYPES, Role } from '@/types'; +import { Role, ALL_TYPES } from '@/types'; import { useSettings, useAPI } from '@/hooks'; import { SettingsTiles, @@ -36,7 +36,7 @@ type VIEW = 'CURRENT' | 'PENDING'; */ interface EngineSettingsDetailPageProps { /** Type of the page to render */ - type: ENGINE_TYPES; + type: ALL_TYPES; } export const EngineSettingsDetailPage = ( @@ -44,11 +44,6 @@ export const EngineSettingsDetailPage = ( ) => { const { type } = props; - // get a pretty name - const name = type - .replace(/^[-_]*(.)/, (_, c) => c.toUpperCase()) - .replace(/[-_]+(.)/g, (_, c) => ' ' + c.toUpperCase()); - const { id } = useParams(); const navigate = useNavigate(); const { adminMode } = useSettings(); @@ -98,8 +93,8 @@ export const EngineSettingsDetailPage = ( {permission === 'OWNER' ? ( { navigate('..', { relative: 'path' }); @@ -120,21 +115,18 @@ export const EngineSettingsDetailPage = ( {view === 'CURRENT' && ( getUserEnginePermission.refresh() } /> )} {view === 'PENDING' && ( - + )} - {permission === 'OWNER' ? ( - - ) : null} + {permission === 'OWNER' ? : null} ); }; diff --git a/packages/client/src/pages/settings/EngineSettingsIndexPage.tsx b/packages/client/src/pages/settings/EngineSettingsIndexPage.tsx index b81cb82a8a..90da322fe6 100644 --- a/packages/client/src/pages/settings/EngineSettingsIndexPage.tsx +++ b/packages/client/src/pages/settings/EngineSettingsIndexPage.tsx @@ -1,9 +1,6 @@ import { useNavigate } from 'react-router-dom'; import { useEffect, useState, useRef, useReducer } from 'react'; -import { ENGINE_TYPES } from '@/types'; -import { useRootStore, usePixel, useAPI, useSettings } from '@/hooks'; - import { Grid, Search, @@ -23,6 +20,8 @@ import { FormatListBulletedOutlined, } from '@mui/icons-material'; +import { ALL_TYPES } from '@/types'; +import { useRootStore, usePixel, useAPI, useSettings } from '@/hooks'; import { EngineLandscapeCard, EngineTileCard } from '@/components/engine'; import { removeUnderscores } from '@/utility'; @@ -96,7 +95,7 @@ const reducer = (state, action) => { */ interface EngineSettingsIndexPageProps { /** Type of the page to render */ - type: ENGINE_TYPES; + type: ALL_TYPES; } export const EngineSettingsIndexPage = ( diff --git a/packages/client/src/stores/monolith/monolith.store.ts b/packages/client/src/stores/monolith/monolith.store.ts index 4a4aba38b3..282846c6d3 100644 --- a/packages/client/src/stores/monolith/monolith.store.ts +++ b/packages/client/src/stores/monolith/monolith.store.ts @@ -622,7 +622,15 @@ export class MonolithStore { // get the response const response = await axios - .get[]>(url, { + .get< + { + id: string; + email: string; + name: string; + type: string; + username: string; + }[] + >(url, { params: { engineId: appId }, }) .catch((error) => { @@ -1828,7 +1836,15 @@ export class MonolithStore { // get the response const response = await axios - .get[]>(url, { + .get< + { + id: string; + email: string; + name: string; + type: string; + username: string; + }[] + >(url, { params: { projectId: projectId }, }) .catch((error) => { diff --git a/packages/ui/src/components/Autocomplete/Autocomplete.tsx b/packages/ui/src/components/Autocomplete/Autocomplete.tsx index 6ad3ff0492..1e478031e8 100644 --- a/packages/ui/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/ui/src/components/Autocomplete/Autocomplete.tsx @@ -34,7 +34,6 @@ export interface AutocompleteProps< | "PaperComponent" | "PopperComponent" | "renderGroup" - | "renderOption" | "renderTags" | "slotProps" | "unstable_classNamePrefix" diff --git a/packages/ui/src/components/Table/TablePagination.tsx b/packages/ui/src/components/Table/TablePagination.tsx index fa8438eb12..8447036c43 100644 --- a/packages/ui/src/components/Table/TablePagination.tsx +++ b/packages/ui/src/components/Table/TablePagination.tsx @@ -43,6 +43,12 @@ export interface TablePaginationProps { HTMLTextAreaElement | HTMLInputElement >; + /** + * Is the pagination enabled? + * + */ + disabled?: boolean; + /** custom style object */ sx?: SxProps; } From 2524baeac675267802448a93111360b60313cbb5 Mon Sep 17 00:00:00 2001 From: neel <9098134+neelneelneel@users.noreply.github.com> Date: Wed, 7 Aug 2024 00:01:54 -0400 Subject: [PATCH 2/2] fix(client): cleaning up settings --- .../components/settings/MembersAddOverlay.tsx | 486 ++++++ .../settings/MembersAddOverlayUser.tsx | 137 ++ ...rsOverlay.tsx => MembersDeleteOverlay.tsx} | 12 +- .../settings/{members => }/MembersTable.tsx | 67 +- .../settings/PendingMembersTable.tsx | 719 ++++----- .../src/components/settings/SettingsTiles.tsx | 4 +- .../components/settings/UserAddOverlay.tsx | 586 +++++++ .../src/components/settings/UserTable.tsx | 520 +++++++ ...mbersOverlayUser.tsx => UserTableUser.tsx} | 23 +- .../client/src/components/settings/index.ts | 5 +- .../settings/members/AddMembersOverlay.tsx | 474 ------ .../src/components/settings/members/index.ts | 1 - .../src/components/settings/settings.types.ts | 13 +- .../workspace/Settings/SettingsView.tsx | 2 +- .../client/src/pages/app/AppDetailPage.tsx | 2 +- .../pages/settings/AppSettingsDetailPage.tsx | 4 +- .../settings/EngineSettingsDetailPage.tsx | 4 +- .../src/pages/settings/MemberSettingsPage.tsx | 1359 +---------------- .../src/pages/settings/MyProfilePage.tsx | 19 +- .../src/stores/monolith/monolith.store.ts | 75 +- .../components/Autocomplete/Autocomplete.tsx | 2 - 21 files changed, 2205 insertions(+), 2309 deletions(-) create mode 100644 packages/client/src/components/settings/MembersAddOverlay.tsx create mode 100644 packages/client/src/components/settings/MembersAddOverlayUser.tsx rename packages/client/src/components/settings/{members/DeleteMembersOverlay.tsx => MembersDeleteOverlay.tsx} (91%) rename packages/client/src/components/settings/{members => }/MembersTable.tsx (95%) create mode 100644 packages/client/src/components/settings/UserAddOverlay.tsx create mode 100644 packages/client/src/components/settings/UserTable.tsx rename packages/client/src/components/settings/{members/AddMembersOverlayUser.tsx => UserTableUser.tsx} (84%) delete mode 100644 packages/client/src/components/settings/members/AddMembersOverlay.tsx delete mode 100644 packages/client/src/components/settings/members/index.ts diff --git a/packages/client/src/components/settings/MembersAddOverlay.tsx b/packages/client/src/components/settings/MembersAddOverlay.tsx new file mode 100644 index 0000000000..c5221ccdfd --- /dev/null +++ b/packages/client/src/components/settings/MembersAddOverlay.tsx @@ -0,0 +1,486 @@ +import { useEffect, useState } from 'react'; +import { + styled, + Button, + IconButton, + Avatar, + Modal, + RadioGroup, + Typography, + Autocomplete, + Card, + Box, + Icon, + Stack, + useNotification, + TextField, +} from '@semoss/ui'; +import { + EditRounded, + RemoveRedEyeRounded, + ClearRounded, +} from '@mui/icons-material'; +import { AxiosResponse } from 'axios'; + +import { ALL_TYPES } from '@/types'; +import { PERMISSION_DESCRIPTION_MAP } from '@/constants'; + +import { useAPI, useDebounceValue, useRootStore, useSettings } from '@/hooks'; +import { MembersAddOverlayUser } from './MembersAddOverlayUser'; +import { SETTINGS_ROLE } from './settings.types'; + +const StyledModal = styled(Modal.Content)(({ theme }) => ({ + maxWidth: '50rem', + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), +})); + +const StyledSelection = styled('div')(({ theme }) => ({ + backgroundColor: 'rgba(0,0,0,.03)', + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(1), +})); + +const StyledCard = styled(Card)({ + borderRadius: '12px', +}); + +const StyledCardHeader = styled(Card.Header)({ + color: '#000', + width: '100%', +}); + +const StyledOuterBox = styled('div')(({ theme }) => ({ + flexShrink: '0', + display: 'flex', + flexDirection: 'column', + maxHeight: '200px', + overflow: 'auto', + gap: theme.spacing(1), +})); + +// maps for permissions, +const permissionMapper = { + 1: 'Author', // BE: 'DISPLAY' + OWNER: 'Author', // BE: 'DISPLAY' + Author: 'OWNER', // DISPLAY: BE + 2: 'Editor', // BE: 'DISPLAY' + EDIT: 'Editor', // BE: 'DISPLAY' + Editor: 'EDIT', // DISPLAY: BE + 3: 'Read-Only', // BE: 'DISPLAY' + READ_ONLY: 'Read-Only', // BE: 'DISPLAY' + 'Read-Only': 'READ_ONLY', // DISPLAY: BE +}; + +const AUTOCOMPLETE_OFFSET = 0; +const AUTOCOMPLETE_LIMIT = 20; + +interface MembersAddOverlayProps { + /** + * Type of engine + */ + type: ALL_TYPES; + + /** + * ID of the app or engine being edited + */ + id: string; + + /** + * Track if the model is open or close + */ + open: boolean; + + /** + * Called on close + * + * @returns - method that is called onClose + */ + onClose: (success: boolean) => void; +} + +export const MembersAddOverlay = (props: MembersAddOverlayProps) => { + const { type, id, open = false, onClose = () => null } = props; + + const { monolithStore } = useRootStore(); + const notification = useNotification(); + const { adminMode } = useSettings(); + + /** Add Member State */ + const [selectedMembers, setSelectedMembers] = useState([]); + + const [selectedRole, setSelectedRole] = + useState('Read-Only'); + const [search, setSearch] = useState(''); + + // debounce the input + const debouncedSearch = useDebounceValue(search); + + useEffect(() => { + // reset on open or close + setSelectedMembers([]); + setSelectedRole('Read-Only'); + setSearch(''); + }, [open]); + + // TODO: Implement Lazy Loading + // get the api + const getMembersApi: Parameters[0] = + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ? [ + 'getEngineUsersNoCredentials', + adminMode, + id, + AUTOCOMPLETE_LIMIT, // limit + AUTOCOMPLETE_OFFSET, // offset + debouncedSearch ? debouncedSearch : undefined, + ] + : type === 'APP' + ? [ + 'getProjectUsersNoCredentials', + adminMode, + id, + AUTOCOMPLETE_LIMIT, // limit + AUTOCOMPLETE_OFFSET, // offset + debouncedSearch ? debouncedSearch : undefined, + ] + : null; + + const getMembers = useAPI(open ? getMembersApi : null); + + const isLoading = + getMembers.status === 'INITIAL' || getMembers.status === 'LOADING'; + const renderedMembers = + getMembers.status === 'SUCCESS' ? getMembers.data.data : []; + + /** + * @name addMembers + * + * Add members to the app or engine + */ + const addMembers = async () => { + let success = false; + + try { + // construct requests for post data + const requests = selectedMembers.map((m) => { + return { + userid: m.id, + permission: permissionMapper[selectedRole], + }; + }); + + if (requests.length === 0) { + notification.add({ + color: 'warning', + message: `No permissions to change`, + }); + + return; + } + + let response: AxiosResponse<{ success: boolean }> | null = null; + if ( + type === 'DATABASE' || + type === 'STORAGE' || + type === 'MODEL' || + type === 'VECTOR' || + type === 'FUNCTION' + ) { + response = await monolithStore.addEngineUserPermissions( + adminMode, + id, + requests, + ); + } else if (type === 'APP') { + response = await monolithStore.addProjectUserPermissions( + adminMode, + id, + requests, + ); + } + + if (!response) { + return; + } + + // ignore if there is no response + if (response.data.success) { + notification.add({ + color: 'success', + message: 'Successfully added member permissions', + }); + + success = true; + } else { + notification.add({ + color: 'error', + message: `Error changing user permissions`, + }); + } + } catch (e) { + notification.add({ + color: 'error', + message: String(e), + }); + } finally { + // close the overlay + onClose(success); + } + }; + + return ( + + Add Members + + x} + options={renderedMembers} + includeInputInList={true} + limitTags={2} + getLimitTagsText={() => ` +${selectedMembers.length - 2}`} + value={selectedMembers} + inputValue={search} + getOptionLabel={(option) => { + return `${option.name}`; + }} + isOptionEqualToValue={(option, value) => { + return option.id === value.id; + }} + onInputChange={(event, newValue) => { + setSearch(newValue); + }} + onChange={(event, newValue) => { + setSelectedMembers(newValue || []); + }} + renderOption={(props, option) => { + const { ...optionProps } = props; + return ( +
  • + +
    • + ); + }} + renderInput={(params) => ( + + )} + /> + + {selectedMembers.map((user) => ( + { + // remove any selected users from the array + const filtered = selectedMembers.filter( + (val) => val.id !== user.id, + ); + + setSelectedMembers(filtered); + }} + > + + + } + /> + ))} + + + Permissions + + { + const val = e.target.value; + if (val) { + setSelectedRole(val as SETTINGS_ROLE); + } + }} + > + + + + + A + + Author + + } + sx={{ color: '#000' }} + subheader={ + + {PERMISSION_DESCRIPTION_MAP[type] + .author || + `Error: update key in test-editor.constants to "${name}"`} + + } + action={ + + } + /> + + + + + + + Editor + + } + sx={{ color: '#000' }} + subheader={ + + {PERMISSION_DESCRIPTION_MAP[type] + .editor || + `Error: update key in test-editor.constants to "${name}"`} + + } + action={ + + } + /> + + + + + + + Read-Only + + } + sx={{ color: '#000' }} + subheader={ + + {PERMISSION_DESCRIPTION_MAP[type] + .readonly || + `Error: update key in test-editor.constants to "${name}"`} + + } + action={ + + } + /> + + + + +     + + + + +     + ); +}; diff --git a/packages/client/src/components/settings/MembersAddOverlayUser.tsx b/packages/client/src/components/settings/MembersAddOverlayUser.tsx new file mode 100644 index 0000000000..e2d75e9645 --- /dev/null +++ b/packages/client/src/components/settings/MembersAddOverlayUser.tsx @@ -0,0 +1,137 @@ +import { styled, Avatar, Typography, Stack } from '@semoss/ui'; + +const StyledUser = styled(Stack)(({ theme }) => ({ + paddingTop: theme.spacing(1), + paddingRight: theme.spacing(2), + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(2), +})); + +const StyledAvatar = styled(Avatar)({ + height: '32px', + width: '32px', +}); + +// TODO:Refactor when Typography coloris updated +const StyledPrimaryText = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.primary, +})); + +const StyledSecondaryText = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.secondary, +})); + +interface MembersAddOverlayUserProps { + /** + * Name of the user + */ + name: string; + + /** + * Name of the user + */ + id: string; + + /** + * Email of the user + */ + email: string; + + /** + * Type of the user + */ + type: string; + + /** + * Optional action to render + */ + action?: React.ReactNode; +} + +/** + * @name extractInitials + * + * Extract a initials for a string + * + * @param str + */ +const extractInitials = (str: string): string => { + if (str.length < 1) { + return ''; + } + + return str.split(' ').reduce((prev, curr) => { + return prev + (curr[0] || ''); + }, ''); +}; + +export const MembersAddOverlayUser = (props: MembersAddOverlayUserProps) => { + const { name, id, email, type, action } = props; + + const initials = extractInitials(name); + + return ( + + {initials} + + + {name || <> } + + + + + User ID: + + + {id || <> } + + + + + Email: + + + {email || <> } + + + + + Type: + + + {type || <> } + + + + + {action} + + ); +}; diff --git a/packages/client/src/components/settings/members/DeleteMembersOverlay.tsx b/packages/client/src/components/settings/MembersDeleteOverlay.tsx similarity index 91% rename from packages/client/src/components/settings/members/DeleteMembersOverlay.tsx rename to packages/client/src/components/settings/MembersDeleteOverlay.tsx index 2d5fce2daa..d812e43b21 100644 --- a/packages/client/src/components/settings/members/DeleteMembersOverlay.tsx +++ b/packages/client/src/components/settings/MembersDeleteOverlay.tsx @@ -4,9 +4,9 @@ import { AxiosResponse } from 'axios'; import { ALL_TYPES } from '@/types'; import { useRootStore, useSettings } from '@/hooks'; -import { SETTINGS_MEMBER } from '../settings.types'; +import { SETTINGS_PROVISIONED_USER } from './settings.types'; -interface DeleteMembersOverlayProps { +interface MembersDeleteOverlayProps { /** * Type of engine */ @@ -20,7 +20,7 @@ interface DeleteMembersOverlayProps { /** * Members */ - members: SETTINGS_MEMBER[]; + members: SETTINGS_PROVISIONED_USER[]; /** * Track if the model is open or close @@ -35,7 +35,7 @@ interface DeleteMembersOverlayProps { onClose: (success: boolean) => void; } -export const DeleteMembersOverlay = (props: DeleteMembersOverlayProps) => { +export const MembersDeleteOverlay = (props: MembersDeleteOverlayProps) => { const { type, id, @@ -54,7 +54,9 @@ export const DeleteMembersOverlay = (props: DeleteMembersOverlayProps) => { * * delete the selected members from the app or engine */ - const deleteSelectedMembers = async (members: SETTINGS_MEMBER[]) => { + const deleteSelectedMembers = async ( + members: SETTINGS_PROVISIONED_USER[], + ) => { let success = false; try { diff --git a/packages/client/src/components/settings/members/MembersTable.tsx b/packages/client/src/components/settings/MembersTable.tsx similarity index 95% rename from packages/client/src/components/settings/members/MembersTable.tsx rename to packages/client/src/components/settings/MembersTable.tsx index 2f9de1188c..cbfcdfa64b 100644 --- a/packages/client/src/components/settings/members/MembersTable.tsx +++ b/packages/client/src/components/settings/MembersTable.tsx @@ -19,10 +19,10 @@ import { AxiosResponse } from 'axios'; import { ALL_TYPES } from '@/types'; import { useRootStore, useAPI, useSettings, useDebounceValue } from '@/hooks'; import { LoadingScreen } from '@/components/ui'; -import { SETTINGS_MEMBER } from '../settings.types'; +import { SETTINGS_PROVISIONED_USER } from './settings.types'; -import { DeleteMembersOverlay } from './DeleteMembersOverlay'; -import { AddMembersOverlay } from './AddMembersOverlay'; +import { MembersDeleteOverlay } from './MembersDeleteOverlay'; +import { MembersAddOverlay } from './MembersAddOverlay'; const UserInfoTableCell = styled(Table.Cell)({ display: 'flex', @@ -145,15 +145,15 @@ const StyledAddMemberContainer = styled('div')({ gap: '10px', }); -const StyledNoMembersDiv = styled('div')({ +const StyledNoMembersDiv = styled('div')(({ theme }) => ({ width: '100%', height: '503px', display: 'flex', flexDirection: 'column', - gap: '1rem', + gap: theme.spacing(1), justifyContent: 'center', alignItems: 'center', -}); +})); const StyledTableCell = styled(Table.Cell)({ paddingLeft: '16px', @@ -187,15 +187,14 @@ interface MembersTableProps { */ type: ALL_TYPES; - refreshPermission?: () => void; + /** + * Called when permissions are changed + */ + onChange?: () => void; } export const MembersTable = (props: MembersTableProps) => { - const { - id, - type, - refreshPermission = () => console.log('pass refresh function'), - } = props; + const { id, type, onChange = () => null } = props; const { monolithStore } = useRootStore(); const notification = useNotification(); @@ -204,20 +203,20 @@ export const MembersTable = (props: MembersTableProps) => { /** Member Table State */ const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); - const [searchFilter, setSearchFilter] = useState(''); + const [search, setSearch] = useState(''); const [permissionFilter, setPermissionFilter] = useState(''); - const [selectedMembers, setSelectedMembers] = useState( - [], - ); + const [selectedMembers, setSelectedMembers] = useState< + SETTINGS_PROVISIONED_USER[] + >([]); // debounce the input - const debouncedSearchFilter = useDebounceValue(searchFilter); + const debouncedSearch = useDebounceValue(search); /** Delete Member */ const [deleteMembersModal, setDeleteMembersModal] = useState(false); const [pendingDeletedMembers, setPendingDeletedMembers] = useState< - SETTINGS_MEMBER[] + SETTINGS_PROVISIONED_USER[] >([]); /** Add Member State */ @@ -236,7 +235,7 @@ export const MembersTable = (props: MembersTableProps) => { 'getEngineUsers', adminMode, id, - debouncedSearchFilter ? debouncedSearchFilter : undefined, + debouncedSearch ? debouncedSearch : undefined, permissionMapper[permissionFilter], (page + 1) * rowsPerPage - rowsPerPage, // offset rowsPerPage, // limit @@ -246,7 +245,7 @@ export const MembersTable = (props: MembersTableProps) => { 'getProjectUsers', adminMode, id, - debouncedSearchFilter ? debouncedSearchFilter : undefined, + debouncedSearch ? debouncedSearch : undefined, permissionMapper[permissionFilter], (page + 1) * rowsPerPage - rowsPerPage, // offset rowsPerPage, // limit @@ -336,7 +335,10 @@ export const MembersTable = (props: MembersTableProps) => { message: 'Succesfully updated user permissions', }); - refreshPermission(); + // refresh the members + getMembers.refresh(); + + onChange(); } else { notification.add({ color: 'error', @@ -348,9 +350,6 @@ export const MembersTable = (props: MembersTableProps) => { color: 'error', message: String(e), }); - } finally { - // refresh the members - getMembers.refresh(); } }; @@ -359,7 +358,7 @@ export const MembersTable = (props: MembersTableProps) => { * * @param members - members that will be deleted */ - const openDeleteMembersModal = (members: SETTINGS_MEMBER[]) => { + const openDeleteMembersModal = (members: SETTINGS_PROVISIONED_USER[]) => { // notify if no members if (members.length === 0) { notification.add({ @@ -453,10 +452,9 @@ export const MembersTable = (props: MembersTableProps) => { inputRef={memberSearchRef} placeholder="Search Members" size="small" - disabled={isLoading} - value={searchFilter} + value={search} onChange={(e) => { - setSearchFilter(e.target.value); + setSearch(e.target.value); }} /> @@ -537,7 +535,7 @@ export const MembersTable = (props: MembersTableProps) => { Permission Date - Action +   @@ -724,7 +722,7 @@ export const MembersTable = (props: MembersTableProps) => { )} - { // refresh if successful if (success) { + // trigger the update + onChange(); + + // refresh getMembers.refresh(); } }} /> - { // refresh if successful if (success) { + // trigger the update + onChange(); + getMembers.refresh(); } }} diff --git a/packages/client/src/components/settings/PendingMembersTable.tsx b/packages/client/src/components/settings/PendingMembersTable.tsx index 1635cc5ab6..9f8679b205 100644 --- a/packages/client/src/components/settings/PendingMembersTable.tsx +++ b/packages/client/src/components/settings/PendingMembersTable.tsx @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import { useForm, useFieldArray } from 'react-hook-form'; import { styled, Button, @@ -17,9 +16,18 @@ import { Add, Check, Close, ExpandLess, ExpandMore } from '@mui/icons-material'; import { AxiosResponse } from 'axios'; import { useRootStore, usePixel, useSettings } from '@/hooks'; - -import { SETTINGS_ROLE } from './settings.types'; import { ALL_TYPES } from '@/types'; +import { LoadingScreen } from '@/components/ui'; + +import { SETTINGS_ROLE, SETTINGS_PENDING_USER } from './settings.types'; + +const StyledMemberLoading = styled('div')(({ theme }) => ({ + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: '160px', +})); const StyledMemberContent = styled('div')({ display: 'flex', @@ -130,25 +138,14 @@ const permissionMapper = { 'Read-Only': 'READ_ONLY', // DISPLAY: BE }; -// Pending Members Table -interface PendingMember { - ID: string; - NAME: string; - EMAIL: string; - PERMISSION: SETTINGS_ROLE; - // Requester Info - REQUEST_TIMESTAMP: string; - REQUEST_TYPE: string; - REQUEST_USERID: string; -} - const StyledNoPendingReqs = styled('div')(({ theme }) => ({ width: '100%', - height: theme.spacing(6), + height: '503px', display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), justifyContent: 'center', alignItems: 'center', - backgroundColor: 'white', })); interface PendingMemberTableProps { @@ -161,39 +158,28 @@ interface PendingMemberTableProps { * Type of the engine */ type: ALL_TYPES; + + /** + * Called when permissions are changed + */ + onChange?: () => void; } export const PendingMembersTable = (props: PendingMemberTableProps) => { - const { id, type } = props; + const { id, type, onChange = () => null } = props; const { monolithStore } = useRootStore(); const notification = useNotification(); const { adminMode } = useSettings(); - const [selectedPending, setSelectedPending] = useState([]); + const [renderedMembers, setRenderedMembers] = useState< + SETTINGS_PENDING_USER[] + >([]); + const [selectedMembers, setSelectedMembers] = useState< + Record + >({}); const [openTable, setOpenTable] = useState(false); - const { control, watch, setValue } = useForm<{ - PENDING_MEMBERS: PendingMember[]; - }>({ - defaultValues: { - // Members Table - PENDING_MEMBERS: [], - }, - }); - - const { remove: pendingMemberRemove } = useFieldArray({ - control, - name: 'PENDING_MEMBERS', - }); - const pendingMembers = watch('PENDING_MEMBERS'); - - useEffect(() => { - if (pendingMembers.length) { - setOpenTable(true); - } - }, [pendingMembers]); - const pendingUserAccessPixel = type === 'DATABASE' || type === 'STORAGE' || @@ -206,52 +192,27 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { : ''; // Pending Member Requests Pixel call - const pendingUserAccess = usePixel< - { - ENGINEID: string; - ID: string; - PERMISSION: number; - REQUEST_TIMESTAMP: string; - REQUEST_TYPE: string; - REQUEST_USERID: string; - }[] - >(pendingUserAccessPixel); + const pendingUserAccess = usePixel( + pendingUserAccessPixel, + ); - /** - * @name useEffect - * @desc - sets pending members in react hook form - */ + // track if the page is loading + const isLoading = + pendingUserAccess.status === 'INITIAL' || + pendingUserAccess.status === 'LOADING'; + + // set the rendered users useEffect(() => { - // pixel call to get pending members - if (pendingUserAccess.status !== 'SUCCESS' || !pendingUserAccess.data) { + if (pendingUserAccess.status !== 'SUCCESS') { return; } - const newPendingMembers = []; + const updatedMembers = pendingUserAccess.data.map((m) => ({ + ...m, + PERMISSION: permissionMapper[m.PERMISSION], // comes in as 1,2,3 -> map to Author, Edit, Read-only + })); - pendingUserAccess.data.forEach((mem) => { - newPendingMembers.push({ - ...mem, - PERMISSION: permissionMapper[mem.PERMISSION], // comes in as 1,2,3 -> map to Author, Edit, Read-only - }); - }); - - // set new members with the Pending Members in react hook form - setValue('PENDING_MEMBERS', newPendingMembers); - - // notify user for pending members - if (newPendingMembers.length) { - let message = - newPendingMembers.length === 1 - ? `1 member has ` - : `${newPendingMembers.length} members have `; - - message += `requested access`; - } - - return () => { - // TODO - }; + setRenderedMembers(updatedMembers); }, [pendingUserAccess.status, pendingUserAccess.data]); /** API Functions */ @@ -260,10 +221,7 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { * @param members - members to pass to approve api call * @description Approve list of Pending Members */ - const approvePendingMembers = async ( - members: PendingMember[], - quickActionFlag?: boolean, // quick approve button - ) => { + const approvePendingMembers = async (members: SETTINGS_PENDING_USER[]) => { try { // construct requests for post data const requests = members.map((mem, i) => { @@ -309,40 +267,24 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { return; } - // if (response.success) { - // get index of pending members in order to remove - const indexesToRemove = []; - requests.forEach((mem) => { - pendingMembers.find((m, i) => { - if (mem.userid === m.REQUEST_USERID) - indexesToRemove.push(i); - }); - }); - - // remove indexes - pendingMemberRemove(indexesToRemove); + if (response.data.success) { + const updatedMembers = { + ...selectedMembers, + } as Record; - if (!quickActionFlag) { - // remove from selected pending members - setSelectedPending([]); - } else { - let indexToRemoveFromSelected; - // remove from selected - selectedPending.find((m, i) => { - if (m.ID !== requests[0].requestid) { - indexToRemoveFromSelected = i; + for (const m of members) { + if (updatedMembers[m.ID]) { + delete updatedMembers[m.ID]; } - }); + } + setSelectedMembers(updatedMembers); - const filteredArr = selectedPending.splice( - indexToRemoveFromSelected, - 1, - ); + // refresh the data + pendingUserAccess.refresh(); - setSelectedPending(filteredArr); - } + // trigger onChange + onChange(); - if (response.data.success) { notification.add({ color: 'success', message: 'Succesfully approved user permissions', @@ -367,10 +309,7 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { * @param quickActionFlag - quick deny button on table * @description Deny Selected Pending Members */ - const denyPendingMembers = async ( - members: PendingMember[], - quickActionFlag?: boolean, - ) => { + const denyPendingMembers = async (members: SETTINGS_PENDING_USER[]) => { try { // construct requests for post data const requests = members.map((m) => { @@ -412,42 +351,24 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { return; } - // get index of pending members in order to remove - const indexesToRemove = []; - requests.forEach((mem) => { - pendingMembers.find((m, i) => { - if (mem === m.ID) indexesToRemove.push(i); - }); - }); - - // remove indexes from react hook form - pendingMemberRemove(indexesToRemove); + if (response.data.success) { + const updatedMembers = { + ...selectedMembers, + } as Record; - if (!quickActionFlag) { - setSelectedPending([]); - // close modal - // setDenySelectedModal(false); - } else { - // remove from selected pending members - let indexToRemoveFromSelected = 0; - // remove from selected - selectedPending.find((m, i) => { - if (m.ID !== requests[0]) { - indexToRemoveFromSelected = i; + for (const m of members) { + if (updatedMembers[m.ID]) { + delete updatedMembers[m.ID]; } - }); + } + setSelectedMembers(updatedMembers); - const filteredArr = selectedPending.splice( - indexToRemoveFromSelected, - 1, - ); + // refresh the data + pendingUserAccess.refresh(); - setSelectedPending(filteredArr); - // close modal - // setDenySelectedModal(false); - } + // trigger onChange + onChange(); - if (response.data.success) { notification.add({ color: 'success', message: 'Succesfully denied user permissions', @@ -469,38 +390,26 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { /** HELPERS */ /** * @name updatePendingMemberPermission - * @param mem + * @param member * @param value * @desc Updates pending member permission in radiogroup */ const updatePendingMemberPermission = ( - mem: PendingMember, + member: SETTINGS_PENDING_USER, role: SETTINGS_ROLE, ) => { - const updatedPendingMems = pendingMembers.map((user) => { - if (user.REQUEST_USERID === mem.REQUEST_USERID) { + const updatedRenderedMembers = renderedMembers.map((m) => { + if (member.ID === m.ID) { return { - ...user, + ...m, PERMISSION: role, }; - } else { - return user; } - }); - const updateSelectedPendingMems = selectedPending.map((user) => { - if (user.REQUEST_USERID === mem.REQUEST_USERID) { - return { - ...user, - PERMISSION: role, - }; - } else { - return user; - } + return m; }); - setSelectedPending(updateSelectedPendingMems); - setValue('PENDING_MEMBERS', updatedPendingMems); + setRenderedMembers(updatedRenderedMembers); }; return ( @@ -518,9 +427,9 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { - {pendingMembers.length < 2 - ? `${pendingMembers.length} pending request` - : `${pendingMembers.length} pending requests`} + {renderedMembers.length < 2 + ? `${renderedMembers.length} pending request` + : `${renderedMembers.length} pending requests`} @@ -538,17 +447,20 @@ export const PendingMembersTable = (props: PendingMemberTableProps) => { - {selectedPending.length > 0 && ( + {Object.keys(selectedMembers).length > 0 && ( <> + + + + + ); +}; diff --git a/packages/client/src/components/settings/UserTable.tsx b/packages/client/src/components/settings/UserTable.tsx new file mode 100644 index 0000000000..fb058bf9af --- /dev/null +++ b/packages/client/src/components/settings/UserTable.tsx @@ -0,0 +1,520 @@ +import { useMemo, useRef, useState } from 'react'; +import { Delete, Edit } from '@mui/icons-material'; +import { + styled, + useNotification, + Button, + Checkbox, + Typography, + AvatarGroup, + Avatar, + Table, + IconButton, + Search, +} from '@semoss/ui'; +import { useRootStore, useAPI, useSettings, useDebounceValue } from '@/hooks'; +import { LoadingScreen } from '@/components/ui'; +import { UserAddOverlay } from './UserAddOverlay'; +import { UserTableUser } from './UserTableUser'; + +const StyledMemberContent = styled('div')({ + display: 'flex', + width: '100%', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '25px', + flexShrink: '0', +}); + +const StyledMemberInnerContent = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '20px', + alignSelf: 'stretch', +}); + +const StyledTableContainer = styled(Table.Container)(({ theme }) => ({ + borderRadius: '12px', + border: `1px solid ${theme.palette.secondary.border}`, +})); + +const StyledMemberLoading = styled('div')(({ theme }) => ({ + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: '160px', +})); + +const StyledMemberTable = styled(Table)({ + backgroundColor: 'white', +}); + +const StyledTableTitleContainer = styled('div')({ + display: 'flex', + alignItems: 'center', + alignSelf: 'stretch', + boxShadow: '0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset', + backgroundColor: 'white', +}); + +const StyledTableTitleDiv = styled('div')({ + display: 'flex', + padding: '12px 24px 12px 16px', + alignItems: 'center', + gap: '10px', +}); + +const StyledTableTitleMemberContainer = styled('div')({ + display: 'flex', + alignItems: 'flex-start', + flex: '1 0 0', +}); + +const StyledAvatarGroupContainer = styled('div')({ + display: 'flex', + width: '130px', + height: '56px', + padding: '10px 16px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', +}); + +const StyledTableTitleMemberCountContainer = styled('div')({ + display: 'flex', + height: '56px', + padding: '6px 16px 6px 8px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', +}); + +const StyledTableTitleMemberCount = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', +}); + +const StyledSearchButtonContainer = styled('div')({ + display: 'flex', + alignItems: 'center', + // gap: '10px', +}); + +const StyledAddMemberContainer = styled('div')({ + display: 'flex', + padding: '10px 24px 10px 8px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', +}); + +const StyledNoUsersDiv = styled('div')(({ theme }) => ({ + width: '100%', + height: '503px', + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + justifyContent: 'center', + alignItems: 'center', +})); + +interface User { + id: string; + type: string; + name?: string; + admin?: boolean; + publisher?: boolean; + exporter?: boolean; + email?: string; + phone?: string; + phoneextension?: string; + countrycode?: string; + username?: string; +} + +interface UserTableProps { + /** + * Called users are changed + */ + onChange?: () => void; +} + +export const UserTable = (props: UserTableProps) => { + const { onChange = () => null } = props; + + const { adminMode } = useSettings(); + const { monolithStore } = useRootStore(); + const notification = useNotification(); + + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [search, setSearch] = useState(''); + + // debounce the input + const debouncedSearch = useDebounceValue(search); + + /** Add User State */ + const [addModalOpen, setAddModalOpen] = useState(false); + const [addModalUser, setAddModalUser] = useState(null); + + const userSearchRef = useRef(undefined); + + const getUsers = useAPI([ + 'getAllUsers', + adminMode, + debouncedSearch ? debouncedSearch : '', + (page + 1) * rowsPerPage - rowsPerPage, // offset + rowsPerPage, // limit + ]); + + // track if the page is loading + const isLoading = + getUsers.status === 'INITIAL' || getUsers.status === 'LOADING'; + const renderedUsers = getUsers.status === 'SUCCESS' ? getUsers.data : []; + const totalUsers = getUsers.status === 'SUCCESS' ? 0 : 0; + const hasUsers = getUsers.status === 'SUCCESS' && getUsers.data.length > 0; + /** + * Update a user + * @param user - user to update + */ + const updateUser = async (user: User) => { + try { + const response = await monolithStore.editMemberInfo( + adminMode, + user, + ); + + if (!response) { + return; + } + + // ignore if there is no response + if (response.data) { + notification.add({ + color: 'success', + message: 'Succesfully updated user', + }); + + onChange(); + + // refresh the users + getUsers.refresh(); + } else { + notification.add({ + color: 'error', + message: `Error changing user`, + }); + } + } catch (e) { + notification.add({ + color: 'error', + message: String(e), + }); + } + }; + + /** + * Delate a user info + * @param user - user to update + */ + const deleteUser = async (user: User) => { + try { + const response = await monolithStore.deleteMember( + adminMode, + user.id, + user.type, + ); + + if (!response) { + return; + } + + // ignore if there is no response + if (response.data) { + notification.add({ + color: 'success', + message: 'Succesfully deleting user', + }); + + onChange(); + + // refresh the users + getUsers.refresh(); + } else { + notification.add({ + color: 'error', + message: `Error deleting user`, + }); + } + } catch (e) { + notification.add({ + color: 'error', + message: String(e), + }); + } + }; + + // Avatars rendered + const Avatars = useMemo(() => { + if (!renderedUsers.length) { + return []; + } + + let i = 0; + const avatarList = []; + while (i < 5 && i < renderedUsers.length) { + avatarList.push( + + {(renderedUsers[i].name || ' ').charAt(0).toUpperCase()} + , + ); + + i++; + } + + return avatarList; + }, [renderedUsers.length]); + + return ( + + + + + + Users + + + {Avatars.length > 0 ? ( + + + {Avatars.map((el) => { + return el; + })} + + + ) : null} + + + + {totalUsers} Users + + + + + + + { + setSearch(e.target.value); + }} + /> + + + + + + + + {isLoading ? ( + + + + + + ) : ( + <> + {hasUsers ? ( + + + + + User + + + Role + + +   + + + + + {renderedUsers.map((user) => { + if (user) { + return ( + + + + + + { + updateUser({ + ...user, + publisher: + !user.publisher, + }); + }} + /> + { + updateUser({ + ...user, + exporter: + !user.exporter, + }); + }} + /> + { + updateUser({ + ...user, + admin: !user.admin, + }); + }} + /> + + + { + setAddModalOpen( + true, + ); + + setAddModalUser( + user, + ); + }} + > + + + { + deleteUser( + user, + ); + }} + > + + + + + ); + } + + return null; + })} + + + + { + setPage(v); + }} + page={page} + rowsPerPage={rowsPerPage} + rowsPerPageOptions={[5, 10, 20]} + onRowsPerPageChange={(e) => { + // set the new limit + setRowsPerPage( + parseInt( + e.target.value, + 10, + ), + ); + }} + count={totalUsers} + /> + + + + ) : ( + + + No users + + + + )} + + )} + + + + { + // close it + setAddModalOpen(false); + + // de-select the user + setAddModalUser(null); + + // refresh if successful + if (success) { + // trigger the update + onChange(); + + getUsers.refresh(); + } + }} + /> + + ); +}; diff --git a/packages/client/src/components/settings/members/AddMembersOverlayUser.tsx b/packages/client/src/components/settings/UserTableUser.tsx similarity index 84% rename from packages/client/src/components/settings/members/AddMembersOverlayUser.tsx rename to packages/client/src/components/settings/UserTableUser.tsx index d0ac262e47..725c2a3ff2 100644 --- a/packages/client/src/components/settings/members/AddMembersOverlayUser.tsx +++ b/packages/client/src/components/settings/UserTableUser.tsx @@ -21,7 +21,7 @@ const StyledSecondaryText = styled(Typography)(({ theme }) => ({ color: theme.palette.text.secondary, })); -interface AddMembersOverlayUserProps { +interface UserTableUserProps { /** * Name of the user */ @@ -30,7 +30,7 @@ interface AddMembersOverlayUserProps { /** * Name of the user */ - username: string; + id: string; /** * Email of the user @@ -65,8 +65,8 @@ const extractInitials = (str: string): string => { }, ''); }; -export const AddMembersOverlayUser = (props: AddMembersOverlayUserProps) => { - const { name, username, email, type, action } = props; +export const UserTableUser = (props: UserTableUserProps) => { + const { name, id, email, type, action } = props; const initials = extractInitials(name); @@ -74,7 +74,11 @@ export const AddMembersOverlayUser = (props: AddMembersOverlayUserProps) => { {initials} - + {name || <> } { spacing={2} > User ID: - {username || <> } + {id || <> } { direction={'row'} alignItems={'center'} spacing={1} + title={`Email: ${email}`} > Email: @@ -110,10 +116,11 @@ export const AddMembersOverlayUser = (props: AddMembersOverlayUserProps) => { Type: diff --git a/packages/client/src/components/settings/index.ts b/packages/client/src/components/settings/index.ts index ab34ad329f..3ddd316f81 100644 --- a/packages/client/src/components/settings/index.ts +++ b/packages/client/src/components/settings/index.ts @@ -1,7 +1,5 @@ export * from './settings.types'; -export * from './members/'; -export * from './PendingMembersTable'; export * from './TeamMembersTable'; export * from './TeamProjectsTable'; export * from './TeamEnginesTable'; @@ -9,3 +7,6 @@ export * from './SettingsTiles'; export * from './UpdateSMSS'; export * from './FileTable'; export * from './EngineQASidebar'; +export * from './MembersTable'; +export * from './PendingMembersTable'; +export * from './UserTable'; diff --git a/packages/client/src/components/settings/members/AddMembersOverlay.tsx b/packages/client/src/components/settings/members/AddMembersOverlay.tsx deleted file mode 100644 index 7733041842..0000000000 --- a/packages/client/src/components/settings/members/AddMembersOverlay.tsx +++ /dev/null @@ -1,474 +0,0 @@ -import { useEffect, useState } from 'react'; -import { - styled, - Button, - IconButton, - Avatar, - Modal, - RadioGroup, - Typography, - Autocomplete, - Card, - Box, - Icon, - Stack, - useNotification, - TextField, -} from '@semoss/ui'; -import { - EditRounded, - RemoveRedEyeRounded, - ClearRounded, -} from '@mui/icons-material'; -import { AxiosResponse } from 'axios'; - -import { ALL_TYPES } from '@/types'; -import { PERMISSION_DESCRIPTION_MAP } from '@/constants'; - -import { useAPI, useRootStore, useSettings } from '@/hooks'; -import { AddMembersOverlayUser } from './AddMembersOverlayUser'; -import { SETTINGS_ROLE } from '../settings.types'; - -const StyledCard = styled(Card)({ - borderRadius: '12px', -}); - -const StyledModalContentText = styled(Modal.ContentText)({ - display: 'flex', - flexDirection: 'column', - gap: '.5rem', - marginTop: '12px', -}); - -const StyledCardHeader = styled(Card.Header)({ - color: '#000', - width: '100%', -}); - -const StyledOuterBox = styled('div', { - shouldForwardProp: (prop) => prop !== 'userLength', -})<{ - userLength: number; -}>(({ userLength }) => ({ - maxHeight: userLength > 2 ? '300px' : 'auto', - overflow: 'auto', - transition: 'max-height 0.3s ease', -})); - -// maps for permissions, -const permissionMapper = { - 1: 'Author', // BE: 'DISPLAY' - OWNER: 'Author', // BE: 'DISPLAY' - Author: 'OWNER', // DISPLAY: BE - 2: 'Editor', // BE: 'DISPLAY' - EDIT: 'Editor', // BE: 'DISPLAY' - Editor: 'EDIT', // DISPLAY: BE - 3: 'Read-Only', // BE: 'DISPLAY' - READ_ONLY: 'Read-Only', // BE: 'DISPLAY' - 'Read-Only': 'READ_ONLY', // DISPLAY: BE -}; - -interface AddMembersOverlayProps { - /** - * Type of engine - */ - type: ALL_TYPES; - - /** - * ID of the app or engine being edited - */ - id: string; - - /** - * Track if the model is open or close - */ - open: boolean; - - /** - * Called on close - * - * @returns - method that is called onClose - */ - onClose: (success: boolean) => void; -} - -export const AddMembersOverlay = (props: AddMembersOverlayProps) => { - const { type, id, open = false, onClose = () => null } = props; - - const { monolithStore } = useRootStore(); - const notification = useNotification(); - const { adminMode } = useSettings(); - - /** Add Member State */ - const [selectedMembers, setSelectedMembers] = useState([]); - const [selectedRole, setSelectedRole] = - useState('Read-Only'); - - useEffect(() => { - // reset on open or close - setSelectedMembers([]); - setSelectedRole('Read-Only'); - }, [open]); - - // get the api - const getMembersApi: Parameters[0] = - type === 'DATABASE' || - type === 'STORAGE' || - type === 'MODEL' || - type === 'VECTOR' || - type === 'FUNCTION' - ? ['getEngineUsersNoCredentials', adminMode, id] - : type === 'APP' - ? ['getProjectUsersNoCredentials', adminMode, id] - : null; - - const getMembers = useAPI(open ? getMembersApi : null); - - const isLoading = - getMembers.status === 'INITIAL' || getMembers.status === 'LOADING'; - const renderedMembers = - getMembers.status === 'SUCCESS' ? getMembers.data.data : []; - - /** - * @name addMembers - * - * Add members to the app or engine - */ - const addMembers = async () => { - let success = false; - - try { - // construct requests for post data - const requests = selectedMembers.map((m) => { - return { - userid: m.id, - permission: permissionMapper[selectedRole], - }; - }); - - if (requests.length === 0) { - notification.add({ - color: 'warning', - message: `No permissions to change`, - }); - - return; - } - - let response: AxiosResponse<{ success: boolean }> | null = null; - if ( - type === 'DATABASE' || - type === 'STORAGE' || - type === 'MODEL' || - type === 'VECTOR' || - type === 'FUNCTION' - ) { - response = await monolithStore.addEngineUserPermissions( - adminMode, - id, - requests, - ); - } else if (type === 'APP') { - response = await monolithStore.addProjectUserPermissions( - adminMode, - id, - requests, - ); - } - - if (!response) { - return; - } - - // ignore if there is no response - if (response.data.success) { - notification.add({ - color: 'success', - message: 'Successfully added member permissions', - }); - - success = true; - } else { - notification.add({ - color: 'error', - message: `Error changing user permissions`, - }); - } - } catch (e) { - notification.add({ - color: 'error', - message: String(e), - }); - } finally { - // close the overlay - onClose(success); - } - }; - - return ( - - Add Members - - - - ` +${selectedMembers.length - 2}` - } - value={[...selectedMembers]} - getOptionLabel={(option: any) => { - return `${option.name}`; - }} - isOptionEqualToValue={(option, value) => { - return option.name === value.name; - }} - onChange={(event, newValue: any) => { - setSelectedMembers([...newValue]); - }} - renderOption={(props, option) => { - const { ...optionProps } = props; - return ( -
  • - -
    • - ); - }} - renderInput={(params) => ( - - )} - /> - - {selectedMembers.map((user) => ( - { - // remove any selected users from the array - const filtered = - selectedMembers.filter( - (val) => val.id !== user.id, - ); - - setSelectedMembers(filtered); - }} - > - - - } - /> - ))} - - - - Permissions - - - { - const val = e.target.value; - if (val) { - setSelectedRole(val as SETTINGS_ROLE); - } - }} - > - - - - - A - - Author - - } - sx={{ color: '#000' }} - subheader={ - - {PERMISSION_DESCRIPTION_MAP[ - type - ].author || - `Error: update key in test-editor.constants to "${name}"`} - - } - action={ - - } - /> - - - - - - - Editor - - } - sx={{ color: '#000' }} - subheader={ - - {PERMISSION_DESCRIPTION_MAP[ - type - ].editor || - `Error: update key in test-editor.constants to "${name}"`} - - } - action={ - - } - /> - - - - - - - Read-Only - - } - sx={{ color: '#000' }} - subheader={ - - {PERMISSION_DESCRIPTION_MAP[ - type - ].readonly || - `Error: update key in test-editor.constants to "${name}"`} - - } - action={ - - } - /> - -     - - - - - - - - - - ); -}; diff --git a/packages/client/src/components/settings/members/index.ts b/packages/client/src/components/settings/members/index.ts deleted file mode 100644 index 6484c0a904..0000000000 --- a/packages/client/src/components/settings/members/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MembersTable'; diff --git a/packages/client/src/components/settings/settings.types.ts b/packages/client/src/components/settings/settings.types.ts index 8dd4a6fa8b..61161363c4 100644 --- a/packages/client/src/components/settings/settings.types.ts +++ b/packages/client/src/components/settings/settings.types.ts @@ -1,6 +1,6 @@ export type SETTINGS_ROLE = 'Author' | 'Editor' | 'Read-Only'; -export type SETTINGS_MEMBER = { +export type SETTINGS_PROVISIONED_USER = { id: string; name: string; type: string; @@ -10,3 +10,14 @@ export type SETTINGS_MEMBER = { permission_granted_by_type: string; date_added: string; }; + +export type SETTINGS_PENDING_USER = { + ID: string; + NAME: string; + EMAIL: string; + PERMISSION: string; + // Requester Info + REQUEST_TIMESTAMP: string; + REQUEST_TYPE: string; + REQUEST_USERID: string; +}; diff --git a/packages/client/src/components/workspace/Settings/SettingsView.tsx b/packages/client/src/components/workspace/Settings/SettingsView.tsx index 8fddbc1b0a..81cd62716a 100644 --- a/packages/client/src/components/workspace/Settings/SettingsView.tsx +++ b/packages/client/src/components/workspace/Settings/SettingsView.tsx @@ -91,7 +91,7 @@ export const SettingsView = () => { console.log('TODO')} + onChange={() => console.log('TODO')} /> )} {view === 'PENDING' && ( diff --git a/packages/client/src/pages/app/AppDetailPage.tsx b/packages/client/src/pages/app/AppDetailPage.tsx index c81c8c90b8..2ca0b78a1f 100644 --- a/packages/client/src/pages/app/AppDetailPage.tsx +++ b/packages/client/src/pages/app/AppDetailPage.tsx @@ -749,7 +749,7 @@ export const AppDetailPage = () => { { + onChange={() => { fetchUserSpecificData(); }} /> diff --git a/packages/client/src/pages/settings/AppSettingsDetailPage.tsx b/packages/client/src/pages/settings/AppSettingsDetailPage.tsx index b77358d9dc..2e3153abeb 100644 --- a/packages/client/src/pages/settings/AppSettingsDetailPage.tsx +++ b/packages/client/src/pages/settings/AppSettingsDetailPage.tsx @@ -111,9 +111,7 @@ export const AppSettingsDetailPage = () => { - getUserEnginePermission.refresh() - } + onChange={() => getUserEnginePermission.refresh()} /> )} {view === 'PENDING' && ( diff --git a/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx b/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx index e8777ea8e0..2553296d73 100644 --- a/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx +++ b/packages/client/src/pages/settings/EngineSettingsDetailPage.tsx @@ -117,9 +117,7 @@ export const EngineSettingsDetailPage = ( - getUserEnginePermission.refresh() - } + onChange={() => getUserEnginePermission.refresh()} /> )} {view === 'PENDING' && ( diff --git a/packages/client/src/pages/settings/MemberSettingsPage.tsx b/packages/client/src/pages/settings/MemberSettingsPage.tsx index cf5ca6c572..14431bb048 100644 --- a/packages/client/src/pages/settings/MemberSettingsPage.tsx +++ b/packages/client/src/pages/settings/MemberSettingsPage.tsx @@ -1,1362 +1,13 @@ -import { useEffect, useState } from 'react'; -import { - Delete, - Add, - Edit, - Close, - LocalPoliceRounded, - CloudUploadRounded, - DownloadForOfflineRounded, -} from '@mui/icons-material'; -import { - styled, - useNotification, - List, - Modal, - Button, - Checkbox, - Typography, - AvatarGroup, - Avatar, - Table, - IconButton, - Stack, - TextField, - Select, - Switch, -} from '@semoss/ui'; -import { useForm, useFormState, Controller } from 'react-hook-form'; -import { useNavigate } from 'react-router-dom'; -import { useRootStore, useAPI, useSettings } from '@/hooks'; -import { LoadingScreen } from '@/components/ui'; - -const StyledContainer = styled('div')({ - width: '100%', -}); - -const StyledEnd = styled('div')(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-between', - paddingBottom: theme.spacing(1), -})); - -const StyledMemberTypography = styled(Typography)(({ theme }) => ({ - paddingTop: theme.spacing(1), - color: theme.palette.grey['500'], -})); - -const StyledTitle = styled('div')({ - display: 'flex', -}); - -const StyledModal = styled('div')({ - width: '1000px', - height: '854px', - padding: '16px', -}); - -const StyledListItem = styled(List.Item)({ - padding: '4px 0', -}); - -const StyledList = styled(List)({ - padding: 0, -}); - -const StyledModalTitle = styled(Modal.Title)({ - padding: '24px', -}); - -const StyledModalContent = styled(Modal.Content)({ - paddingTop: '4px', -}); - -const StyledStack = styled(Stack)({ - marginTop: '4px', -}); - -const StyledAddMemberButton = styled(Button)({ - textAlign: 'right', -}); - -const StyledCountryCodeExt = styled(TextField)({ - width: '168px', -}); - -const StyledPhoneNumber = styled(TextField)({ - width: '550px', -}); - -const StyledCredentials = styled(Typography)({ - padding: '8px 0px', -}); - -const StyledPermissions = styled(Typography)({ - padding: '25px 0', -}); - -const StyledPaddingTopStack = styled(Stack)({ - paddingTop: '4px', -}); - -const StyledMembers = styled(Typography)({ - marginRight: '16px', -}); - -const StyledAvatarGroup = styled(AvatarGroup)({ - marginRight: '8px', -}); - -const StyledAvatar = styled(Avatar)({ - height: 32, - width: 32, -}); - -interface Member { - admin: boolean; - email: string; - id: string; - name: string; - type: string; - username: string; - password: string; - phone: string; - publisher: boolean; - exporter: boolean; - phoneextension: string; - countrycode: string; -} - -interface PendingMember { - admin: boolean; - username: string; - email: string; - countrycode: string; - phone: string; - phoneextension: string; - id: string; - name: string; - type: string; - publisher: boolean; - exporter: boolean; -} - -interface EditUserForm { - id: string; - username: string; - name: string; - password: string; - email: string; - phone: string; - phoneextension: string; - countrycode: string; - admin: boolean; - exporter: boolean; - publisher: boolean; - type: string; -} - -const capitalize = (input: string) => { - return input.charAt(0).toUpperCase() + input.slice(1); -}; - -const passwordValidate = (password: string) => { - if (!password) { - return false; - } - if (!password.match(/[a-z]/g)) { - return false; - } - - if (!password.match(/[A-Z]/g)) { - return false; - } - - if (!password.match(/[0-9]/g)) { - return false; - } - - if (!password.match(/[!@#$%^&*]/g)) { - return false; - } - - return true; -}; - -const numberValidate = (number: string) => { - if (!number) { - return false; - } - if (!number.match(/^[()-.\s0-9]{8,}$/)) { - return false; - } - - return true; -}; +import { Navigate } from 'react-router-dom'; +import { useSettings } from '@/hooks'; +import { UserTable } from '@/components/settings'; export const MemberSettingsPage = () => { const { adminMode } = useSettings(); - const { configStore, monolithStore } = useRootStore(); - const notification = useNotification(); - const navigate = useNavigate(); if (!adminMode) { - navigate('/settings'); + return ; } - const [members, setMembers] = useState([]); - const [addMemberModal, setAddMemberModal] = useState(false); - const [memberInfoModal, setMemberInfoModal] = useState(false); - const [activeMember, setActiveMember] = useState(null); - const [page, setPage] = useState(0); - - const { - control, - reset, - handleSubmit, - getValues, - watch, - formState: { errors }, - } = useForm<{ - // edit existing member fields - id: string; - username: string; - name: string; - password: string; - email: string; - phone: string; - phoneextension: string; - countrycode: string; - admin: boolean; - exporter: boolean; - publisher: boolean; - type: string; - // add pending member fields - }>({ - defaultValues: { - id: activeMember?.id, - username: activeMember?.username, - name: activeMember?.name, - email: activeMember?.email, - phone: activeMember?.phone, - phoneextension: activeMember?.phoneextension, - countrycode: activeMember?.countrycode, - admin: activeMember?.admin, - exporter: activeMember?.exporter, - publisher: activeMember?.exporter, - type: activeMember?.type, - }, - }); - - const type = watch('type', ''); - - const { dirtyFields } = useFormState({ - control, - }); - - const providers = configStore.store.config.providers.map((val) => - capitalize(val), - ); - - const updateMemberInfo = (member: Member) => { - monolithStore['editMemberInfo'](adminMode, member) - .then(() => { - const message = - 'You have successfully updated user information'; - notification.add({ - color: 'success', - message: message, - }); - getMembers.refresh(); - }) - .catch((error) => { - notification.add({ - color: 'error', - message: error, - }); - }); - }; - - const updateActiveMember = handleSubmit((data) => { - setMemberInfoModal(false); - monolithStore['editMemberInfo'](adminMode, data) - .then(() => { - const message = `You have successfully updated user information`; - notification.add({ - color: 'success', - message: message, - }); - getMembers.refresh(); - }) - .catch((error) => { - notification.add({ - color: 'error', - message: error, - }); - }); - }); - - const deleteActiveMember = (member: Member) => { - monolithStore['deleteMember'](adminMode, member.id, member.type).then( - () => { - setActiveMember(null); - getMembers.refresh(); - }, - ); - }; - - const createUser = handleSubmit((data: EditUserForm) => { - monolithStore['createUser'](adminMode, data).then((resp) => { - if (resp.data) { - const message = `You have successfully added new user(s)`; - notification.add({ - color: 'success', - message: message, - }); - getMembers.refresh(); - const newMember = members.find((m) => { - m.id == data.id; - }); - setActiveMember(newMember); - setAddMemberModal(false); - } - }); - }); - - const getMembers = useAPI(['getAllUsers', adminMode]); - - // TODO: Remove this useEffect. It is unnecessary. - useEffect(() => { - // REST call to get all apps - if (getMembers.status !== 'SUCCESS' || !getMembers.data) { - return; - } - - // flush into a non optional object - const updated: Member[] = getMembers.data.map((m) => ({ - admin: false, - email: '', - name: '', - username: '', - password: '', - phone: '', - publisher: false, - exporter: false, - phoneextension: '', - countrycode: '', - ...m, - })); - - setMembers(updated); - - () => { - console.warn('Cleaning up getMembers'); - setMembers([]); - }; - }, [getMembers.status, getMembers.data]); - // show a loading screen when getProjects is pending - if (getMembers.status !== 'SUCCESS') { - return ( - - ); - } - - const buildMemberModal = () => { - return ( - - - - Edit Member - - { - setActiveMember(null); - setMemberInfoModal(false); - }} - > - - - - {activeMember && ( -
    - - - Details - - - -
    - - { - return ( - - field.onChange( - e.target.value, - ) - } - > - ); - }} - /> - { - return ( - - field.onChange( - e.target.value, - ) - } - type="email" - > - ); - }} - /> - - - { - return ( - - field.onChange( - e.target.value, - ) - } - > - ); - }} - /> - - numberValidate(value), - pattern: /^[()-.\s0-9]{8,}$/, - }} - render={({ field }) => { - return ( - - - field.onChange( - e.target - .value, - ) - } - > - {errors.phone && ( - - Note: Number - should be - written in - XXX-XXX-XXXX - format - - )} - - ); - }} - /> - { - return ( - - field.onChange( - e.target.value, - ) - } - > - ); - }} - /> - - - - Credentials - - - { - return ( - - ); - }} - /> - - { - return ( - { - field.onChange( - e.target.value, - ); - }} - > - ); - }} - /> - - { - return ( - { - field.onChange( - e.target.value, - ); - }} - > - ); - }} - /> - - {type === 'Native' && ( - <> - - passwordValidate(value), - }} - render={({ field }) => { - return ( - { - field.onChange( - e.target - .value, - ); - }} - > - ); - }} - /> - - {dirtyFields.password && ( - - Note: Password must have one - letter, one capital, one - number, one special - character, and be a minimum - of 8 characters. - - )} - - )} - - - Permissions - - - - { - return ( - - field.onChange( - !field.value, - ) - } - /> - ); - }} - /> - } - > - - - - Admin} - secondary="All-Access pass to app information" - /> - - - { - return ( - - field.onChange( - !field.value, - ) - } - /> - ); - }} - /> - } - > - - - - Publisher - } - secondary="Anyone on the platform can access" - /> - - - { - return ( - - field.onChange( - !field.value, - ) - } - /> - ); - }} - /> - } - > - - - - Exporter - } - secondary="Anyone on the platform can access" - /> - - - -
    -     - - - - -
    - )} -     - ); - }; - - const buildNewMemberModal = () => { - return ( - - - - Add Member - - { - reset(); - setAddMemberModal(false); - }} - > - - - -
    - - - Details - - - -
    - - { - return ( - - field.onChange( - e.target.value, - ) - } - > - ); - }} - /> - { - return ( - - field.onChange( - e.target.value, - ) - } - type="email" - > - ); - }} - /> - - - { - return ( - - field.onChange( - e.target.value, - ) - } - > - ); - }} - /> - - numberValidate(value), - pattern: /^[()-.\s0-9]{8,}$/, - }} - render={({ field }) => { - return ( - - - field.onChange( - e.target.value, - ) - } - > - {errors.phone && ( - - Note: Number should - be written in - XXX-XXX-XXXX format - - )} - - ); - }} - /> - { - return ( - - field.onChange( - e.target.value, - ) - } - > - ); - }} - /> - - - - Credentials - - { - return ( - - ); - }} - /> - - { - return ( - { - field.onChange( - e.target.value, - ); - }} - > - ); - }} - /> - - { - return ( - { - field.onChange( - e.target.value, - ); - }} - > - ); - }} - /> - {type === 'Native' && ( - <> - - passwordValidate(value), - }} - render={({ field }) => { - return ( - { - field.onChange( - e.target.value, - ); - }} - > - ); - }} - /> - - {dirtyFields.password && ( - - Note: Password must have one - letter, one capital, one number, - one special character, and be a - minimum of 8 characters. - - )} - - )} - - Permissions - - - - { - return ( - - field.onChange( - !field.value, - ) - } - /> - ); - }} - /> - } - > - - - - Admin} - secondary="All-Access pass to app information" - /> - - - { - return ( - - field.onChange( - !field.value, - ) - } - /> - ); - }} - /> - } - > - - - - Publisher} - secondary="Anyone on the platform can access" - /> - - - { - return ( - - field.onChange( - !field.value, - ) - } - /> - ); - }} - /> - } - > - - - - Exporter} - secondary="Anyone on the platform can access" - /> - - - -
    -     - - - - -
    -     - ); - }; - - return ( - <> - - - - - Members - - {members && ( - <> - - {members.map((mem, i) => { - return ( - - {mem.name[0]} - - ); - })} - - {members.length > 1 ? ( - - {members.length} members - - ) : ( - - {members.length} member - - )} - - )} - - - } - onClick={() => { - setAddMemberModal(true); - }} - > - Add New - - - - {members && ( - - - - - - Name - - - Email - - - Type - - - Role - - - Action - - - - - {members.map((mem, i) => ( - - {mem.name} - {mem.email} - {mem.type} - - { - updateMemberInfo({ - ...mem, - publisher: - !mem.publisher, - }); - }} - /> - { - updateMemberInfo({ - ...mem, - exporter: !mem.exporter, - }); - }} - /> - { - updateMemberInfo({ - ...mem, - admin: !mem.admin, - }); - }} - /> - - - { - setActiveMember(mem); - reset(mem); - setMemberInfoModal(true); - }} - > - - - { - deleteActiveMember(mem); - }} - > - - - - - ))} - - - - { - setPage(v); - }} - page={page} - count={Math.ceil(members.length / 5)} - /> - - -
    -     - )} -     - - {/* MemberInfoModal */} - - {buildMemberModal()} - - {/* Add New User Modal */} - - {buildNewMemberModal()} - - - ); + return ; }; diff --git a/packages/client/src/pages/settings/MyProfilePage.tsx b/packages/client/src/pages/settings/MyProfilePage.tsx index e7eafcaf3f..18077abb98 100644 --- a/packages/client/src/pages/settings/MyProfilePage.tsx +++ b/packages/client/src/pages/settings/MyProfilePage.tsx @@ -238,17 +238,22 @@ export const MyProfilePage = () => { const response = await monolithStore.editMemberInfo(true, userObj); - notification.add({ - color: 'success', - message: 'Successfully edited profile information', - }); - } catch (e) { - if (e instanceof Error) { + if (response.data) { + notification.add({ + color: 'success', + message: 'Successfully edited profile information', + }); + } else { notification.add({ color: 'error', - message: e.message, + message: 'Error editing profile information', }); } + } catch (e) { + notification.add({ + color: 'error', + message: String(e), + }); } }; diff --git a/packages/client/src/stores/monolith/monolith.store.ts b/packages/client/src/stores/monolith/monolith.store.ts index 014158b35e..e7c619e8a5 100644 --- a/packages/client/src/stores/monolith/monolith.store.ts +++ b/packages/client/src/stores/monolith/monolith.store.ts @@ -607,10 +607,19 @@ export class MonolithStore { /** * @name getEngineUsersNoCredentials * @param admin - * @param appId + * @param engineId + * @param limit + * @param offSet + * @param searchTerm * @returns */ - async getEngineUsersNoCredentials(admin: boolean, appId: string) { + async getEngineUsersNoCredentials( + admin: boolean, + engineId: string, + limit: number, + offset: number, + searchTerm: string, + ) { let url = `${Env.MODULE}/api/auth/`; // Currently no admin ENDPOINT; @@ -631,7 +640,12 @@ export class MonolithStore { username: string; }[] >(url, { - params: { engineId: appId }, + params: { + engineId: engineId, + limit: limit, + offset: offset, + searchTerm: searchTerm, + }, }) .catch((error) => { throw Error(error); @@ -1822,10 +1836,19 @@ export class MonolithStore { /** * @name getProjectUsersNoCredentials * @param admin if admin initiated the call - * @param projectId the id of app + * @param appId the id of app + * @param limit + * @param offSet + * @param searchTerm * @desc get the existing users and their permissions for this app */ - async getProjectUsersNoCredentials(admin: boolean, projectId: string) { + async getProjectUsersNoCredentials( + admin: boolean, + appId: string, + limit: number, + offset: number, + searchTerm: string, + ) { let url = `${Env.MODULE}/api/auth/`; if (admin) { @@ -1845,7 +1868,12 @@ export class MonolithStore { username: string; }[] >(url, { - params: { projectId: projectId }, + params: { + projectId: appId, + limit: limit, + offset: offset, + searchTerm: searchTerm, + }, }) .catch((error) => { throw Error(error); @@ -2551,7 +2579,12 @@ export class MonolithStore { * @param admin - is admin user * @returns MemberInterface[] */ - async getAllUsers(admin: boolean) { + async getAllUsers( + admin: boolean, + searchTerm?: string, + offset?: number, + limit?: number, + ) { let url = `${Env.MODULE}/api/auth/`; if (admin) { @@ -2572,8 +2605,18 @@ export class MonolithStore { publisher?: boolean; exporter?: boolean; email?: string; + phone?: string; + phoneextension?: string; + countrycode?: string; + username?: string; }[] - >(url) + >(url, { + params: { + filterWord: searchTerm, + offset: offset, + limit: limit, + }, + }) .catch((error) => { throw Error(error); }); @@ -2604,7 +2647,7 @@ export class MonolithStore { postData += 'user=' + encodeURIComponent(JSON.stringify(user)); const response = await axios - .post<{ success: boolean }>(url, postData, { + .post(url, postData, { headers: { 'content-type': 'application/x-www-form-urlencoded', }, @@ -2635,7 +2678,7 @@ export class MonolithStore { postData += 'userId=' + encodeURIComponent(userId); postData += '&type=' + encodeURIComponent(userType); - const response = await axios.post<{ success: boolean }>(url, postData, { + const response = await axios.post(url, postData, { headers: { 'content-type': 'application/x-www-form-urlencoded', }, @@ -2680,15 +2723,11 @@ export class MonolithStore { newUserInfo += '&password=' + encodeURIComponent(user.password); } - const response = await axios.post<{ success: boolean }>( - url, - newUserInfo, - { - headers: { - 'content-type': 'application/x-www-form-urlencoded', - }, + const response = await axios.post(url, newUserInfo, { + headers: { + 'content-type': 'application/x-www-form-urlencoded', }, - ); + }); return response; } diff --git a/packages/ui/src/components/Autocomplete/Autocomplete.tsx b/packages/ui/src/components/Autocomplete/Autocomplete.tsx index 1e478031e8..66702bb33c 100644 --- a/packages/ui/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/ui/src/components/Autocomplete/Autocomplete.tsx @@ -40,7 +40,6 @@ export interface AutocompleteProps< | "unstable_isActiveElementInListbox" | "autoComplete" | "autoHighlight" - | "loading" | "autoSelect" | "blurOnSelect" | "clearOnBlur" @@ -52,7 +51,6 @@ export interface AutocompleteProps< | "disableListWrap" | "getOptionDisabled" | "handleHomeEndKeys" - | "includeInputInList" | "openOnFocus" | "selectOnFocus" | "selectOnFocus"