varnitgoyal95/houston-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

INFRA-2874 | integrate api

Browse Source
This commit is contained in:
dhruvjoshi
2024-02-29 19:19:09 +05:30
parent c909bda2f5
commit 88d01fcf1c
16 changed files with 227 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Pages/TeamRevamp/constants.ts
View File

@@ -53,11 +53,13 @@ export const actionTypes = {
SET_ADD_MEMBER_ERROR: 'SET_ADD_MEMBER_ERROR',
};
export const DEFAULT_SEVERITY_ID = 4;
export const initialState: AppState = {
openDialog: false,
openModal: false,
emailIds: '',
severityId: '4',
severityId: DEFAULT_SEVERITY_ID,
selectedMember: undefined,
hovered: {
ishovered: false,
@@ -104,7 +106,7 @@ export const reducer = (state: AppState, action: ActionType): AppState => {
case actionTypes.SET_SEVERITY_ID:
return {
...state,
severityId: action.payload,
severityId: parseInt(action.payload),
};
case actionTypes.SET_SELECTED_MEMBER:
return {

6
src/Pages/TeamRevamp/partials/CreateTeam/CreateTeam.tsx
View File

@@ -15,6 +15,7 @@ import {
} from '@src/slices/team1Slice';
import {
CREATE_TEAM,
DEFAULT_SEVERITY_ID,
actionTypes,
initialState,
reducer,
@@ -81,7 +82,10 @@ const CreateTeam: React.FC<CreateTeamProps> = ({ handleSetTeam }) => {
});
ApiService.post(CREATE_TEAM, {
name: state.teamName,
manager_email: state.email,
manager_details: {
email: state.email,
severity_id: DEFAULT_SEVERITY_ID,
},
})
.then(response => {
const toastMessage = `${response?.data?.data?.message}`;

34
src/Pages/TeamRevamp/partials/TeamMemberDetails/Header.tsx
View File

@@ -1,34 +0,0 @@
import { FC } from 'react';
import { Button, Typography } from '@navi/web-ui/lib/primitives';
import styles from './TeamMemberDetails.module.scss';
interface HeaderProps {
isDisabled: boolean;
sevType: number;
}
const Header: FC<HeaderProps> = (props: HeaderProps) => {
const { isDisabled, sevType } = props;
const sevText = `Sev ${sevType - 1} ${sevType > 1 ? ' and above' : ''}`;
return (
<div className={styles['header']}>
<div className={styles['severity-header-container']}>
<Typography variant="h5" className={styles['severity-text-container']}>
{sevText}
</Typography>
<Button
variant="text"
onClick={() => {}}
disabled={isDisabled}
className={styles['update-details-button']}
>
Update details
</Button>
</div>
<hr className={styles['hr-tag']}></hr>
</div>
);
};
export default Header;

21
src/Pages/TeamRevamp/partials/TeamMemberDetails/Modals/RemoveManager.module.scss Normal file
View File

@@ -0,0 +1,21 @@
.footer-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 32px;
.remove-button {
background-color: var(--navi-color-red-base);
height: 36px;
width: 77px;
color: var(--navi-color-gray-bg-primary);
}
.cancel-button {
background: var(--navi-color-gray-bg-primary);
height: 36px;
width: 77px;
color: var(--navi-color-gray-c2);
margin-right: 12px;
border: 1px solid var(--navi-color-gray-border);
border-radius: 6px;
margin-right: 16px;
}
}

12
src/Pages/TeamRevamp/partials/TeamMemberDetails/Modals/RemoveManager.tsx
View File

@@ -5,7 +5,7 @@ import { actionTypes } from '@src/Pages/TeamRevamp/constants';
import useTeamApis from '@src/Pages/TeamRevamp/useTeamApis';
import { ReducerStateType } from '../../../types';
import styles from '../TeamMemberDetails.module.scss';
import styles from './RemoveManager.module.scss';
const RemoveManager: FC<ReducerStateType> = (props: ReducerStateType) => {
const { removeTeamMember } = useTeamApis();
@@ -27,12 +27,10 @@ const RemoveManager: FC<ReducerStateType> = (props: ReducerStateType) => {
header="Remove member? "
onClose={handleResetDialog}
>
<div className={styles['input-wrapper']}>
<Typography variant="p4">
Are you sure you want to remove {`${state.selectedMember?.name}`} from
this team?
</Typography>
</div>
<Typography variant="p4">
Are you sure you want to remove {`${state.selectedMember?.name}`} from
this team?
</Typography>
<div className={styles['footer-wrapper']}>
<Button

11
src/Pages/TeamRevamp/partials/TeamMemberDetails/Modals/UpdateManager.tsx
View File

@@ -5,7 +5,6 @@ import { actionTypes } from '@src/Pages/TeamRevamp/constants';
import useTeamApis from '@src/Pages/TeamRevamp/useTeamApis';
import { ReducerStateType } from '../../../types';
import styles from '../TeamMemberDetails.module.scss';
const UpdateManager: FC<ReducerStateType> = (props: ReducerStateType) => {
const { makeManager } = useTeamApis();
@@ -37,12 +36,10 @@ const UpdateManager: FC<ReducerStateType> = (props: ReducerStateType) => {
header="Update manager? "
onClose={handleResetModal}
>
<div className={styles['input-wrapper']}>
<Typography variant="p4">
Are you sure you want to make {`${state.selectedMember?.name}`}{' '}
manager of this team?
</Typography>
</div>
<Typography variant="p4">
Are you sure you want to make {`${state.selectedMember?.name}`} manager
of this team?
</Typography>
</ModalDialog>
);
};

7
src/Pages/TeamRevamp/partials/TeamMemberDetails/Modals/UpdateSevList.module.scss Normal file
View File

@@ -0,0 +1,7 @@
.auto-complete-container{
> div >div {
span{
color: var(--blue-blue_base) !important;
}
}
}

82
src/Pages/TeamRevamp/partials/TeamMemberDetails/Modals/UpdateSevList.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { FC, useState } from 'react';
import { ModalDialog, Typography } from '@navi/web-ui/lib/primitives';
import styles from './UpdateSevList.module.scss';
import useTeamApis from '@src/Pages/TeamRevamp/useTeamApis';
import {
SelectPickerOptionProps,
SelectPickerValue,
} from '@navi/web-ui/lib/components/SelectPicker/types';
import { AutoComplete } from '@navi/web-ui/lib/components';
interface UpdateSevListProps {
isOpen: boolean;
onClose: () => void;
sevType: number;
availableMembers: SelectPickerOptionProps[];
}
const UpdateSevList: FC<UpdateSevListProps> = (props: UpdateSevListProps) => {
const { isOpen, onClose, sevType, availableMembers } = props;
const [selectedMember, setSelectedMember] = useState<SelectPickerValue[]>([]);
const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
const { addMemberHandler } = useTeamApis();
const handleClose = (): void => {
setSelectedMember([]);
onClose();
};
const onSubmit = (): void => {
const selectedMemberString = selectedMember.join(',');
addMemberHandler(selectedMemberString, sevType);
handleClose();
};
const handleChipRemoval = (options: SelectPickerOptionProps[]): void => {
setSelectedMember(options.map(option => option.value));
setIsSubmitDisabled(options.length === 0);
};
const handleSelectionChange = (options: SelectPickerOptionProps[]): void => {
setSelectedMember(options.map(option => option.value));
setIsSubmitDisabled(options.length === 0);
};
const handleClearAll = (): void => {
setSelectedMember([]);
setIsSubmitDisabled(true);
};
return (
<ModalDialog
open={isOpen}
header={`Update Sev ${sevType - 1} member list`}
onClose={handleClose}
footerButtons={[
{
label: 'Cancel',
onClick: handleClose,
},
{
label: 'Update List',
onClick: onSubmit,
disabled: isSubmitDisabled,
},
]}
>
<Typography variant="p4">Add member(s)</Typography>
<AutoComplete
options={availableMembers}
selectedOptions={selectedMember}
variant="bordered"
updateOnChipRemoval={handleChipRemoval}
updateClearAllCallback={handleClearAll}
updateSelectedOptions={handleSelectionChange}
persistMenuOnSelect={true}
placeholder="Select or Search member"
enableSelectedOptionSorting={true}
limitChipThreshold={2}
containerClassName={styles['auto-complete-container']}
/>
</ModalDialog>
);
};
export default UpdateSevList;

60
src/Pages/TeamRevamp/partials/TeamMemberDetails/SevHeader.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { FC, useState } from 'react';
import { Button, Typography } from '@navi/web-ui/lib/primitives';
import styles from './TeamMemberDetails.module.scss';
import { Member } from '../../types';
import UpdateSevList from './Modals/UpdateSevList';
import { SelectPickerOptionProps } from '@navi/web-ui/lib/components/SelectPicker/types';
import { getSelectLabelOptionsForMember } from '../../util';
interface HeaderProps {
isDisabled: boolean;
sevType: number;
teamMembers: Member[][];
}
const SevHeader: FC<HeaderProps> = (props: HeaderProps) => {
const { isDisabled, sevType, teamMembers } = props;
const [isOpen, setIsOpen] = useState(false);
const sevText = `Sev ${sevType - 1} ${sevType > 1 ? ' and above' : ''}`;
const handleUpdateListClick = (): void => {
setIsOpen(true);
};
const handleModalClose = (): void => {
setIsOpen(false);
};
return (
<>
<div className={styles['header']}>
<div className={styles['severity-header-container']}>
<Typography
variant="h5"
className={styles['severity-text-container']}
>
{sevText}
</Typography>
<Button
variant="text"
onClick={handleUpdateListClick}
disabled={isDisabled}
className={styles['update-details-button']}
>
Update List
</Button>
</div>
<hr className={styles['hr-tag']}></hr>
</div>
<UpdateSevList
isOpen={isOpen}
onClose={handleModalClose}
sevType={sevType}
availableMembers={getSelectLabelOptionsForMember(teamMembers, sevType)}
/>
</>
);
};
export default SevHeader;

1
src/Pages/TeamRevamp/partials/TeamMemberDetails/SeverityDropDown.tsx
View File

@@ -61,6 +61,7 @@ const SeverityDropDown: FC<SeverityDropDownProps> = (
placeholder="Assignee"
className={styles['single-selector']}
disabled={isDisabled}
popupClassName={styles['dropdown']}
/>
);
};

5
src/Pages/TeamRevamp/partials/TeamMemberDetails/SeverityWiseList.tsx
View File

@@ -10,7 +10,7 @@ import { useAuthData } from '@src/services/hooks/useAuth';
import { Member, ReducerStateType } from '../../types';
import useGetTeamDetailsConstants, { isUserParticipant } from '../../util';
import Header from './Header';
import SevHeader from './SevHeader';
import styles from './TeamMemberDetails.module.scss';
interface SeverityWiseListProps extends ReducerStateType {
@@ -77,11 +77,12 @@ const SeverityWiseList: FC<SeverityWiseListProps> = (
});
};
const header: JSX.Element = (
<Header
<SevHeader
isDisabled={
!isUserParticipant(teamMembers, userEmail) && !Role.includes('Admin')
}
sevType={sevType}
teamMembers={teamMembers}
/>
);

30
src/Pages/TeamRevamp/partials/TeamMemberDetails/TeamMemberDetails.module.scss
View File

@@ -77,34 +77,12 @@
border-radius: 8px;
padding-bottom: 14px;
}
.remove-button {
background-color: var(--navi-color-red-base);
height: 36px;
width: 77px;
color: var(--navi-color-gray-bg-primary);
}
.cancel-button {
background: var(--navi-color-gray-bg-primary);
height: 36px;
width: 77px;
color: var(--navi-color-gray-c2);
margin-right: 12px;
border: 1px solid var(--navi-color-gray-border);
border-radius: 6px;
margin-right: 16px;
}
.team-input-wrapper {
width: 510px;
height: 36px;
margin-top: 12px;
border-radius: 0px 8px 8px 0px;
}
.footer-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 32px;
}
.input-wrapper-child {
display: flex;
}
@@ -126,10 +104,18 @@
margin-top: 11px;
padding-right: 1px;
border-radius: 8px 0px 0px 8px !important;
div {
color: var(--grayscale-2) !important;
}
:first-child {
border-radius: 8px 0px 0px 8px;
}
}
.dropdown{
div {
color: var(--grayscale-2) !important;
}
}
.no-member-present {
height: 52px;
width: 1032px;

6
src/Pages/TeamRevamp/types.ts
View File

@@ -7,7 +7,7 @@ export interface SearchInputComponentProps {
isAdmin: boolean;
}
export interface useTeamApiProps {
addMemberHandler: (emailIds: string, severityId: string) => void;
addMemberHandler: (emailIds: string, severityId: number) => void;
removeTeamMember: (memberId: string) => void;
makeManager: (memberId: string) => void;
updateDetails: (
@@ -62,7 +62,7 @@ export interface Details {
userEmail: string | undefined;
managerEmail: string | undefined;
manager: Member | undefined;
teamMembers: (Member[] | undefined)[];
teamMembers: Member[][];
teamDetails: TeamsDetail;
teamData: TeamState;
DEFAULT_TEAM_ONCALL: string;
@@ -96,7 +96,7 @@ export interface AppState {
openDialog: boolean;
openModal: boolean;
emailIds: string;
severityId: string;
severityId: number;
selectedMember?: Member;
hovered: {
ishovered: boolean;

7
src/Pages/TeamRevamp/useTeamApis.tsx
View File

@@ -24,7 +24,7 @@ const useTeamApis = (): useTeamApiProps => {
const { fireEvent } = useClickStream();
const { EVENT_NAME, SCREEN_NAME } = CLICK_STREAM_EVENT_FACTORY;
const addMemberHandler = (emailIds: string, severityId: string): void => {
const addMemberHandler = (emailIds: string, severityId: number): void => {
fireEvent(EVENT_NAME.Houston_Add_Member, {
screen_name: SCREEN_NAME.TEAM_PAGE,
});
@@ -32,10 +32,11 @@ const useTeamApis = (): useTeamApiProps => {
const finalSlackData = emailIds.includes(',')
? emailIds.split(',').map(item => item?.trim())
: [emailIds];
ApiService.post(endPoint, {
id: teamId,
members: {
severity_id: parseInt(severityId),
severity_id: severityId,
user_email_ids: finalSlackData,
},
} as AddMemberPayload)
@@ -113,7 +114,7 @@ const useTeamApis = (): useTeamApiProps => {
ApiService.post(endPoint, {
id: teamId,
slack_channel: slackChannelId,
on_call_handle: oncall,
on_call_id: oncall,
pse_on_call_id: psecOncall,
})
.then(response => {

20
src/Pages/TeamRevamp/util.ts
View File

@@ -1,6 +1,7 @@
import { useSelector } from 'react-redux';
import { TeamState, selectSearchTeamData } from '@src/slices/team1Slice';
import { Details, Member } from './types';
import { SelectPickerOptionProps } from '@navi/web-ui/lib/components/SelectPicker/types';
export const useTeamDetails = (): TeamState => {
return useSelector(selectSearchTeamData);
};
@@ -65,11 +66,28 @@ export const useGetTeamDetailsConstants = (): Details => {
};
export const isUserParticipant = (
teamMembers: (Member[] | undefined)[],
teamMembers: Member[][],
userEmail: string | undefined,
): boolean => {
return teamMembers?.some(participants =>
participants?.some(participant => participant.email == userEmail),
);
};
export const getSelectLabelOptionsForMember = (
teamMembers: Member[][],
sevType: number,
): SelectPickerOptionProps[] => {
const availableMembers = teamMembers
?.filter((member, index) => index != sevType - 1)
?.flat();
const selectPickerMemberList: SelectPickerOptionProps[] =
availableMembers?.map(member => {
return {
label: member?.name,
value: member?.email,
};
});
return selectPickerMemberList;
};
export default useGetTeamDetailsConstants;

1
src/variables.scss
View File

@@ -15,4 +15,5 @@
--grayscale-cold-1: #000f1d;
--grayscale-cold-2: #404b56;
--grayscale-cold-3: #8c9399;
--blue-blue_base: #0276FE;
}