Teams page updates

web-server/pages/teams/index.tsx

@@ -9,12 +9,13 @@ import { Integration } from '@/constants/integrations';
 import { PageWrapper } from '@/content/PullRequests/PageWrapper';
 import { useAuth } from '@/hooks/useAuth';
 import { fetchTeams } from '@/slices/team';
-import { useDispatch } from '@/store';
+import { useDispatch, useSelector } from '@/store';
 import { PageLayout } from '@/types/resources';
 
 function Page() {
   const dispatch = useDispatch();
-  const { role, orgId } = useAuth();
+  const { orgId } = useAuth();
+  const teamsList = useSelector((state) => state.team.teams);
 
   useEffect(() => {
     if (!orgId) return;
@@ -37,8 +38,9 @@ function Page() {
       showEvenIfNoTeamSelected
       hideAllSelectors
     >
-      <TeamsList />
-      <CreateTeams />
+      <FlexBox col gap={4}>
+        {teamsList.length ? <TeamsList /> : <CreateTeams />}
+      </FlexBox>
     </PageWrapper>
   );
 }

web-server/src/components/Teams/CreateTeams.tsx

@@ -19,23 +19,25 @@ import { BaseRepo } from '@/types/resources';
 import { FlexBox } from '../FlexBox';
 import { Line } from '../Text';
 
-export const CreateTeams = () => {
+type CRUDCallBacks = {
+  onSave?: AnyFunction;
+  onDiscard?: AnyFunction;
+};
+
+export const CreateTeams: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
   return (
     <TeamsCRUDProvider>
-      <TeamsCRUD />
+      <TeamsCRUD onDiscard={onDiscard} onSave={onSave} />
     </TeamsCRUDProvider>
   );
 };
 
-export const TeamsCRUD = () => {
+export const TeamsCRUD: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
   const { isPageLoading } = useTeamCRUD();
   return (
     <>
       {isPageLoading ? (
-        <FlexBox alignCenter gap2>
-          <CircularProgress size="20px" />
-          <Line>Loading...</Line>
-        </FlexBox>
+        <Loader />
       ) : (
         <FlexBox
           gap={4}
@@ -45,21 +47,36 @@ export const TeamsCRUD = () => {
           p={2}
           maxWidth={'900px'}
         >
-          <FlexBox col>
-            <Line huge semibold>
-              Create a Team
-            </Line>
-            <Line>Create a team to generate metric insights</Line>
-          </FlexBox>
+          <Heading />
           <TeamName />
           <TeamRepos />
-          <ActionTray />
+          <ActionTray onDiscard={onDiscard} onSave={onSave} />
         </FlexBox>
       )}
     </>
   );
 };
 
+const Loader = () => {
+  return (
+    <FlexBox alignCenter gap2>
+      <CircularProgress size="20px" />
+      <Line>Loading...</Line>
+    </FlexBox>
+  );
+};
+
+const Heading = () => {
+  return (
+    <FlexBox col>
+      <Line huge semibold>
+        Create a Team
+      </Line>
+      <Line>Create a team to generate metric insights</Line>
+    </FlexBox>
+  );
+};
+
 const TeamName = () => {
   const {
     teamName,
@@ -102,7 +119,7 @@ const TeamRepos = () => {
   } = useTeamCRUD();
 
   return (
-    <FlexBox col gap={2} relative>
+    <FlexBox col gap={2}>
       <FlexBox col>
         <Line big semibold>
           Add Repositories
@@ -154,12 +171,16 @@ const TeamRepos = () => {
   );
 };
 
-const ActionTray = () => {
-  const { onSave, isSaveLoading, teamName, selectedRepos } = useTeamCRUD();
+const ActionTray: FC<CRUDCallBacks> = ({
+  onSave: onSaveCallBack,
+  onDiscard: onDiscardCallBack
+}) => {
+  const { onSave, isSaveLoading, teamName, selectedRepos, onDiscard } =
+    useTeamCRUD();
   const { enqueueSnackbar } = useSnackbar();
 
   return (
-    <FlexBox>
+    <FlexBox gap2>
       <FlexBox
         onClick={() => {
           if (!teamName) {
@@ -179,7 +200,7 @@ const ActionTray = () => {
         <Button
           disabled={isSaveLoading || !teamName || !selectedRepos.length}
           variant="contained"
-          onClick={() => onSave()}
+          onClick={() => onSave(onSaveCallBack)}
           sx={{
             minWidth: '200px',
             '&.Mui-disabled': {
@@ -190,14 +211,23 @@ const ActionTray = () => {
           {isSaveLoading ? <CircularProgress size={'18px'} /> : 'Save'}
         </Button>
       </FlexBox>
+      <Button
+        variant="outlined"
+        sx={{ minWidth: '200px' }}
+        onClick={() => {
+          onDiscard(onDiscardCallBack);
+        }}
+      >
+        Discard
+      </Button>
     </FlexBox>
   );
 };
 
 const DisplayRepos = () => {
   const { selectedRepos } = useTeamCRUD();
   return (
-    <FlexBox gap2 ml={2} height={'49px'}>
+    <FlexBox gap2 ml={2} minHeight={'49px'}>
       {!!selectedRepos.length && <Divider flexItem orientation="vertical" />}
       <FlexBox flexWrap={'wrap'} gap2>
         {selectedRepos.map((repo) => (

web-server/src/components/Teams/useTeamsConfig.tsx

@@ -1,11 +1,5 @@
 import { useSnackbar } from 'notistack';
-import {
-  createContext,
-  useContext,
-  useEffect,
-  SyntheticEvent,
-  useCallback
-} from 'react';
+import { createContext, useContext, SyntheticEvent, useCallback } from 'react';
 
 import { Integration } from '@/constants/integrations';
 import { FetchState } from '@/constants/ui-states';
@@ -38,6 +32,7 @@ interface TeamsCRUDContextType {
   isSaveLoading: boolean;
   unselectRepo: (id: BaseRepo['id']) => void;
   isPageLoading: boolean;
+  onDiscard: (callBack?: AnyFunction) => void;
 }
 
 const TeamsCRUDContext = createContext<TeamsCRUDContextType | undefined>(
@@ -65,8 +60,8 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
   const isPageLoading = useSelector(
     (s) => s.team.requests?.teams === FetchState.REQUEST
   );
-  useEffect(() => {
-    dispatch(
+  const fetchTeamsAndRepos = useCallback(() => {
+    return dispatch(
       fetchTeams({
         org_id: orgId,
         provider: Integration.GITHUB
@@ -160,19 +155,15 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
             variant: 'success',
             autoHideDuration: 2000
           });
-          dispatch(
-            fetchTeams({
-              org_id: orgId,
-              provider: Integration.GITHUB
-            })
-          );
+          fetchTeamsAndRepos();
           callBack?.(res);
         })
         .finally(isSaveLoading.false);
     },
     [
       dispatch,
       enqueueSnackbar,
+      fetchTeamsAndRepos,
       isSaveLoading.false,
       isSaveLoading.true,
       org.name,
@@ -182,6 +173,17 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
     ]
   );
 
+  const onDiscard = useCallback(
+    (callBack?: AnyFunction) => {
+      depFn(teamName.set, '');
+      depFn(selections.set, []);
+      depFn(teamRepoError.false);
+      depFn(teamNameError.false);
+      callBack?.();
+    },
+    [selections.set, teamName.set, teamRepoError.false, teamNameError.false]
+  );
+
   const contextValue: TeamsCRUDContextType = {
     teamName: teamName.value,
     showTeamNameError: teamNameError.value,
@@ -198,7 +200,8 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
     onSave,
     isSaveLoading: isSaveLoading.value,
     unselectRepo,
-    isPageLoading
+    isPageLoading,
+    onDiscard
   };
 
   return (