Add editing functionality to TeamsList

web-server/pages/teams/index.tsx

@@ -3,7 +3,7 @@ import ExtendedSidebarLayout from 'src/layouts/ExtendedSidebarLayout';
 
 import { Authenticated } from '@/components/Authenticated';
 import { FlexBox } from '@/components/FlexBox';
-import { CreateTeams } from '@/components/Teams/CreateTeams';
+import { CreateEditTeams } from '@/components/Teams/CreateTeams';
 import { TeamsList } from '@/components/TeamsList';
 import { Integration } from '@/constants/integrations';
 import { PageWrapper } from '@/content/PullRequests/PageWrapper';
@@ -39,7 +39,7 @@ function Page() {
       hideAllSelectors
     >
       <FlexBox col gap={4}>
-        {teamsList.length ? <TeamsList /> : <CreateTeams />}
+        {teamsList.length ? <TeamsList /> : <CreateEditTeams />}
       </FlexBox>
     </PageWrapper>
   );

web-server/src/components/OverlayComponents/TeamEdit.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+
+import { CRUDProps } from '@/components/Teams/CreateTeams';
+
+import { FlexBox } from '../FlexBox';
+import { CreateEditTeams } from '../Teams/CreateTeams';
+
+export const TeamEdit: FC<CRUDProps> = ({
+  teamId,
+  hideCardComponents,
+  onSave,
+  onDiscard
+}) => {
+  return (
+    <FlexBox>
+      <CreateEditTeams
+        teamId={teamId}
+        hideCardComponents={hideCardComponents}
+        onDiscard={onDiscard}
+        onSave={onSave}
+      />
+    </FlexBox>
+  );
+};

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

@@ -19,20 +19,36 @@ import { BaseRepo } from '@/types/resources';
 import { FlexBox } from '../FlexBox';
 import { Line } from '../Text';
 
-type CRUDCallBacks = {
+export type CRUDProps = {
   onSave?: AnyFunction;
   onDiscard?: AnyFunction;
+  teamId?: ID;
+  hideCardComponents?: boolean;
 };
 
-export const CreateTeams: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
+export const CreateEditTeams: FC<CRUDProps> = ({
+  onSave,
+  onDiscard,
+  teamId,
+  hideCardComponents
+}) => {
   return (
-    <TeamsCRUDProvider>
-      <TeamsCRUD onDiscard={onDiscard} onSave={onSave} />
+    <TeamsCRUDProvider teamId={teamId}>
+      <TeamsCRUD
+        hideCardComponents={hideCardComponents}
+        teamId={teamId}
+        onDiscard={onDiscard}
+        onSave={onSave}
+      />
     </TeamsCRUDProvider>
   );
 };
 
-export const TeamsCRUD: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
+const TeamsCRUD: FC<CRUDProps> = ({
+  onSave,
+  onDiscard,
+  hideCardComponents
+}) => {
   const { isPageLoading } = useTeamCRUD();
   return (
     <>
@@ -43,13 +59,13 @@ export const TeamsCRUD: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
           gap={4}
           col
           justifyBetween
-          component={Card}
+          component={!hideCardComponents && Card}
           p={2}
-          maxWidth={'900px'}
+          width={'900px'}
         >
           <Heading />
           <TeamName />
-          <TeamRepos />
+          <TeamRepos hideCardComponents={hideCardComponents} />
           <ActionTray onDiscard={onDiscard} onSave={onSave} />
         </FlexBox>
       )}
@@ -67,12 +83,24 @@ const Loader = () => {
 };
 
 const Heading = () => {
+  const { isEditing, editingTeam } = useTeamCRUD();
+  const heading = isEditing ? 'Edit a team' : 'Create a team';
+
   return (
     <FlexBox col>
       <Line huge semibold>
-        Create a Team
+        {heading}
       </Line>
-      <Line>Create a team to generate metric insights</Line>
+      {isEditing ? (
+        <Line>
+          Currently editing{' '}
+          <Line info semibold>
+            {editingTeam.name}
+          </Line>{' '}
+        </Line>
+      ) : (
+        <Line>Create a team to generate metric insights</Line>
+      )}
     </FlexBox>
   );
 };
@@ -109,7 +137,9 @@ const TeamName = () => {
   );
 };
 
-const TeamRepos = () => {
+const TeamRepos: FC<{ hideCardComponents?: boolean }> = ({
+  hideCardComponents
+}) => {
   const {
     repoOptions,
     teamRepoError,
@@ -165,18 +195,24 @@ const TeamRepos = () => {
           )}
           renderTags={() => null}
         />
-        <DisplayRepos />
+        <DisplayRepos hideCardComponents={hideCardComponents} />
       </FlexBox>
     </FlexBox>
   );
 };
 
-const ActionTray: FC<CRUDCallBacks> = ({
+const ActionTray: FC<CRUDProps> = ({
   onSave: onSaveCallBack,
   onDiscard: onDiscardCallBack
 }) => {
-  const { onSave, isSaveLoading, teamName, selectedRepos, onDiscard } =
-    useTeamCRUD();
+  const {
+    onSave,
+    isSaveLoading,
+    teamName,
+    selectedRepos,
+    onDiscard,
+    saveDisabled
+  } = useTeamCRUD();
   const { enqueueSnackbar } = useSnackbar();
 
   return (
@@ -198,7 +234,7 @@ const ActionTray: FC<CRUDCallBacks> = ({
         }}
       >
         <Button
-          disabled={isSaveLoading || !teamName || !selectedRepos.length}
+          disabled={saveDisabled}
           variant="contained"
           onClick={() => onSave(onSaveCallBack)}
           sx={{
@@ -224,24 +260,42 @@ const ActionTray: FC<CRUDCallBacks> = ({
   );
 };
 
-const DisplayRepos = () => {
+const DisplayRepos: FC<{ hideCardComponents?: boolean }> = ({
+  hideCardComponents
+}) => {
   const { selectedRepos } = useTeamCRUD();
   return (
-    <FlexBox gap2 ml={2} minHeight={'49px'}>
+    <FlexBox gap2 ml={2} minHeight={hideCardComponents ? '54px' : '49px'}>
       {!!selectedRepos.length && <Divider flexItem orientation="vertical" />}
       <FlexBox flexWrap={'wrap'} gap2>
         {selectedRepos.map((repo) => (
-          <RepoItem repo={repo} key={repo.id} />
+          <RepoItem
+            hideCardComponents={hideCardComponents}
+            repo={repo}
+            key={repo.id}
+          />
         ))}
       </FlexBox>
     </FlexBox>
   );
 };
 
-const RepoItem: FC<{ repo: BaseRepo }> = ({ repo }) => {
+const RepoItem: FC<{ repo: BaseRepo; hideCardComponents?: boolean }> = ({
+  repo,
+  hideCardComponents
+}) => {
   const { unselectRepo } = useTeamCRUD();
   return (
-    <FlexBox height={'49px'} component={Card} gap={2} alignCenter px={2}>
+    <FlexBox
+      height={hideCardComponents ? '54px' : '49px'}
+      border={hideCardComponents && '1px solid'}
+      borderColor={hideCardComponents && '#353552'}
+      borderRadius={'10px'}
+      component={!hideCardComponents && Card}
+      gap={2}
+      alignCenter
+      px={2}
+    >
       {repo.name}{' '}
       <FlexBox
         pointer