Merge pull request #37 from zenml-io/ahsan/feat/auth-screens

UI updates

Author: danialraza03

src/services/locales/zu.json

@@ -69,7 +69,7 @@
             },
             "toasts": {
               "successful": {
-                "text": "Successfully send Password Reset E-Mail."
+                "text": "Successfully Changed username and full name."
               },
               "failed": {
                 "text": "Something went wrong. Please try again."

src/ui/components/forms/index.tsx

@@ -207,7 +207,7 @@ export const FormPasswordField = (
         />
         {props.showPasswordOption && (
           <LinkBox
-            style={{ position: 'absolute', right: '10px', top: '30px' }}
+            style={{ position: 'absolute', right: '10px', top: '36px' }}
             onClick={() => setShowPassword(!showPassword)}
           >
             <icons.eye

src/ui/layouts/pipelines/Header/CreatePipelineButton.tsx

@@ -34,13 +34,9 @@
 //   );
 // };
 
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './index.module.scss';
 
-import { useDispatch } from '../../../hooks';
-import { showToasterAction } from '../../../../redux/actions';
-import { toasterTypes } from '../../../../constants';
-
 import {
   Box,
   PrimaryButton,
@@ -56,21 +52,20 @@ import { CommandBoxWScroll } from '../../common/CommandBox';
 import { constantCommandsToCreatePipeline } from '../../../../constants/constantCommands';
 
 export const CreatePipelineButton: React.FC = () => {
-  const dispatch = useDispatch();
   const [createPipelinePopupOpen, setCreatePipelinePopupOpen] = React.useState<
     boolean
   >(false);
+  const [isCopied, setIsCopied] = useState(false)
 
   const codeString = '#!/bin/bash';
 
   const handleCopy = () => {
     navigator.clipboard.writeText(codeString);
-    dispatch(
-      showToasterAction({
-        description: 'Command copied to clipboard',
-        type: toasterTypes.success,
-      }),
-    );
+    
+    setIsCopied(true)
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 2000);
   };
 
   return (
@@ -167,7 +162,11 @@ export const CreatePipelineButton: React.FC = () => {
             </Box>
           </FlexBox> */}
 
-          <FlexBox justifyContent="end" marginTop="xl" flexWrap>
+          <FlexBox justifyContent="space-between" marginTop="xl" flexWrap>
+            <Box>
+              {isCopied && (<Paragraph>Copied!</Paragraph>)}
+            </Box>
+
             <DocumentationLink
               text={constantCommandsToCreatePipeline.documentation}
             />

src/ui/layouts/pipelines/Header/index.module.scss

@@ -4,6 +4,15 @@
   height: 4rem;
 }
 
+.iconStyle { 
+  background-color: #F4F4F4; 
+  text-align: center;
+  height: 35px; 
+  width: 40px;
+  border-radius: 3px;
+  cursor: pointer;
+} 
+
 @media (max-width: $md-breakpoint) {
   .dynamicHeaderRight {
     margin-right: auto !important;

src/ui/layouts/settings/EmailPopup.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../components';
 import { getTranslateByScope } from '../../../services';
 import { Popup } from '../common/Popup';
-import { showToasterAction } from '../../../redux/actions';
+import { showToasterAction, userActions } from '../../../redux/actions';
 import { toasterTypes } from '../../../constants';
 
 import { fetchApiWithAuthRequest } from '../../../api/fetchApi';
@@ -40,7 +40,7 @@ export const EmailPopup: React.FC<{
   const changeEmail = async () => {
     setSubmitting(true);
     try {
-     const v = fetchApiWithAuthRequest({
+      await fetchApiWithAuthRequest({
         url: apiUrl(endpoints.users.updateUser(userId)),
         method: httpMethods.put,
         authenticationToken,
@@ -57,7 +57,7 @@ export const EmailPopup: React.FC<{
           type: toasterTypes.success,
         }),
       );
-  
+     await dispatch(userActions.getMy({}));
     } catch (err) {
       setSubmitting(false);
       setPopupOpen(false);

src/ui/layouts/settings/Organization/index.tsx

@@ -31,7 +31,7 @@ export const Organization: React.FC = () => {
   const members = useSelector(organizationSelectors.myMembers);
   const memberHeaderCols = useMemberHeaderCols();
 
-  useRequestOnMount(organizationActions.getMy);
+  // useRequestOnMount(organizationActions.getMy); 
   useRequestOnMount(organizationActions.getRoles);
 
   useEffect(() => {

src/ui/layouts/settings/Plan/index.tsx

@@ -18,7 +18,7 @@ import { ExplorerPlan } from './ExplorerPlan';
 
 export const Plan: React.FC = () => {
   useRequestOnMount(() => stripeActions.getSubscription({}));
-  useRequestOnMount(() => billingActions.getOrganizationBilling({}));
+  // useRequestOnMount(() => billingActions.getOrganizationBilling({}));
   useRequestOnMount(() => stripeActions.getPaymentMethod({}));
 
   const currentSubscription = useSelector(stripeSelectors.currentSubscription);

src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './index.module.scss';
 
-import { useDispatch, useLocationPath } from '../../../hooks';
-import { showToasterAction } from '../../../../redux/actions';
-import { toasterTypes } from '../../../../constants';
+import { useLocationPath } from '../../../hooks';
 
 import {
   Box,
@@ -22,21 +20,20 @@ import { camelCaseToParagraph } from '../../../../utils';
 
 export const CreatePipelineButton: React.FC = () => {
   const locationPath = useLocationPath();
-  const dispatch = useDispatch();
   const [createPipelinePopupOpen, setCreatePipelinePopupOpen] = React.useState<
     boolean
   >(false);
-
+  const [isCopied, setIsCopied] = useState(false)
+  
   const codeString = '#!/bin/bash';
 
   const handleCopy = () => {
     navigator.clipboard.writeText(codeString);
-    dispatch(
-      showToasterAction({
-        description: 'Command copied to clipboard',
-        type: toasterTypes.success,
-      }),
-    );
+    
+    setIsCopied(true)
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 2000);
   };
 
   return (
@@ -162,7 +159,11 @@ export const CreatePipelineButton: React.FC = () => {
             </Box>
           </FlexBox> */}
 
-          <FlexBox justifyContent="end" marginTop="xl" flexWrap>
+          <FlexBox justifyContent="space-between" marginTop="xl" flexWrap>
+            <Box>
+              {isCopied && (<Paragraph>Copied!</Paragraph>)}
+            </Box>
+
             <DocumentationLink
               text={constantCommandsToCreateComponent.documentation}
             />

src/ui/layouts/stackComponents/StackDetail/index.tsx

@@ -152,7 +152,7 @@ export const StackDetail: React.FC = () => {
         <Box>
           <Paragraph style={headStyle}>Created</Paragraph>
           <Paragraph style={paraStyle}>
-            {formatDateToDisplay(stackComponent.createdAt)}
+            {formatDateToDisplay(stackComponent.created)}
           </Paragraph>
         </Box>
       </Box>

src/ui/layouts/stacks/Header/CreateStackButton.tsx

@@ -1,10 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './index.module.scss';
 
-import { useDispatch } from '../../../hooks';
-import { showToasterAction } from '../../../../redux/actions';
-import { toasterTypes } from '../../../../constants';
-
 import {
   Box,
   PrimaryButton,
@@ -20,21 +16,21 @@ import { CommandBoxWScroll } from '../../common/CommandBox';
 import { constantCommandsToCreateStack } from '../../../../constants/constantCommands';
 
 export const CreateStackButton: React.FC = () => {
-  const dispatch = useDispatch();
   const [createStackPopupOpen, setCreateStackPopupOpen] = React.useState<
     boolean
   >(false);
+  const [isCopied, setIsCopied] = useState(false)
 
   const codeString = '#!/bin/bash';
 
   const handleCopy = () => {
     navigator.clipboard.writeText(codeString);
-    dispatch(
-      showToasterAction({
-        description: 'Command copied to clipboard',
-        type: toasterTypes.success,
-      }),
-    );
+   
+    setIsCopied(true)
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 2000);
+
   };
 
   return (
@@ -59,7 +55,7 @@ export const CreateStackButton: React.FC = () => {
               <FlexBox alignItems="center" marginTop="md">
                 <CommandBoxWScroll command={item.text} />
                 <Box
-                  className={styles.iconStyle}
+                  className={styles.iconStyle} 
                   style={{ paddingTop: '7px' }}
                   onClick={handleCopy}
                 >
@@ -131,7 +127,11 @@ export const CreateStackButton: React.FC = () => {
             </Box>
           </FlexBox> */}
 
-          <FlexBox justifyContent="end" marginTop="xl" flexWrap>
+          <FlexBox justifyContent="space-between" marginTop="xl" flexWrap>
+            <Box>
+              {isCopied && (<Paragraph>Copied!</Paragraph>)}
+            </Box>
+
             <DocumentationLink
               text={constantCommandsToCreateStack.documentation}
             />