[FEAT] Create Team CTA

web-server/src/components/TeamSelector/TeamPopover.tsx

@@ -4,7 +4,8 @@ import {
   RadioButtonChecked,
   SearchRounded,
   ClearRounded,
-  Edit
+  Edit,
+  Add
 } from '@mui/icons-material';
 import {
   alpha,
@@ -22,6 +23,7 @@ import {
   useTheme
 } from '@mui/material';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import pluralize from 'pluralize';
 import {
   FC,
@@ -84,7 +86,7 @@ export const TeamPopover: FC<{
   const { team } = useSingleTeamConfig();
   const { addPage } = useOverlayPage();
   const updatingTeamMemberFilter = useBoolState();
-
+  const router = useRouter();
   const isRoleEng = false;
   const activeRouteEvent = useActiveRouteEvent('APP_TEAM_CHANGE_SINGLE');
   const dispatch = useDispatch();
@@ -115,6 +117,11 @@ export const TeamPopover: FC<{
 
   const teamReposMap = useSelector((s) => s.app.teamsProdBranchMap);
 
+  const addTeam = () => {
+    const path = `${ROUTES.TEAMS.PATH}?create=true`;
+    router.push(path);
+  };
+
   return (
     <Popover
       anchorEl={teamElRef.current}
@@ -323,6 +330,15 @@ export const TeamPopover: FC<{
                   'We getting your teams together, but someone seems missing 🤔'
                 )}
               </Scrollbar>
+              {Boolean(apiTeams.length) && (
+                <FlexBox centered marginTop={2}>
+                  <Button fullWidth variant="outlined" onClick={addTeam}>
+                    <FlexBox centered>
+                      <Add fontSize="small" /> Add new team
+                    </FlexBox>
+                  </Button>
+                </FlexBox>
+              )}
             </MenuListWrapperSecondary>
           </Stack>
         </FlexBox>

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

@@ -15,7 +15,7 @@ import { Integration } from '@/constants/integrations';
 import { FetchState } from '@/constants/ui-states';
 import { useAuth } from '@/hooks/useAuth';
 import { useBoolState, useEasyState } from '@/hooks/useEasyState';
-import { updateTeamBranchesMap } from '@/slices/app';
+import { appSlice, updateTeamBranchesMap } from '@/slices/app';
 import { fetchCurrentOrg } from '@/slices/auth';
 import { fetchTeams, createTeam, updateTeam } from '@/slices/team';
 import { useDispatch, useSelector } from '@/store';
@@ -95,7 +95,7 @@ export const TeamsCRUDProvider: React.FC<{
   const fetchTeamsAndRepos = useCallback(() => {
     // refetch session to update the  onboarding state of org
     dispatch(fetchCurrentOrg());
-    dispatch(
+    return dispatch(
       fetchTeams({
         org_id: orgId,
         provider: Integration.GITHUB
@@ -251,7 +251,7 @@ export const TeamsCRUDProvider: React.FC<{
           provider: Integration.GITHUB
         })
       )
-        .then((res) => {
+        .then((res: any) => {
           if (res.meta.requestStatus === 'rejected') {
             enqueueSnackbar('Failed to create team', {
               variant: 'error',
@@ -263,7 +263,20 @@ export const TeamsCRUDProvider: React.FC<{
             variant: 'success',
             autoHideDuration: 2000
           });
-          fetchTeamsAndRepos();
+          const createdTeam = res.payload.team;
+
+          fetchTeamsAndRepos().then((res: any) => {
+            if (res.meta.requestStatus === 'fulfilled') {
+              const { teams } = res.payload;
+              const singleTeam = teams.find(
+                (team: Team) => team.id === createdTeam.id
+              );
+              if (singleTeam) {
+                dispatch(appSlice.actions.setSingleTeam([singleTeam]));
+              }
+            }
+          });
+
           callBack?.(res);
         })
         .finally(isSaveLoading.false);

web-server/src/components/TeamsList.tsx

@@ -7,10 +7,11 @@ import {
   MenuItem,
   TextField
 } from '@mui/material';
+import { useRouter } from 'next/router';
 import { useSnackbar } from 'notistack';
 import pluralize from 'pluralize';
 import { ascend } from 'ramda';
-import { FC, MouseEventHandler, useCallback, useMemo } from 'react';
+import { FC, MouseEventHandler, useCallback, useEffect, useMemo } from 'react';
 import { truncate } from 'voca';
 
 import { Integration } from '@/constants/integrations';
@@ -35,6 +36,8 @@ const HORIZONTAL_SPACE = 3 / 2;
 export const TeamsList = () => {
   const teamsArray = useSelector((state) => state.team.teams);
   const searchQuery = useEasyState('');
+  const router = useRouter();
+  const showCreate = useBoolState(false);
 
   const teamsArrayFiltered = useMemo(() => {
     if (!searchQuery.value) {
@@ -45,7 +48,6 @@ export const TeamsList = () => {
     );
   }, [searchQuery.value, teamsArray]);
 
-  const showCreate = useBoolState(false);
   const handleShowCreateTeam = useCallback(() => {
     depFn(showCreate.toggle);
   }, [showCreate.toggle]);
@@ -54,6 +56,13 @@ export const TeamsList = () => {
     (state) => state.team?.requests?.teams === FetchState.REQUEST
   );
 
+  useEffect(() => {
+    if (router.query.create === 'true') {
+      depFn(showCreate.true);
+      router.replace(router.pathname, '');
+    }
+  }, [router, showCreate.true]);
+
   return (
     <>
       <SearchFilter