TP-24958: Linking slack channel to team and showing slack channel to the team

src/Pages/Team/partials/TeamForm.tsx

@@ -20,6 +20,7 @@ const TeamForm = (props: TeamFormProps) => {
   const [data, setData] = useState<any>({});
   const [slackUserIds, setSlackUserIds] = useState('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [slackChannelId, setSlackChannelId] = useState<string>('');
 
   const fetchTeamById = (updateDate = false) => {
     const endPoint = FETCH_SINGLE_TEAM_DATA(teamId);
@@ -61,6 +62,7 @@ const TeamForm = (props: TeamFormProps) => {
       workEmailIds: slackUserIds?.includes(',')
         ? slackUserIds.split(',').map(item => item?.trim())
         : [slackUserIds],
+      webhook_slack_channel: slackChannelId,
     })
       .then(response => {
         toast.success('Team Updated Successfully !!');
@@ -76,6 +78,13 @@ const TeamForm = (props: TeamFormProps) => {
       });
   };
 
+  const getSubmitButtonState = (): boolean => {
+    if (slackUserIds.length) {
+      return !slackUserIds.length;
+    }
+    return !slackChannelId.length;
+  };
+
   if (isLoading) {
     return (
       <div className={styles['loader-container']}>
@@ -88,6 +97,14 @@ const TeamForm = (props: TeamFormProps) => {
     <>
       <div className={styles['team-form-wrapper']}>
         <div className={styles['content-wrapper']}>
+          <div className={styles['custom-bordered-input']}>
+            <Typography variant="p3" color="#585757">
+              Slack Channel Name
+            </Typography>
+            <Typography variant="p3">
+              {data?.webhook_slack_channel_name || '-'}
+            </Typography>
+          </div>
           <div className={styles['custom-bordered-input']}>
             <Typography variant="p3" color="#585757">
               Members
@@ -107,13 +124,23 @@ const TeamForm = (props: TeamFormProps) => {
               fullWidth
             />
           </div>
+          <div className={styles['custom-bordered-input']}>
+            <BorderedInput
+              inputLabel="Add slack details"
+              inputSize="medium"
+              placeholder="Please add the slack channel id here."
+              onChange={e => setSlackChannelId(e.target?.value)}
+              hintMsg="Add the slack channel to get incident updates."
+              fullWidth
+            />
+          </div>
           <div className={styles['update-team-btn-wrapper']}>
             <Button
               fullWidth
               variant="primary"
               onClick={submitHandler}
               className={styles['update-team-btn']}
-              disabled={!slackUserIds.length}
+              disabled={getSubmitButtonState()}
             >
               Update team details
             </Button>