NTP-45411 | ui manager fix (#148)

* NTP-42029 | Updated Dockerfile.

* NTP-42029 | DropDown changes.

* NTP-42029 | Version changes.

Dockerfile

@@ -1,4 +1,4 @@
-FROM 193044292705.dkr.ecr.ap-south-1.amazonaws.com/common/node:16.15.1-alpine3.16 as build
+FROM 193044292705.dkr.ecr.ap-south-1.amazonaws.com/common/node:16.17.0-alpine3.16 as build
 
 WORKDIR /app
 COPY . /app
@@ -10,6 +10,7 @@ RUN yarn build
 
 FROM 193044292705.dkr.ecr.ap-south-1.amazonaws.com/common/nginx:1.23.3-alpine
 COPY --from=build /app/dist /usr/share/nginx/html
+RUN apk update && apk upgrade
 RUN adduser -u 4000 non-root-user -D ''
 RUN chown -R 4000:4000 /var/cache/nginx \
     && chown -R 4000:4000 /etc/nginx/conf.d/ \

src/Pages/Incidents/constants.ts

@@ -20,7 +20,7 @@ export const FETCH_INCIDENT_DATA = (payload: any): string => {
 };
 
 export const FETCH_PARTICIPANTS_DATA = (payload: string): string => {
-  return `${URL_PREFIX}/users?channel_id=${payload}`;
+  return `${URL_PREFIX}/incident-user?incident_id=${payload}`;
 };
 
 export const FETCH_HEADER_DETAILS = `${URL_PREFIX}/incidents/header`;

src/Pages/Incidents/useIncidentApis.tsx

@@ -51,7 +51,7 @@ const useIncidentApis = (): useIncidentApiProps => {
       .then(response => {
         dispatch(setIncidentData(response?.data?.data));
         fetchIncidentLog(incidentId);
-        fetchParticipants(response?.data?.data?.slackChannel);
+        fetchParticipants(response?.data?.data?.id);
       })
       .catch(handleApiError);
   };
@@ -65,8 +65,8 @@ const useIncidentApis = (): useIncidentApiProps => {
       .catch(handleApiError);
   };
 
-  const fetchParticipants = (slackChannel: string): void => {
-    const endPoint = FETCH_PARTICIPANTS_DATA(slackChannel);
+  const fetchParticipants = (incidentId: string): void => {
+    const endPoint = FETCH_PARTICIPANTS_DATA(incidentId);
     ApiService.get(endPoint)
       .then(response => {
         dispatch(setParticipantsData(response?.data?.data));

src/Pages/TeamRevamp/constants.ts

@@ -1,5 +1,6 @@
 import { createURL } from '@src/services/globalUtils';
-import { ActionType, AppState, Member } from './types';
+import { ActionType, AppState } from './types';
+import { SelectPickerOptionProps } from '@navi/web-ui/lib/components/SelectPicker/types';
 
 const URL_PREFIX = createURL('/houston');
 
@@ -12,6 +13,10 @@ export const FETCH_SINGLE_TEAM_DATA = (payload: string): string => {
   return `${URL_PREFIX}/teams-v2/${payload}`;
 };
 
+export const FETCH_TEAM_TYPES = (payload: string): string => {
+  return `${URL_PREFIX}/team-types`;
+};
+
 export const UPDATE_TEAM_DATA = (): string => {
   return `${URL_PREFIX}/teams-v2`;
 };
@@ -26,6 +31,7 @@ export const MAKE_MANAGER = (teamId: string, userId: string): string => {
 
 export const regularExpression = /^[a-zA-Z][a-zA-Z0-9_ -]{1,48}[a-zA-Z0-9]$/;
 export const validEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+export const teamTypeRegularExpression = /^[A-Z]{2,10}$/;
 export const emailRegularExpression = /^[a-zA-Z0-9._+-]+@navi\.com$/;
 export const DEFAULT_SEVERITY = {
   label: 'Sev-3',
@@ -50,6 +56,8 @@ export const actionTypes = {
   SET_TEAM_NAME_ERROR: 'SET_TEAM_NAME_ERROR',
   SET_EMAIL_ERROR: 'SET_EMAIL_ERROR',
   SET_EMAIL: 'SET_EMAIL',
+  SET_TEAM_TYPE: 'SET_TEAM_TYPE',
+  SET_IS_CX: 'SET_IS_CX',
   SET_CLEAR_MODAL: 'SET_CLEAR_MODAL',
   SET_ADD_MEMBER_ERROR: 'SET_ADD_MEMBER_ERROR',
 };
@@ -82,6 +90,9 @@ export const initialState: AppState = {
   teamName: '',
   teamNameError: '',
   emailError: '',
+  teamType: '',
+  teamTypeError: '',
+  isCx: false,
   email: '',
   clearModal: false,
   addMemberError: '',
@@ -190,7 +201,29 @@ export const reducer = (state: AppState, action: ActionType): AppState => {
         ...state,
         addMemberError: action.payload,
       };
+    case actionTypes.SET_IS_CX:
+      return {
+        ...state,
+        isCx: action.payload,
+      };
+    case actionTypes.SET_TEAM_TYPE:
+      return {
+        ...state,
+        teamType: action.payload,
+      };
     default:
       return state;
   }
 };
+
+export enum TEAM_TYPES {
+  CX = 'CX',
+  BF = 'BF',
+  DEFAULT = 'DEFAULT',
+}
+
+export const teamTypesMapping: SelectPickerOptionProps[] = [
+  { label: 'CX-Team', value: TEAM_TYPES.CX },
+  { label: 'Business-Function Team', value: TEAM_TYPES.BF },
+  { label: 'Default (Tech-Team)', value: TEAM_TYPES.DEFAULT },
+];

src/Pages/TeamRevamp/partials/CreateTeam/CreateTeam.module.scss

@@ -12,3 +12,9 @@
 .input-wrapper {
   @include team-form-wrapper;
 }
+.select-picker-wrapper {
+  @include team-form-wrapper;
+}
+.team-type-label {
+  @include team-form-wrapper;
+}

src/Pages/TeamRevamp/partials/CreateTeam/CreateTeam.tsx

@@ -1,7 +1,9 @@
 import { useReducer } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Typography } from '@navi/web-ui/lib/primitives';
+import Typography from '@navi/web-ui/lib/primitives/Typography';
 import { AlertOutlineIcon } from '@navi/web-ui/lib/icons';
+import { SingleSelectAutoComplete } from '@navi/web-ui/lib/components';
+import { SelectPickerValue } from '@navi/web-ui/lib/components/SelectPicker/types';
 import { BorderedInput, ModalDialog } from '@navi/web-ui/lib/primitives';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import { AppDispatch } from '@src/store';
@@ -24,6 +26,7 @@ import {
   regularExpression,
   emailRegularExpression,
   validEmail,
+  teamTypesMapping,
 } from '@src/Pages/TeamRevamp/constants';
 import { CreateTeamProps } from '@src/Pages/TeamRevamp/types';
 import styles from './CreateTeam.module.scss';
@@ -36,6 +39,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({ handleSetTeam }) => {
   const { fireEvent } = useClickStream();
   const { EVENT_NAME, SCREEN_NAME } = CLICK_STREAM_EVENT_FACTORY;
   const { modalOpen } = useSelector(selectSearchTeamData);
+
   const validateTeamName = (value: string): void => {
     value = value.trim();
     dispatchData({
@@ -56,6 +60,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({ handleSetTeam }) => {
         : '',
     });
   };
+
   const handleTeamNameChange = (
     e: React.ChangeEvent<HTMLInputElement>,
   ): void => {
@@ -76,6 +81,14 @@ const CreateTeam: React.FC<CreateTeamProps> = ({ handleSetTeam }) => {
     validateEmail(inputValue);
   };
 
+  const handleTeamTypeChange = (option: SelectPickerValue): void => {
+    if (!option) return;
+    dispatchData({
+      type: actionTypes.SET_TEAM_TYPE,
+      payload: option.toString(),
+    });
+  };
+
   const addTeamHandler = (): void => {
     fireEvent(EVENT_NAME.Houston_Create_Team, {
       screen_name: SCREEN_NAME.TEAM_PAGE,
@@ -86,6 +99,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({ handleSetTeam }) => {
         email: state.email,
         severity_id: DEFAULT_SEVERITY_ID,
       },
+      team_type: state.teamType,
     })
       .then(response => {
         const toastMessage = `${response?.data?.data?.message}`;
@@ -132,6 +146,8 @@ const CreateTeam: React.FC<CreateTeamProps> = ({ handleSetTeam }) => {
               disabled:
                 !!state.teamNameError ||
                 !!state.emailError ||
+                !!state.teamTypeError ||
+                !state.teamType ||
                 !state.teamName ||
                 !state.email,
             },
@@ -168,6 +184,20 @@ const CreateTeam: React.FC<CreateTeamProps> = ({ handleSetTeam }) => {
               />
             </Typography>
           </div>
+
+          <div className={styles['select-picker-wrapper']}>
+            <Typography variant="p1">
+              <SingleSelectAutoComplete
+                inputLabel={'Team type'}
+                options={teamTypesMapping}
+                selectedOption={state.teamType ?? 'DEFAULT'}
+                updateSelectedOptions={handleTeamTypeChange}
+                variant="bordered"
+                placeholder={'Select team type'}
+                containerClassName={styles['team-type']}
+              />
+            </Typography>
+          </div>
         </ModalDialog>
       )}
     </div>

src/Pages/TeamRevamp/partials/SlackDetails/Slack.module.scss

@@ -16,6 +16,12 @@
 .team-name {
   margin: 24px 24px 24px 0px;
   color: var(--navi-color-gray-c1);
+  display: inline;
+}
+.team-type-label {
+  margin: 12px 12px 12px 0px;
+  color: var(--navi-color-gray-c2);
+  display: inline;
 }
 .slack-details-wrapper {
   display: inline-flex;

src/Pages/TeamRevamp/partials/SlackDetails/index.tsx

@@ -157,6 +157,9 @@ const TeamDetails: React.FC = () => {
       <Typography variant="h1" className={styles['team-name']}>
         {teamDetails?.name}
       </Typography>{' '}
+      <Typography variant="h3" className={styles['team-type-label']}>
+        {teamDetails?.team_type}
+      </Typography>
       <Typography variant="h5" className={styles['member-div']}>
         SLACK DETAILS
       </Typography>{' '}

src/Pages/TeamRevamp/partials/TeamMemberDetails/SeverityWiseList.tsx

@@ -29,7 +29,7 @@ const SeverityWiseList: FC<SeverityWiseListProps> = (
   const Role = useAuthData();
   const computedClassName = (item: Member): string => {
     return (
-      (manager?.email === item.email && styles['manager-wrapper']) ||
+      (manager?.id === item.id && styles['manager-wrapper']) ||
       (userEmail !== managerEmail &&
         !Role.includes('Admin') &&
         styles['team-member-view']) ||

src/Pages/TeamRevamp/types.ts

@@ -92,6 +92,7 @@ export interface TeamsDetail {
   oncall?: { id: string; name: string };
   pse_oncall?: { id: string; name: string };
   slack_channel?: { id: string; name: string };
+  team_type?: string;
 }
 export interface AppState {
   openDialog: boolean;
@@ -119,7 +120,10 @@ export interface AppState {
   teamName: string;
   teamNameError: string;
   emailError: string;
+  teamType: string;
+  teamTypeError: string;
   email: string;
+  isCx: boolean;
   clearModal: boolean;
   addMemberError: string;
 }