sidebar and member update

AhsanKhan7 · AhsanKhan7 · commit 9c5b18a07fdd · 2022-10-02T03:52:23.000+05:00
diff --git a/src/api/session/signUpApi.ts b/src/api/session/signUpApi.ts
@@ -12,7 +12,6 @@ interface NewAccount {
   userId: string;
   username: string;
   fullName: any;
-  email: string;
   password: string;
   token: string;
 }
@@ -31,7 +30,6 @@ const signUpApi = ({ account }: Params): Promise<void> =>
     data: JSON.stringify({
       name: account.username,
       full_name: account.fullName,
-      email: account.email,
       password: account.password,
       activation_token: account.token
     }),
diff --git a/src/redux/actions/session/signupAction.ts b/src/redux/actions/session/signupAction.ts
@@ -4,7 +4,6 @@ import signUpApi from '../../../api/session/signUpApi';
 export const signUpAction = ({
   userId,
   username,
-  email,
   fullName,
   password,
   token,
@@ -13,7 +12,6 @@ export const signUpAction = ({
 }: {
   userId: string;
   username: string;
-  email: string;
   fullName: string;
   password: string;
   token: any;
@@ -32,7 +30,6 @@ export const signUpAction = ({
       account: {
         userId,
         username,
-        email,
         fullName,
         password,
         token,    
diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.module.scss b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.module.scss
@@ -6,7 +6,6 @@ $bgColor: rgba(201, 203, 208, 0.2);
   display: block;
   text-decoration: none;
   border-radius: 4px;
-  height: 40px !important;
   text-decoration: none;
 }
 
diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx
@@ -25,19 +25,17 @@ export const MenuItem: React.FC<{
       to={to}
       exact={exact}
     >
-      <FlexBox alignItems="center" paddingVertical="sm" marginVertical="sm">
+      <FlexBox alignItems="center" marginVertical="sm" style={{ height: '40px' }}>
         <Box
-          className={cn(
+          className={cn( 
             to === location.pathname && !subItem
               ? styles.menuItemSideBox
               : styles.menuItemSideBoxUn,
           )}
         ></Box>
 
         <FlexBox style={{ width: '100%' }}>
-          <Box paddingLeft={subItem ? 'xl' : 'md'}>
-            <Icon />
-          </Box>
+          <Box paddingLeft={subItem ? 'xl' : 'md'}><Icon /></Box>
           <Box paddingLeft="md">
             <Paragraph color="darkGrey" size="small">
               {camelCaseToParagraph(text)}
diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx
@@ -56,10 +56,11 @@ export const Menu: React.FC = () => {
         to={routePaths.stacks.list}
         text={translate('menu.stacks.text')}
       />
+
       <MenuItem
         isActive={() => {
           return !!matchPath(locationPath, {
-            path: routePaths.stackComponents.base(':id'),
+            path: routePaths.stackComponents.base(''),
             exact: false,
           });
         }}
@@ -72,46 +73,28 @@ export const Menu: React.FC = () => {
         text={translate('menu.stackComponents.text')}
       />
 
-      {locationPath.includes('components') && ( 
-        <div> 
-          {stackComponentsTypes?.map((item) => (
-            <MenuItem
-              isActive={() => {
-                  return !!matchPath(locationPath, {
-                    path: routePaths.stackComponents.base(item),
-                    exact: false,
-                  });
-                }}
-              subItem={true}
-              Icon={() => (
-                <icons.stackComponent
-                  color={iconColors.white}
-                  size={iconSizes.md}
-                />
-              )}
-              to={routePaths.stackComponents.base(item)}
-              text={item}
-            />
-            )
-          )}
-        </div> 
-        )}
-    
-        {/* <MenuItem
-            // isActive={() => {
-            //   return !!matchPath(locationPath, {
-            //     path: routePaths.stackComponents.base(item),
-            //     exact: false,
-            //   });
-            // }}
+      {locationPath.includes('components') &&  
+        stackComponentsTypes?.map((item) => (
+          <MenuItem
+            isActive={() => {
+              return !!matchPath(locationPath, {
+                path: routePaths.stackComponents.base(item),
+                exact: false,
+              });
+            }}
             subItem={true}
             Icon={() => (
-              <icons.data color={iconColors.darkGrey} size={iconSizes.md} />
+              <icons.stackComponent
+                color={iconColors.white}
+                size={iconSizes.md}
+              />
             )}
-            to={routePaths.stackComponents.base(stackComponentsTypes[0])}
-            text={translate('menu.stackComponents.text')}
-          /> */}
-
+            to={routePaths.stackComponents.base(item)}
+            text={item}
+          />
+        )
+      )}
+      
       {/* <MenuItem
         Icon={() => (
           <icons.settings color={iconColors.white} size={iconSizes.md} />
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
@@ -11,7 +11,6 @@ $bgColor: rgba(201, 203, 208, 0.2);
   display: block;
   text-decoration: none;
   border-radius: 4px;
-  height: 40px
 }
 
 .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
@@ -11,11 +11,10 @@ export const MenuItemExternal: React.FC<{
   
   return (
     <Box className={styles.menuItem} style={{ marginLeft: '6px' }}>
-      <FlexBox alignItems="center" marginVertical="sm">
+      <FlexBox alignItems="center" paddingVertical="sm" marginVertical="sm" >
+       
         <FlexBox style={{ width: '100%' }}>
-
           <Box paddingLeft={subItem ? 'xl' : 'md'}><Icon /></Box>
-         
           <Box paddingLeft="md">
           <a
             target="__blank" 
diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx
@@ -53,12 +53,13 @@ export const SideFooter: React.FC = () => {
       <MenuItem
         Icon={() => (
           <icons.settings color={iconColors.white} size={iconSizes.md} />
-        )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} />
+        )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} 
+      />
 
-        <Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom='lg' >
-          <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>UI Version v{process.env.REACT_APP_VERSION}</Paragraph>
-          <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>ZenML v{apiVersion}</Paragraph>
-        </Box>
+      <Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom='xs' >
+        <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>UI Version v{process.env.REACT_APP_VERSION}</Paragraph>
+        <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>ZenML v{apiVersion}</Paragraph>
+      </Box>
       </>
   );
 };
diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.module.scss b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.module.scss
@@ -5,8 +5,6 @@ $bgColor: rgba(201, 203, 208, 0.2);
 .sidebar {
   width: 24rem !important;
   // height: calc(100vh - #{$headerHeight});
-  // background-color: $bgColor;    
- 
   height: 100vh;
   background: linear-gradient(180deg, #433E99 0%, #8F599D 100%);
 }
@@ -35,4 +33,4 @@ $bgColor: rgba(201, 203, 208, 0.2);
   .mobileSidebarOpen {
     transform: translateX(0);
   }
-}
+}
diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/index.tsx
@@ -10,18 +10,6 @@ export const AuthenticatedLayout: React.FC = ({ children }) => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <>
-      {/* <AuthenticatedHeader setMobileMenuOpen={setMobileMenuOpen} />
-      <FlexBox>
-        <AuthenticatedSidebar
-          setMobileMenuOpen={setMobileMenuOpen}
-          mobileMenuOpen={mobileMenuOpen}
-        />
-        <FlexBox className={styles.content} flex={1}>
-          {children}
-        </FlexBox>
-      </FlexBox> */}
-
       <FlexBox>
         <AuthenticatedSidebar setMobileMenuOpen={setMobileMenuOpen} mobileMenuOpen={mobileMenuOpen} />
         <FlexBox flexDirection='column' className={styles.content} flex={1}>
@@ -31,6 +19,5 @@ export const AuthenticatedLayout: React.FC = ({ children }) => {
           </FlexBox>
         </FlexBox>
       </FlexBox>
-    </>
   );
 };
diff --git a/src/ui/layouts/session/Signup/Form.tsx b/src/ui/layouts/session/Signup/Form.tsx
@@ -2,10 +2,8 @@ import React, { useState } from 'react';
 import styles from './index.module.scss';
 import { toasterTypes } from '../../../../constants';
 import { showToasterAction } from '../../../../redux/actions';
-import { fieldValidation } from '../../../../utils/validations';
 import {
   Box,
-  FormEmailField,
   FormTextField,
   FormPasswordField,
   PrimaryButton,
@@ -15,15 +13,6 @@ import { translate } from './translate';
 import { useService } from './useService';
 import { useEnterKeyPress } from '../../../hooks';
 
-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('form.email.invalidEmail')
-    : translate('form.email.required');
-
 export const Form: React.FC = () => {
 
   const dispatch = useDispatch();
@@ -33,11 +22,9 @@ export const Form: React.FC = () => {
     signup,
     hasSubmittedWithErrors,
     username,
-    email,
     fullName,
     password,
     setUsername,
-    setEmail,
     setFullName,
     setPassword,
     loading,
@@ -55,7 +42,7 @@ export const Form: React.FC = () => {
     }
   };
 
-  const BUTTON_DISABLED = email.trim() === '' || password.trim() === '' || confirmPass.trim() === '' 
+  const BUTTON_DISABLED = username.trim() === '' || password.trim() === '' || confirmPass.trim() === '' 
 
   useEnterKeyPress(() => {
     if (!BUTTON_DISABLED) signup();
@@ -71,24 +58,6 @@ export const Form: React.FC = () => {
             placeholder={translate('form.username.placeholder')}
             value={username} 
             onChange={(val: string) => setUsername(val)}
-            error={{
-              hasError: emailHasError(email, hasSubmittedWithErrors),
-              text: emailErrorText(email),
-            }}
-          />
-      </Box>
-
-      <Box marginBottom="lg">
-          <FormEmailField
-            label={translate('form.email.label')}
-            labelColor='#ffffff'
-            placeholder={translate('form.email.placeholder')}
-            value={email} 
-            onChange={(val: string) => setEmail(val)}
-            error={{
-              hasError: emailHasError(email, hasSubmittedWithErrors),
-              text: emailErrorText(email),
-            }}
           />
       </Box>
 
@@ -99,10 +68,6 @@ export const Form: React.FC = () => {
             placeholder={translate('form.fullname.placeholder')}
             value={fullName} 
             onChange={(val: string) => setFullName(val)}
-            error={{
-              hasError: emailHasError(email, hasSubmittedWithErrors),
-              text: emailErrorText(email),
-            }}
           />
       </Box>
       
diff --git a/src/ui/layouts/session/Signup/index.module.scss b/src/ui/layouts/session/Signup/index.module.scss
@@ -5,7 +5,7 @@ $bgColor: #FFFF;
 
 
 .signUp {
-  padding-bottom: 200px;
+  height: 100vh;
   background: linear-gradient(#433E99, #8F599D);
 }
 
@@ -14,30 +14,6 @@ $bgColor: #FFFF;
   margin: 0 auto !important;
 }
 
-// .background {
-//   overflow: hidden;
-//   background-color: $bgColor;
-// }
-
-// .backgroundImage {
-//   width: 25%;
-//   margin: 0 auto;
-//   display: block;
-// }
-
-// .descriptionBox {
-//   // height: 100vh;
-//   overflow-y: auto;
-//   overflow-x: hidden;
-//   margin: 0 auto !important;
-//   background-color: $bgColor;
-// }
-
-// .descriptionTextBox {
-//   max-width: 700px;
-//   margin: 5vh auto !important;
-// }
-
 .signUpButton {
   width: 100%;
   background-color: #E8A562;
diff --git a/src/ui/layouts/session/Signup/useService.ts b/src/ui/layouts/session/Signup/useService.ts
@@ -12,8 +12,6 @@ interface ServiceInterface {
   userId: string;
   username: string,
   setUsername: (username: string) => void,
-  email: string;
-  setEmail: (email: string) => void;
   fullName: string,
   setFullName: (fullName: string) => void,
   password: string;
@@ -33,7 +31,6 @@ export const useService = (): ServiceInterface => {
 
   const [loading, setLoading] = useState(false);
   const [username, setUsername] = useState('');
-  const [email, setEmail] = useState('');
   const [fullName, setFullName] = useState('');
   const [password, setPassword] = useState('');
   const [hasSubmittedWithErrors, setHasSubmittedWithErrors] = useState(false);
@@ -51,12 +48,11 @@ export const useService = (): ServiceInterface => {
     signup: () => {
       setLoading(true);
       setHasSubmittedWithErrors(true);
-      if (username.trim() !== '' && email.trim() !== '' && password.trim() !== '') {
+      if (username.trim() !== '' && password.trim() !== '') {
         dispatch(
           signUpAction({
             userId,
             username,
-            email,
             fullName,
             password,
             token,
@@ -87,8 +83,6 @@ export const useService = (): ServiceInterface => {
     userId,
     username,
     setUsername,
-    email,
-    setEmail,
     fullName,
     setFullName,
     password,
diff --git a/src/ui/layouts/settings/Organization/tokenPopup.tsx b/src/ui/layouts/settings/Organization/tokenPopup.tsx

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@ $bgColor: rgba(201, 203, 208, 0.2);`
`6`	`6`	`display: block;`
`7`	`7`	`text-decoration: none;`
`8`	`8`	`border-radius: 4px;`
`9`		`- height: 40px !important;`
`10`	`9`	`text-decoration: none;`
`11`	`10`	`}`
`12`	`11`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,6 @@ $bgColor: rgba(201, 203, 208, 0.2);`
`11`	`11`	`display: block;`
`12`	`12`	`text-decoration: none;`
`13`	`13`	`border-radius: 4px;`
`14`		`- height: 40px`
`15`	`14`	`}`
`16`	`15`
`17`	`16`	`.menuItem,`
Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,6 @@ $bgColor: rgba(201, 203, 208, 0.2);`
`5`	`5`	`.sidebar {`
`6`	`6`	`width: 24rem !important;`
`7`	`7`	`// height: calc(100vh - #{$headerHeight});`
`8`		`- // background-color: $bgColor;`
`9`		`-`
`10`	`8`	`height: 100vh;`
`11`	`9`	`background: linear-gradient(180deg, #433E99 0%, #8F599D 100%);`
`12`	`10`	`}`
`@@ -35,4 +33,4 @@ $bgColor: rgba(201, 203, 208, 0.2);`
`35`	`33`	`.mobileSidebarOpen {`
`36`	`34`	`transform: translateX(0);`
`37`	`35`	`}`
`38`		`-}`
	`36`	`+}`