From 729306f3ed5c66531ee32a8a8760e76209a9e5eb Mon Sep 17 00:00:00 2001 From: AhsanKhan7 Date: Wed, 28 Sep 2022 20:46:16 +0500 Subject: [PATCH 1/7] API updates --- global.d.ts | 2 +- src/api/users/getMyUserApi.ts | 2 +- src/ui/layouts/Home.tsx | 1 - .../settings/Organization/DeleteMember.tsx | 2 +- .../settings/Organization/InvitePopup.tsx | 12 ++++--- .../layouts/settings/Organization/index.tsx | 31 ++++++++++--------- .../settings/Organization/useHeaderCols.tsx | 2 +- 7 files changed, 28 insertions(+), 24 deletions(-) diff --git a/global.d.ts b/global.d.ts index 4266de62d..4dbbf6cba 100644 --- a/global.d.ts +++ b/global.d.ts @@ -60,7 +60,7 @@ interface TMember { organizationId: string; fullName: string; email: string; - created_at: Date; + created: Date; active: boolean; activation_token: string; } diff --git a/src/api/users/getMyUserApi.ts b/src/api/users/getMyUserApi.ts index 0138a36be..4959f193c 100644 --- a/src/api/users/getMyUserApi.ts +++ b/src/api/users/getMyUserApi.ts @@ -1,5 +1,5 @@ import { fetchApiWithAuthRequest } from '../fetchApi'; -import { endpoints } from '../endpoints'; +import { endpoints } from '../endpoints'; import { httpMethods } from '../constants'; import { apiUrl } from '../apiUrl'; import mockApi from '../mockApiData'; diff --git a/src/ui/layouts/Home.tsx b/src/ui/layouts/Home.tsx index 1b634eef7..4a6ea705a 100644 --- a/src/ui/layouts/Home.tsx +++ b/src/ui/layouts/Home.tsx @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; import { AuthenticatedLayout } from './common/layouts/AuthenticatedLayout'; - import { SidebarContainer } from './common/layouts/SidebarContainer'; import { Box, diff --git a/src/ui/layouts/settings/Organization/DeleteMember.tsx b/src/ui/layouts/settings/Organization/DeleteMember.tsx index 5e9017876..14f0f66ff 100644 --- a/src/ui/layouts/settings/Organization/DeleteMember.tsx +++ b/src/ui/layouts/settings/Organization/DeleteMember.tsx @@ -29,7 +29,7 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => { onSuccess: () => { setPopupOpen(false); setSubmitting(false); - dispatch(organizationActions.getInvites({})); + dispatch(organizationActions.getMembers({})); dispatch( showToasterAction({ type: 'success', diff --git a/src/ui/layouts/settings/Organization/InvitePopup.tsx b/src/ui/layouts/settings/Organization/InvitePopup.tsx index 9bc4b7b88..d98ab4466 100644 --- a/src/ui/layouts/settings/Organization/InvitePopup.tsx +++ b/src/ui/layouts/settings/Organization/InvitePopup.tsx @@ -11,7 +11,7 @@ import { H3, PrimaryButton, } from '../../../components'; -import { useDispatch, useSelector } from '../../../hooks'; +import { useSelector, useDispatch } from '../../../hooks'; import { Popup } from '../../common/Popup'; import { fieldValidation } from '../../../../utils'; import { organizationSelectors } from '../../../../redux/selectors'; @@ -25,10 +25,9 @@ const emailErrorText = (email: string) => ? translate('popup.email.invalidEmail') : translate('popup.email.required'); -export const InvitePopup: React.FC<{ - setPopupOpen: (attr: boolean) => void; -}> = ({ setPopupOpen }) => { - +export const InvitePopup: React.FC<{ setPopupOpen: (attr: boolean) => void }> + = ({ setPopupOpen}) => { + const [submitting, setSubmitting] = useState(false); const [hasSubmittedWithErrors, setHasSubmittedWithErrors] = useState(false); const [email, setEmail] = useState('') @@ -61,6 +60,8 @@ export const InvitePopup: React.FC<{ setSubmitting(false); }, onSuccess: () => { + dispatch(organizationActions.getMembers({})); + setSubmitting(false); setShowTokField(true) } }), @@ -68,6 +69,7 @@ export const InvitePopup: React.FC<{ } }; + return ( { diff --git a/src/ui/layouts/settings/Organization/index.tsx b/src/ui/layouts/settings/Organization/index.tsx index b2fe0e8b4..13e46c3b3 100644 --- a/src/ui/layouts/settings/Organization/index.tsx +++ b/src/ui/layouts/settings/Organization/index.tsx @@ -1,8 +1,9 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { organizationActions } from '../../../../redux/actions'; import { organizationSelectors } from '../../../../redux/selectors'; import { getInitials } from '../../../../utils'; + import { FlexBox, Box, @@ -11,7 +12,7 @@ import { PrimaryButton, LinkBox, } from '../../../components'; -import { useRequestOnMount } from '../../../hooks'; +import { useRequestOnMount, useDispatch } from '../../../hooks'; import { Table } from '../../common/Table'; import { translate } from './translate'; import { useMemberHeaderCols } from './useHeaderCols'; @@ -21,26 +22,28 @@ type Table = 'members' | 'invites'; export const Organization: React.FC = () => { + const dispatch = useDispatch() + const [fetchingMembers, setFetchingMembers] = useState(true); const [popupOpen, setPopupOpen] = useState(false); const [currentTable, setCurrentTable] = useState('members'); - useRequestOnMount(organizationActions.getMy); - useRequestOnMount(organizationActions.getRoles); - - useRequestOnMount(() => - organizationActions.getMembers({ - onSuccess: () => setFetchingMembers(false), - onFailure: () => setFetchingMembers(false), - }), - ); - const organization = useSelector(organizationSelectors.myOrganization); const members = useSelector(organizationSelectors.myMembers); - // const invites = useSelector(organizationSelectors.invites); const memberHeaderCols = useMemberHeaderCols(); + useRequestOnMount(organizationActions.getMy); + useRequestOnMount(organizationActions.getRoles); + + useEffect(() => { + dispatch(organizationActions.getMembers({ + onSuccess: () => setFetchingMembers(false), + onFailure: () => setFetchingMembers(false), + }), + ); + }, [dispatch]) + if (!organization) return null; return ( @@ -48,7 +51,7 @@ export const Organization: React.FC = () => { {popupOpen && ( + /> )} diff --git a/src/ui/layouts/settings/Organization/useHeaderCols.tsx b/src/ui/layouts/settings/Organization/useHeaderCols.tsx index 1bd8c0cc2..e7d3964b5 100644 --- a/src/ui/layouts/settings/Organization/useHeaderCols.tsx +++ b/src/ui/layouts/settings/Organization/useHeaderCols.tsx @@ -117,7 +117,7 @@ export const useMemberHeaderCols = (): HeaderCol[] => { - {formatDateToDisplay(member.created_at)} + {formatDateToDisplay(member.created)} ), From e4329bf165e84f4e534f9aa3515b223d346aaa46 Mon Sep 17 00:00:00 2001 From: AhsanKhan7 Date: Thu, 29 Sep 2022 21:02:50 +0500 Subject: [PATCH 2/7] register and other updates --- .../AuthenticatedSidebar/Menu/index.tsx | 67 ++++++++--------- .../AuthenticatedSidebar/SideFooter/index.tsx | 8 +-- .../AuthenticatedSidebar/index.tsx | 4 +- .../PipelineDetail/Configuration/index.tsx | 32 +++++++-- .../pipelines/PipelineDetail/index.tsx | 71 ++++++++++++++++++- .../Pipelines/List/getHeaderCols.tsx | 8 +-- .../settings/Organization/tokenPopup.tsx | 2 +- .../Stacks/List/getHeaderCols.tsx | 6 +- .../StackDetail/Configuration/useService.ts | 6 +- src/ui/layouts/stacks/StackDetail/index.tsx | 18 +++-- .../stacks/Stacks/List/getHeaderCols.tsx | 4 +- 11 files changed, 156 insertions(+), 70 deletions(-) diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx index 649affa64..02a629911 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx @@ -66,7 +66,6 @@ export const Menu: React.FC = () => { to={routePaths.stacks.list} text={translate('menu.stacks.text')} /> - {/*
console.log('asdasd')}> */} { return ( @@ -84,10 +83,33 @@ export const Menu: React.FC = () => { )} text={translate('menu.stackComponents.text')} /> - {/*
*/} - {locationPath.includes('components') && ( - <> - {/* + {stackComponentsTypes?.map((item) => ( + { + return !!matchPath(locationPath, { + path: routePaths.stackComponents.base(item), + exact: false, + }); + }} + subItem={true} + Icon={() => ( + + )} + to={routePaths.stackComponents.base(item)} + text={item} + /> + ) + )} + + )} + + {/* { // return !!matchPath(locationPath, { // path: routePaths.stackComponents.base(item), @@ -101,40 +123,7 @@ export const Menu: React.FC = () => { to={routePaths.stackComponents.base(stackComponentsTypes[0])} text={translate('menu.stackComponents.text')} /> */} - ; - {stackComponentsTypes?.map((item) => ( - <> - { - return !!matchPath(locationPath, { - path: routePaths.stackComponents.base(item), - exact: false, - }); - }} - subItem={true} - Icon={() => ( - - )} - to={routePaths.stackComponents.base(item)} - text={item} - /> - ; - - ))} - {/* - ( - - )} - to={routePaths.datasources} - text={translate('menu.stackComponents.text')} - /> */} - - )} + {/* ( diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx index 99fd154ee..ab1a518ab 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { MenuItem } from '../Menu/MenuItem'; import { MenuItemExternal } from './MenuItemExternal'; import { routePaths } from '../../../../../../../routes/routePaths'; -import { Box, Separator, icons } from '../../../../../../components'; +import { Box, Separator, icons, Paragraph } from '../../../../../../components'; import { iconSizes, iconColors } from '../../../../../../../constants'; import { translate } from '../translate'; import axios from 'axios'; @@ -44,9 +44,9 @@ export const SideFooter: React.FC = () => { )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} exact /> - -
UI Version v{process.env.REACT_APP_VERSION}
-
ZenMl v{apiVersion}
+ + UI Version v{process.env.REACT_APP_VERSION} + ZenMl v{apiVersion} ); diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx index a7febb0e1..46078ccb2 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx @@ -32,7 +32,7 @@ export const AuthenticatedSidebar: React.FC<{ className={cn(styles.sidebar, mobileMenuOpen && styles.mobileSidebarOpen)} > - + diff --git a/src/ui/layouts/pipelines/PipelineDetail/Configuration/index.tsx b/src/ui/layouts/pipelines/PipelineDetail/Configuration/index.tsx index a090b4a80..76a1d8fa8 100644 --- a/src/ui/layouts/pipelines/PipelineDetail/Configuration/index.tsx +++ b/src/ui/layouts/pipelines/PipelineDetail/Configuration/index.tsx @@ -2,10 +2,14 @@ import React from 'react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'; -import { FlexBox, H4, GhostButton } from '../../../../components'; +import { Box, FlexBox, H4, GhostButton, icons } from '../../../../components'; -import { translate } from '../translate'; +import { useDispatch } from '../../../../hooks'; +import { showToasterAction } from '../../../../../redux/actions'; +import { toasterTypes } from '../../../../../constants'; +import { iconColors, iconSizes } from '../../../../../constants'; +import { translate } from '../translate'; import styles from './index.module.scss'; import { useService } from './useService'; @@ -14,6 +18,17 @@ export const Configuration: React.FC<{ pipelineId: TId }> = ({ }) => { const { downloadYamlFile, pipelineConfig } = useService({ pipelineId }); + const dispatch = useDispatch() + const handleCopy = () => { + navigator.clipboard.writeText(pipelineConfig) + dispatch( + showToasterAction({ + description: 'Config copied to clipboard', + type: toasterTypes.success, + }), + ); + } + return ( = ({ justifyContent="space-between" >

{translate('configuration.title.text')}

- - {translate('configuration.button.text')} - + + + {translate('configuration.button.text')} + + + + + = ({ style={okaidia} > {pipelineConfig} - + ); diff --git a/src/ui/layouts/pipelines/PipelineDetail/index.tsx b/src/ui/layouts/pipelines/PipelineDetail/index.tsx index 8890297dd..1ff3143ba 100644 --- a/src/ui/layouts/pipelines/PipelineDetail/index.tsx +++ b/src/ui/layouts/pipelines/PipelineDetail/index.tsx @@ -1,5 +1,8 @@ import React from 'react'; +import { Box, Paragraph, icons } from '../../../components'; +import { iconColors, iconSizes } from '../../../../constants'; +import { formatDateToDisplay } from '../../../../utils'; import { routePaths } from '../../../../routes/routePaths'; import { translate } from './translate'; import { Configuration } from './Configuration'; @@ -47,13 +50,79 @@ export const PipelineDetail: React.FC = () => { const tabPages = getTabPages(pipeline.id); const breadcrumbs = getBreadcrumbs(pipeline.id); + const boxStyle = { + backgroundColor: '#E9EAEC', + padding: '30px 0', + borderRadius: '8px', + marginTop: '20px', + display: 'flex', + justifyContent: 'space-around', + }; + const headStyle = { color: '#828282' }; + return ( + > + + + ID + + {pipeline.id} + + + + NAME + + {pipeline.name} + + + + SHARED + + {pipeline.isShared ? ( + + ) : ( + + )} + + + + OWNER + + {pipeline.user.name} + + + + CREATED AT + + {formatDateToDisplay(pipeline.created)} + + + + + ); }; diff --git a/src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx b/src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx index a0b554c62..19f94373b 100644 --- a/src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx +++ b/src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx @@ -53,7 +53,7 @@ export const getHeaderCols = ({ ID ), - width: '13%', + width: '8%', renderRow: (pipeline: TPipeline) => ( {truncate(pipeline.id, ID_MAX_LENGTH)} @@ -66,7 +66,7 @@ export const getHeaderCols = ({ NAME ), - width: '15%', + width: '8%', renderRow: (pipeline: TPipeline) => ( {pipeline.name} ), @@ -77,14 +77,14 @@ export const getHeaderCols = ({ STATUS ), - width: '10%', + width: '8%', renderRow: (pipeline: TPipeline) => , }, { render: () => ( - AUTHOR + OWNER ), width: '11%', diff --git a/src/ui/layouts/settings/Organization/tokenPopup.tsx b/src/ui/layouts/settings/Organization/tokenPopup.tsx index 21ff9f374..77d16ac2a 100644 --- a/src/ui/layouts/settings/Organization/tokenPopup.tsx +++ b/src/ui/layouts/settings/Organization/tokenPopup.tsx @@ -29,7 +29,7 @@ export const TokenPopup: React.FC<{ const dispatch = useDispatch(); const inviteCode = useSelector(organizationSelectors.inviteForCode); - + const generateToken = () => { setSubmitting(true); dispatch( diff --git a/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx b/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx index 824e2085f..76aa37160 100644 --- a/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx +++ b/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx @@ -57,7 +57,7 @@ export const getHeaderCols = ({ { render: () => ( - FLAVOUR + FLAVOR ), width: '15%', @@ -68,7 +68,7 @@ export const getHeaderCols = ({ { render: () => ( - Shared + SHARED ), width: '15%', @@ -96,7 +96,7 @@ export const getHeaderCols = ({ { render: () => ( - USER + OWNER ), width: '15%', diff --git a/src/ui/layouts/stacks/StackDetail/Configuration/useService.ts b/src/ui/layouts/stacks/StackDetail/Configuration/useService.ts index 2dfb3542c..522706413 100644 --- a/src/ui/layouts/stacks/StackDetail/Configuration/useService.ts +++ b/src/ui/layouts/stacks/StackDetail/Configuration/useService.ts @@ -17,9 +17,9 @@ export const useService = ({ stackId }: { stackId: TId }): ServiceInterface => { }; Object.keys(stack.components).forEach((element) => { yamlConfigObj.components[element] = { - flavor: stack.components[element][0].flavor, - name: stack.components[element][0].name, - ...stack.components[element][0].configuration, + flavor: stack?.components[element][0]?.flavor_name, + name: stack?.components[element][0]?.name, + ...stack?.components[element][0]?.configuration, }; }); diff --git a/src/ui/layouts/stacks/StackDetail/index.tsx b/src/ui/layouts/stacks/StackDetail/index.tsx index 98c38dc31..3d86a8122 100644 --- a/src/ui/layouts/stacks/StackDetail/index.tsx +++ b/src/ui/layouts/stacks/StackDetail/index.tsx @@ -64,12 +64,12 @@ export const StackDetail: React.FC = () => { - Stack ID + ID @@ -77,7 +77,15 @@ export const StackDetail: React.FC = () => { - Shared + NAME + + {stack.name} + + + + SHARED { - Author + OWNER @@ -105,7 +113,7 @@ export const StackDetail: React.FC = () => { - Created + CREATED AT diff --git a/src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx b/src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx index a01b36df7..64697bf6e 100644 --- a/src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx +++ b/src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx @@ -51,7 +51,7 @@ export const getHeaderCols = ({ { render: () => ( - STACK ID + ID ), width: '8%', @@ -62,7 +62,7 @@ export const getHeaderCols = ({ { render: () => ( - STACK NAME + NAME ), width: '8%', From 06236268aa53fca6df60592baa9378716ec31ad8 Mon Sep 17 00:00:00 2001 From: AhsanKhan7 Date: Thu, 29 Sep 2022 21:27:28 +0500 Subject: [PATCH 3/7] api update --- src/api/fetchApi/index.ts | 20 +++++++++---------- .../AuthenticatedSidebar/SideFooter/index.tsx | 13 ++++++++++-- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/api/fetchApi/index.ts b/src/api/fetchApi/index.ts index 6a0575935..045ba044c 100644 --- a/src/api/fetchApi/index.ts +++ b/src/api/fetchApi/index.ts @@ -19,11 +19,11 @@ export const fetchApi = ({ headers?: any; params?: any; }): Promise => { - if (process.env.REACT_APP_MOCKAPI_RESPONSE) { - return new Promise((resolve, reject) => { - reject(); - }); - } + // if (process.env.REACT_APP_MOCKAPI_RESPONSE) { + // return new Promise((resolve, reject) => { + // reject(); + // }); + // } return axios({ method: method || httpMethods.get, url, @@ -46,11 +46,11 @@ export const fetchApiWithAuthRequest = ({ authenticationToken: string; headers?: any; }): Promise => { -if (process.env.REACT_APP_MOCKAPI_RESPONSE) { - return new Promise((resolve, reject) => { - reject(); - }); - } +// if (process.env.REACT_APP_MOCKAPI_RESPONSE) { +// return new Promise((resolve, reject) => { +// reject(); +// }); +// } return axios({ method: method || httpMethods.get, url, diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx index ab1a518ab..fcfab5d15 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx @@ -5,21 +5,30 @@ import { routePaths } from '../../../../../../../routes/routePaths'; import { Box, Separator, icons, Paragraph } from '../../../../../../components'; import { iconSizes, iconColors } from '../../../../../../../constants'; import { translate } from '../translate'; +import { sessionSelectors } from '../../../../../../../redux/selectors/session'; +import { useSelector } from '../../../../../../hooks'; import axios from 'axios'; export const SideFooter: React.FC = () => { + const authToken = useSelector(sessionSelectors.authenticationToken); const [apiVersion, setApiVersion] = useState('') useEffect(() => { const getApiVersion = async () => { - const { data } = await axios.get('http://localhost:8080/version') + const { data } = await axios.get('http://localhost:8080/version', { + headers: { + 'Authorization': `bearer ${authToken}` + } + }) setApiVersion(data) } getApiVersion() + + // eslint-disable-next-line }, []) - + return ( <> From 3b3d28f47f3843a390223b1e093c086efd9c74b3 Mon Sep 17 00:00:00 2001 From: AhsanKhan7 Date: Fri, 30 Sep 2022 07:06:41 +0500 Subject: [PATCH 4/7] UI and API updates --- global.d.ts | 2 + src/api/organizations/inviteApi.ts | 4 +- src/api/session/emailUpdate.ts | 6 +-- src/api/session/loginApi.ts | 5 +- src/api/session/signUpApi.ts | 3 +- .../actions/organizations/inviteAction.ts | 4 +- src/redux/actions/session/emailUpdate.ts | 6 +-- src/redux/actions/session/signupAction.ts | 3 ++ src/services/locales/zu.json | 23 +++++---- src/ui/components/forms/index.tsx | 2 +- src/ui/layouts/Home.tsx | 4 +- src/ui/layouts/common/Table/index.tsx | 11 ++--- .../AuthenticatedSidebar/Menu/index.tsx | 12 +---- .../SideFooter/MenuItemExternal.module.scss | 2 +- .../SideFooter/MenuItemExternal.tsx | 2 +- .../AuthenticatedSidebar/SideFooter/index.tsx | 10 ++-- .../AuthenticatedSidebar/SideHeader/index.tsx | 23 +++++++++ .../AuthenticatedSidebar/index.tsx | 9 +++- src/ui/layouts/session/Login/Form.tsx | 1 + src/ui/layouts/session/Signup/useService.ts | 13 +++-- src/ui/layouts/settings/EmailPopup.tsx | 8 ++-- .../settings/Organization/InvitePopup.tsx | 48 ++++++------------- .../layouts/settings/Organization/index.tsx | 17 +------ .../settings/Organization/tokenPopup.tsx | 23 ++++----- .../settings/Organization/useHeaderCols.tsx | 10 ++-- src/ui/layouts/settings/PersonalDetails.tsx | 34 ++++--------- .../stacks/RunsTable/HeaderCols/index.tsx | 5 +- src/ui/layouts/stacks/StackDetail/index.tsx | 6 +-- 28 files changed, 133 insertions(+), 163 deletions(-) create mode 100644 src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx diff --git a/global.d.ts b/global.d.ts index 4dbbf6cba..04974700c 100644 --- a/global.d.ts +++ b/global.d.ts @@ -52,6 +52,7 @@ interface TInvite { organizationName: string; code: string; email: string; + name: string; createdAt: Date; } @@ -60,6 +61,7 @@ interface TMember { organizationId: string; fullName: string; email: string; + name: string; created: Date; active: boolean; activation_token: string; diff --git a/src/api/organizations/inviteApi.ts b/src/api/organizations/inviteApi.ts index a1b09fc2b..02f202dd4 100644 --- a/src/api/organizations/inviteApi.ts +++ b/src/api/organizations/inviteApi.ts @@ -7,11 +7,9 @@ import mockApi from '../mockApiData'; const inviteApi = ({ authenticationToken, name, - email }: { authenticationToken: string; name: string; - email: string; }): Promise => fetchApiWithAuthRequest({ url: apiUrl(endpoints.organizations.invite), @@ -21,7 +19,7 @@ fetchApiWithAuthRequest({ 'Content-Type': 'application/json', }, data: JSON.stringify({ - name, email + name }), }).catch((res) => { if (process.env.REACT_APP_MOCKAPI_RESPONSE) { diff --git a/src/api/session/emailUpdate.ts b/src/api/session/emailUpdate.ts index b72e0d331..2dc75a9ee 100644 --- a/src/api/session/emailUpdate.ts +++ b/src/api/session/emailUpdate.ts @@ -5,12 +5,12 @@ import { apiUrl } from '../apiUrl'; const emailUpdate = ({ userId, - email, + fullName, name, authenticationToken, }: { userId: string, - email: string + fullName: string name: string; authenticationToken: string; }): Promise => @@ -21,7 +21,7 @@ const emailUpdate = ({ headers: { 'Content-Type': 'application/json', }, - data: { email, name }, + data: { full_name: fullName, name }, }); export default emailUpdate; \ No newline at end of file diff --git a/src/api/session/loginApi.ts b/src/api/session/loginApi.ts index 028a2ae77..3570ef594 100644 --- a/src/api/session/loginApi.ts +++ b/src/api/session/loginApi.ts @@ -30,11 +30,11 @@ interface Params { // password: account.password, // }), // }).catch((res) => { -// // if (process.env.REACT_APP_MOCKAPI_RESPONSE) { +// if (process.env.REACT_APP_MOCKAPI_RESPONSE) { // res = { // data: mockApi.loginMockResponse, // }; -// // } +// } // return res; // }); @@ -50,4 +50,5 @@ const loginApi = ({ account }: Params): Promise => password: account.password, }), }); + export default loginApi; diff --git a/src/api/session/signUpApi.ts b/src/api/session/signUpApi.ts index 5425fae87..57b119b48 100644 --- a/src/api/session/signUpApi.ts +++ b/src/api/session/signUpApi.ts @@ -9,6 +9,7 @@ export interface Response { } interface NewAccount { + userId: string; username: string; fullname: any; email: string; @@ -22,7 +23,7 @@ interface Params { const signUpApi = ({ account }: Params): Promise => fetchApi({ - url: apiUrl(endpoints.signup(account.username)), + url: apiUrl(endpoints.signup(account.userId)), method: httpMethods.put, headers: { 'Content-Type': 'application/json', diff --git a/src/redux/actions/organizations/inviteAction.ts b/src/redux/actions/organizations/inviteAction.ts index d9ec2b5da..d97414db2 100644 --- a/src/redux/actions/organizations/inviteAction.ts +++ b/src/redux/actions/organizations/inviteAction.ts @@ -3,12 +3,10 @@ import inviteApi from '../../../api/organizations/inviteApi'; export const inviteAction = ({ name, - email, onFailure, onSuccess, }: { name: string; - email: string; onFailure?: (err: any) => void; onSuccess?: () => void; }): TRequestAction => ({ @@ -18,7 +16,7 @@ export const inviteAction = ({ isAuthenticated: true, failureActionType: organizationActionTypes.invite.failure, successActionType: organizationActionTypes.invite.success, - params: { name, email }, + params: { name }, onFailure, onSuccess, }, diff --git a/src/redux/actions/session/emailUpdate.ts b/src/redux/actions/session/emailUpdate.ts index c1c03947e..d686ef01c 100644 --- a/src/redux/actions/session/emailUpdate.ts +++ b/src/redux/actions/session/emailUpdate.ts @@ -3,13 +3,13 @@ import emailUpdateApi from '../../../api/session/emailUpdate'; export const emailUpdateAction = ({ userId, - email, + fullName, name, onSuccess, onFailure, }: { userId: string; - email: string; + fullName: string; name: string; onSuccess?: () => void; onFailure?: () => void; @@ -22,6 +22,6 @@ export const emailUpdateAction = ({ successActionType: updateEmailTypes.success, onSuccess, onFailure, - params: { userId, email, name }, + params: { userId, fullName, name }, }, }); diff --git a/src/redux/actions/session/signupAction.ts b/src/redux/actions/session/signupAction.ts index 5fc52a6e7..6598afd9e 100644 --- a/src/redux/actions/session/signupAction.ts +++ b/src/redux/actions/session/signupAction.ts @@ -2,6 +2,7 @@ import { signupActionTypes } from '../../actionTypes'; import signUpApi from '../../../api/session/signUpApi'; export const signUpAction = ({ + userId, username, email, fullName, @@ -10,6 +11,7 @@ export const signUpAction = ({ onSuccess, onFailure, }: { + userId: string; username: string; email: string; fullName: string; @@ -28,6 +30,7 @@ export const signUpAction = ({ onFailure, params: { account: { + userId, username, email, fullName, diff --git a/src/services/locales/zu.json b/src/services/locales/zu.json index 8d3930e84..cc57958dd 100644 --- a/src/services/locales/zu.json +++ b/src/services/locales/zu.json @@ -63,9 +63,9 @@ "label": "Change Password", "button": "Change Password" }, - "emailNameReset": { - "label": "Change Email and Username", - "button": "Change Email and Username" + "nameReset": { + "label": "Change Name and Username", + "button": "Change Name and Username" }, "toasts": { "successful": { @@ -76,8 +76,8 @@ } }, "popup": { - "title": "Change Email and Username", - "text": "Are you sure to change your email and username", + "title": "Change full name and Username", + "text": "Are you sure to change your full name and username", "successButton": { "text": "Yes" }, @@ -165,11 +165,10 @@ }, "popup": { "title": "Add a new Member", - "email": { - "label": "Email", - "placeholder": "Email", - "required": "Email is required", - "invalidEmail": "Email is not valid" + "username": { + "label": "Username", + "placeholder": "Username", + "required": "Username is required" }, "role": { "label": "Role", @@ -180,8 +179,8 @@ "text": "Invite" }, "generateInviteModal": { - "title": "Invitation Token", - "text": "Click generate token to re-generate invitation for", + "title": "New Invitation Token", + "text": " Generate a new invite token for", "button": { "text": "Generate Token" } diff --git a/src/ui/components/forms/index.tsx b/src/ui/components/forms/index.tsx index 1f43d726d..48a6b598d 100644 --- a/src/ui/components/forms/index.tsx +++ b/src/ui/components/forms/index.tsx @@ -124,7 +124,7 @@ export const CopyField = ( } return ( - + { useEffect(() => { const getDashboardData = async () => { - const { data } = await axios.get(`http://localhost:8080/v1/projects/${DEFAULT_PROJECT_NAME}/statistics`, { + const { data } = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`, { headers: { 'Authorization': `bearer ${authToken}` } @@ -73,7 +73,7 @@ export const Home: React.FC = () => { setDashboardData(data) } getDashboardData() - }, []) + }, [authToken]) const preData = Object.entries(dashboardData) const data = preData?.map(([key, value]) => { diff --git a/src/ui/layouts/common/Table/index.tsx b/src/ui/layouts/common/Table/index.tsx index 075012351..35544be20 100644 --- a/src/ui/layouts/common/Table/index.tsx +++ b/src/ui/layouts/common/Table/index.tsx @@ -9,7 +9,7 @@ import { If, H3, Truncate, - // FullWidthSpinner, + FullWidthSpinner, } from '../../../components'; import { getPaginationData } from '../../../../utils/pagination'; import { Pagination } from '../Pagination'; @@ -60,15 +60,14 @@ export const Table: React.FC = ({ rowsToDisplay = itemsForPage; } - // if (loading) { - // return ; - // } + if (loading) { + return ; + } return ( 0 && !loading} - condition={tableRows.length > 0} + condition={tableRows.length > 0 && !loading} renderWhenTrue={() => ( <> diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx index 02a629911..045603d8f 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { MenuItem } from './MenuItem'; import { routePaths } from '../../../../../../../routes/routePaths'; -import { Box, Separator, icons } from '../../../../../../components'; +import { icons } from '../../../../../../components'; import { iconSizes, iconColors } from '../../../../../../../constants'; import { translate } from '../translate'; import { useLocationPath } from '../../../../../../hooks'; @@ -18,16 +18,6 @@ export const Menu: React.FC = () => { return ( <> - } - to={routePaths.home} - text={translate('menu.home.text')} - exact - /> - - - - { return ( diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.module.scss b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.module.scss index c1c7b1712..1c582cd2c 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.module.scss +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.module.scss @@ -10,7 +10,7 @@ $bgColor: rgba(201, 203, 208, 0.2); .menuItem { display: block; text-decoration: none; - border-radius: 4px + border-radius: 4px; } .menuItem, diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.tsx index 5065df801..0a8613373 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.tsx @@ -10,7 +10,7 @@ export const MenuItemExternal: React.FC<{ }> = ({ text, to, Icon, subItem }) => { return ( - + diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx index fcfab5d15..512b99133 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx @@ -16,7 +16,7 @@ export const SideFooter: React.FC = () => { useEffect(() => { const getApiVersion = async () => { - const { data } = await axios.get('http://localhost:8080/version', { + const { data } = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/version`, { headers: { 'Authorization': `bearer ${authToken}` } @@ -25,9 +25,7 @@ export const SideFooter: React.FC = () => { } getApiVersion() - - // eslint-disable-next-line - }, []) + }, [authToken]) return ( <> @@ -51,11 +49,11 @@ export const SideFooter: React.FC = () => { ( - )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} exact /> + )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} /> UI Version v{process.env.REACT_APP_VERSION} - ZenMl v{apiVersion} + ZenML v{apiVersion} ); diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx new file mode 100644 index 000000000..1d0e54193 --- /dev/null +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { MenuItem } from '../Menu/MenuItem'; +import { routePaths } from '../../../../../../../routes/routePaths'; +import { Box, Separator, icons } from '../../../../../../components'; +import { iconSizes, iconColors } from '../../../../../../../constants'; +import { translate } from '../translate'; + +export const SideHeader: React.FC = () => { + + return ( + <> + } + to={routePaths.home} + text={translate('menu.home.text')} + exact + /> + + + + + ); +}; diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx index 46078ccb2..4e8774c43 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import cn from 'classnames'; - import { FlexBox, Box, @@ -8,15 +7,19 @@ import { LinkBox, If, } from '../../../../../components'; - +import { usePushRoute } from '../../../../../hooks'; import { Menu } from './Menu'; import styles from './index.module.scss'; +import { SideHeader } from './SideHeader'; import { SideFooter } from './SideFooter'; export const AuthenticatedSidebar: React.FC<{ mobileMenuOpen: boolean; setMobileMenuOpen: (val: boolean) => void; }> = ({ mobileMenuOpen, setMobileMenuOpen }) => { + + const { push } = usePushRoute(); + return ( <> @@ -37,6 +40,7 @@ export const AuthenticatedSidebar: React.FC<{ paddingLeft="lg" // justifyContent="center" // className="d-md-none" + onClick={() => push('/')} > @@ -46,6 +50,7 @@ export const AuthenticatedSidebar: React.FC<{ justifyContent='space-between' style={{ height: '90%' }} > + diff --git a/src/ui/layouts/session/Login/Form.tsx b/src/ui/layouts/session/Login/Form.tsx index ed8a2e606..79522b6de 100644 --- a/src/ui/layouts/session/Login/Form.tsx +++ b/src/ui/layouts/session/Login/Form.tsx @@ -56,6 +56,7 @@ export const Form: React.FC = () => { hasError: hasSubmittedWithErrors && password.trim() === '', text: translate('form.password.required'), }} + showPasswordOption /> void; hasSubmittedWithErrors: boolean; + userId: string; username: string, setUsername: (username: string) => void, email: string; @@ -26,8 +27,9 @@ export const useService = (): ServiceInterface => { const location = useLocation() const params = new URLSearchParams(location.search) - const preEmail = params.get('email') + const preUsername = params.get('username') const token = params.get('token') + const id = params.get('user') const [loading, setLoading] = useState(false); const [username, setUsername] = useState(''); @@ -36,13 +38,14 @@ export const useService = (): ServiceInterface => { const [password, setPassword] = useState(''); const [hasSubmittedWithErrors, setHasSubmittedWithErrors] = useState(false); + const userId = id ? id : username + const dispatch = useDispatch(); const { push } = usePushRoute(); useEffect(() => { - setUsername(preEmail ? preEmail : ''); - setEmail(preEmail ? preEmail : ''); - }, [preEmail]); + setUsername(preUsername ? preUsername : ''); + }, [preUsername]); return { signup: () => { @@ -51,6 +54,7 @@ export const useService = (): ServiceInterface => { if (username.trim() !== '' && email.trim() !== '' && password.trim() !== '') { dispatch( signUpAction({ + userId, username, email, fullName, @@ -80,6 +84,7 @@ export const useService = (): ServiceInterface => { } }, hasSubmittedWithErrors, + userId, username, setUsername, email, diff --git a/src/ui/layouts/settings/EmailPopup.tsx b/src/ui/layouts/settings/EmailPopup.tsx index 19f892579..e0dfa05e6 100644 --- a/src/ui/layouts/settings/EmailPopup.tsx +++ b/src/ui/layouts/settings/EmailPopup.tsx @@ -19,24 +19,22 @@ import { useSelector } from '../../hooks'; export const EmailPopup: React.FC<{ userId: any; - email: any; + fullName: any; username: any; setPopupOpen: (attr: boolean) => void; -}> = ({ userId, email, username, setPopupOpen }) => { +}> = ({ userId, fullName, username, setPopupOpen }) => { const [submitting, setSubmitting] = useState(false); const dispatch = useDispatch() const translate = getTranslateByScope('ui.layouts.PersonalDetails'); - const authToken = useSelector(sessionSelectors.authenticationToken); - const changeEmail = async () => { setSubmitting(true); dispatch( sessionActions.emailUpdate({ userId, - email, + fullName, name: username, onFailure: () => { setSubmitting(false); diff --git a/src/ui/layouts/settings/Organization/InvitePopup.tsx b/src/ui/layouts/settings/Organization/InvitePopup.tsx index d98ab4466..0512fd1ea 100644 --- a/src/ui/layouts/settings/Organization/InvitePopup.tsx +++ b/src/ui/layouts/settings/Organization/InvitePopup.tsx @@ -6,50 +6,31 @@ import { translate } from './translate'; import { Box, FlexBox, - FormEmailField, + FormTextField, CopyField, H3, PrimaryButton, } from '../../../components'; import { useSelector, useDispatch } from '../../../hooks'; import { Popup } from '../../common/Popup'; -import { fieldValidation } from '../../../../utils'; import { organizationSelectors } from '../../../../redux/selectors'; -const emailHasError = (email: string, hasSubmittedWithErrors: boolean) => - (hasSubmittedWithErrors && email.trim() === '') || - (hasSubmittedWithErrors && !fieldValidation(email.trim()).isEmail()); - -const emailErrorText = (email: string) => - email.trim() !== '' && !fieldValidation(email.trim()).isEmail() - ? translate('popup.email.invalidEmail') - : translate('popup.email.required'); - export const InvitePopup: React.FC<{ setPopupOpen: (attr: boolean) => void }> = ({ setPopupOpen}) => { const [submitting, setSubmitting] = useState(false); - const [hasSubmittedWithErrors, setHasSubmittedWithErrors] = useState(false); - const [email, setEmail] = useState('') + const [name, setName] = useState('') const [showTokField, setShowTokField] = useState(false) const dispatch = useDispatch(); const invite = useSelector(organizationSelectors.invite); const inviteNewMembers = () => { - setHasSubmittedWithErrors(true); - - let error = false; - if (emailHasError(email || '', true)) { - error = true; - } - - if (!error) { + setSubmitting(true); dispatch( organizationActions.invite({ - name: email, - email: email, + name, onFailure: (errorText: string) => { dispatch( showToasterAction({ @@ -66,7 +47,6 @@ export const InvitePopup: React.FC<{ setPopupOpen: (attr: boolean) => void }> } }), ); - } }; @@ -74,7 +54,6 @@ export const InvitePopup: React.FC<{ setPopupOpen: (attr: boolean) => void }> { setPopupOpen(false); - setHasSubmittedWithErrors(false); }} > @@ -86,14 +65,15 @@ export const InvitePopup: React.FC<{ setPopupOpen: (attr: boolean) => void }> - setEmail(val)} + setName(val)} error={{ - hasError: emailHasError(email || '', hasSubmittedWithErrors), - text: emailErrorText(email || ''), + hasError: false, + text: '' }} /> @@ -114,8 +94,8 @@ export const InvitePopup: React.FC<{ setPopupOpen: (attr: boolean) => void }> {showTokField && ( diff --git a/src/ui/layouts/settings/Organization/index.tsx b/src/ui/layouts/settings/Organization/index.tsx index 13e46c3b3..5ca830e86 100644 --- a/src/ui/layouts/settings/Organization/index.tsx +++ b/src/ui/layouts/settings/Organization/index.tsx @@ -2,12 +2,10 @@ import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { organizationActions } from '../../../../redux/actions'; import { organizationSelectors } from '../../../../redux/selectors'; -import { getInitials } from '../../../../utils'; import { FlexBox, Box, - ColoredSquare, Paragraph, PrimaryButton, LinkBox, @@ -53,21 +51,8 @@ export const Organization: React.FC = () => { setPopupOpen={setPopupOpen} /> )} - - - - - - - {getInitials(organization.name)} - - - - - {organization.name} - - + setPopupOpen(true)}> {translate('button.text')} diff --git a/src/ui/layouts/settings/Organization/tokenPopup.tsx b/src/ui/layouts/settings/Organization/tokenPopup.tsx index 77d16ac2a..680e38d75 100644 --- a/src/ui/layouts/settings/Organization/tokenPopup.tsx +++ b/src/ui/layouts/settings/Organization/tokenPopup.tsx @@ -6,7 +6,7 @@ import { translate } from './translate'; import { Box, FlexBox, - FormEmailField, + FormTextField, Paragraph, CopyField, H3, @@ -18,9 +18,9 @@ import { organizationSelectors } from '../../../../redux/selectors'; export const TokenPopup: React.FC<{ id: string; - email: string; + username: string; active: boolean -}> = ({ id, email, active }) => { +}> = ({ id, username, active }) => { const [popupOpen, setPopupOpen] = useState(false) const [submitting, setSubmitting] = useState(false); @@ -34,7 +34,7 @@ export const TokenPopup: React.FC<{ setSubmitting(true); dispatch( organizationActions.inviteByCode({ - username: email, + username, onFailure: (errorText: string) => { dispatch( showToasterAction({ @@ -70,16 +70,17 @@ export const TokenPopup: React.FC<{ - {`${translate('popup.generateInviteModal.text')} ${email}`} + {`${translate('popup.generateInviteModal.text')} ${username}. This will invalidate the currently active token.`} - @@ -100,8 +101,8 @@ export const TokenPopup: React.FC<{ {showTokField && ( diff --git a/src/ui/layouts/settings/Organization/useHeaderCols.tsx b/src/ui/layouts/settings/Organization/useHeaderCols.tsx index e7d3964b5..4908aa353 100644 --- a/src/ui/layouts/settings/Organization/useHeaderCols.tsx +++ b/src/ui/layouts/settings/Organization/useHeaderCols.tsx @@ -23,7 +23,7 @@ export const useInviteHeaderCols = (): HeaderCol[] => { ), width: '70%', renderRow: (invite: TInvite) => { - const initials = getInitialsFromEmail(invite.email); + const initials = getInitialsFromEmail(invite.name); return ( @@ -31,7 +31,7 @@ export const useInviteHeaderCols = (): HeaderCol[] => { {initials} - {invite.email} + {invite.name} ); }, @@ -74,7 +74,7 @@ export const useMemberHeaderCols = (): HeaderCol[] => { ), width: '15%', renderRow: (member: TMember) => { - const initials = getInitialsFromEmail(member.email); + const initials = getInitialsFromEmail(member.name); return ( @@ -82,7 +82,7 @@ export const useMemberHeaderCols = (): HeaderCol[] => { {initials} - {member.email} + {member.name} ); }, @@ -97,7 +97,7 @@ export const useMemberHeaderCols = (): HeaderCol[] => { renderRow: (member: TMember) => ( {member.active === false ? ( - + ) : ( Accepted )} diff --git a/src/ui/layouts/settings/PersonalDetails.tsx b/src/ui/layouts/settings/PersonalDetails.tsx index d5c4cd20c..16c8469f4 100644 --- a/src/ui/layouts/settings/PersonalDetails.tsx +++ b/src/ui/layouts/settings/PersonalDetails.tsx @@ -1,12 +1,9 @@ import React, { useState } from 'react'; -import { getInitials } from '../../../utils'; import { Box, - ColoredSquare, FlexBox, FormTextField, FormPasswordField, - Paragraph, Row, Col } from '../../components'; @@ -37,7 +34,7 @@ export const PersonalDetails: React.FC = () => { const [submitting, setSubmitting] = useState(false) const [popupOpen, setPopupOpen] = useState(false); - const [email, setEmail] = useState(user?.email) + const [fullName, setFullName] = useState(user?.fullName) const [username, setUsername] = useState(user?.name) const [currentPassword, setCurrentPassword] = useState('') const [newPassword, setNewPassword] = useState('') @@ -85,32 +82,19 @@ export const PersonalDetails: React.FC = () => { return ( <> {popupOpen && ( - + )} - - - - - {getInitials(organization.name)} - - - - - {organization.name} - - - setEmail(val)} + placeholder={translate('form.fullName.placeholder')} + value={fullName ? fullName : ''} + onChange={(val: string) => setFullName(val)} /> @@ -125,8 +109,8 @@ export const PersonalDetails: React.FC = () => { - setPopupOpen(true)} disabled={email === user.email && username === user.name} > - {translate('emailNameReset.label')} + setPopupOpen(true)} disabled={fullName === user.fullName && username === user.name} > + {translate('nameReset.label')} @@ -180,7 +164,7 @@ export const PersonalDetails: React.FC = () => { - + {translate('passwordReset.button')} diff --git a/src/ui/layouts/stacks/RunsTable/HeaderCols/index.tsx b/src/ui/layouts/stacks/RunsTable/HeaderCols/index.tsx index e04eadd07..a84b0353e 100644 --- a/src/ui/layouts/stacks/RunsTable/HeaderCols/index.tsx +++ b/src/ui/layouts/stacks/RunsTable/HeaderCols/index.tsx @@ -165,7 +165,7 @@ export const useHeaderCols = ({ { render: () => ( - AUTHOR + OWNER ), width: '10%', @@ -173,7 +173,6 @@ export const useHeaderCols = ({ const initials = getInitialsFromEmail( run.user.full_name ? run.user.full_name : run.user.name, ); - console.log(run.status); return ( @@ -210,7 +209,7 @@ export const useHeaderCols = ({ activeSortingDirection={activeSortingDirection} > - CREATED AT + CREATED ), diff --git a/src/ui/layouts/stacks/StackDetail/index.tsx b/src/ui/layouts/stacks/StackDetail/index.tsx index 3d86a8122..eddb45c84 100644 --- a/src/ui/layouts/stacks/StackDetail/index.tsx +++ b/src/ui/layouts/stacks/StackDetail/index.tsx @@ -109,15 +109,15 @@ export const StackDetail: React.FC = () => { - {stack.userName} + {stack.user.name} - CREATED AT + CREATED - {formatDateToDisplay(stack.creationDate)} + {formatDateToDisplay(stack.created)} From 516be66eed2ee3e381b3751f9504e3abfcb0318f Mon Sep 17 00:00:00 2001 From: AhsanKhan7 Date: Fri, 30 Sep 2022 16:00:21 +0500 Subject: [PATCH 5/7] signup and button updates --- src/api/fetchApi/index.ts | 20 ++++++++++---------- src/api/session/signUpApi.ts | 4 ++-- src/services/locales/zu.json | 4 ++-- src/ui/layouts/settings/PersonalDetails.tsx | 4 ++-- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/api/fetchApi/index.ts b/src/api/fetchApi/index.ts index 045ba044c..6a0575935 100644 --- a/src/api/fetchApi/index.ts +++ b/src/api/fetchApi/index.ts @@ -19,11 +19,11 @@ export const fetchApi = ({ headers?: any; params?: any; }): Promise => { - // if (process.env.REACT_APP_MOCKAPI_RESPONSE) { - // return new Promise((resolve, reject) => { - // reject(); - // }); - // } + if (process.env.REACT_APP_MOCKAPI_RESPONSE) { + return new Promise((resolve, reject) => { + reject(); + }); + } return axios({ method: method || httpMethods.get, url, @@ -46,11 +46,11 @@ export const fetchApiWithAuthRequest = ({ authenticationToken: string; headers?: any; }): Promise => { -// if (process.env.REACT_APP_MOCKAPI_RESPONSE) { -// return new Promise((resolve, reject) => { -// reject(); -// }); -// } +if (process.env.REACT_APP_MOCKAPI_RESPONSE) { + return new Promise((resolve, reject) => { + reject(); + }); + } return axios({ method: method || httpMethods.get, url, diff --git a/src/api/session/signUpApi.ts b/src/api/session/signUpApi.ts index 57b119b48..ee7a49402 100644 --- a/src/api/session/signUpApi.ts +++ b/src/api/session/signUpApi.ts @@ -11,7 +11,7 @@ export interface Response { interface NewAccount { userId: string; username: string; - fullname: any; + fullName: any; email: string; password: string; token: string; @@ -30,7 +30,7 @@ const signUpApi = ({ account }: Params): Promise => }, data: JSON.stringify({ name: account.username, - full_name: account.fullname, + full_name: account.fullName, email: account.email, password: account.password, activation_token: account.token diff --git a/src/services/locales/zu.json b/src/services/locales/zu.json index cc57958dd..e26cb99a9 100644 --- a/src/services/locales/zu.json +++ b/src/services/locales/zu.json @@ -64,8 +64,8 @@ "button": "Change Password" }, "nameReset": { - "label": "Change Name and Username", - "button": "Change Name and Username" + "label": "Save Changes", + "button": "Save Changes" }, "toasts": { "successful": { diff --git a/src/ui/layouts/settings/PersonalDetails.tsx b/src/ui/layouts/settings/PersonalDetails.tsx index 16c8469f4..2b08ac8bd 100644 --- a/src/ui/layouts/settings/PersonalDetails.tsx +++ b/src/ui/layouts/settings/PersonalDetails.tsx @@ -109,7 +109,7 @@ export const PersonalDetails: React.FC = () => { - setPopupOpen(true)} disabled={fullName === user.fullName && username === user.name} > + setPopupOpen(true)} disabled={fullName === user.fullName && username === user.name} > {translate('nameReset.label')} @@ -164,7 +164,7 @@ export const PersonalDetails: React.FC = () => { - + {translate('passwordReset.button')} From 0df13af1990f543c0ae9b502d2a0a29e699f1325 Mon Sep 17 00:00:00 2001 From: AhsanKhan7 Date: Fri, 30 Sep 2022 16:48:08 +0500 Subject: [PATCH 6/7] udpates --- src/ui/layouts/settings/Organization/tokenPopup.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/ui/layouts/settings/Organization/tokenPopup.tsx b/src/ui/layouts/settings/Organization/tokenPopup.tsx index 4e77bbe11..c737d04c7 100644 --- a/src/ui/layouts/settings/Organization/tokenPopup.tsx +++ b/src/ui/layouts/settings/Organization/tokenPopup.tsx @@ -55,13 +55,9 @@ export const TokenPopup: React.FC<{ ); setSubmitting(false); setPopupOpen(false); - }, - onSuccess: () => { - setShowTokField(true); - }, - }), - ); - }; + } + + const onClose = () => { setShowTokField(false); From 839d0622e6664d14789bfdea0f94fc53acb04dbb Mon Sep 17 00:00:00 2001 From: AhsanKhan7 Date: Fri, 30 Sep 2022 17:15:18 +0500 Subject: [PATCH 7/7] updates resolve --- src/ui/layouts/settings/PersonalDetails.tsx | 82 +++++++++++++++++++-- 1 file changed, 75 insertions(+), 7 deletions(-) diff --git a/src/ui/layouts/settings/PersonalDetails.tsx b/src/ui/layouts/settings/PersonalDetails.tsx index 139644aa9..71538d5d6 100644 --- a/src/ui/layouts/settings/PersonalDetails.tsx +++ b/src/ui/layouts/settings/PersonalDetails.tsx @@ -117,13 +117,81 @@ export const PersonalDetails: React.FC = () => { - - - {translate('passwordReset.button')} - + + + + + setCurrentPassword(val)} + error={{ + hasError: currentPassword.trim() === undefined, + text: translate( + 'form.passwordChange.currentPassword.required', + ), + }} + showPasswordOption + /> + + + setNewPassword(val)} + error={{ + hasError: newPassword.trim() === undefined, + text: translate('form.passwordChange.newPassword.required'), + }} + showPasswordOption + /> + + + setConfirmPassword(val)} + error={{ + hasError: confirmPassword.trim() === undefined, + text: translate( + 'form.passwordChange.confirmPassword.required', + ), + }} + showPasswordOption + /> + + + + + {translate('passwordReset.button')} + + + + - - - + + ); };