fix(ui/incident): Add validation for custom type (#12924)

Co-authored-by: John Joyce <john@acryl.io>
This commit is contained in:
amit-apptware 2025-03-26 07:17:32 +05:30 committed by GitHub
parent 0c315d2c62
commit 048bbf83c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 25 additions and 19 deletions

View File

@ -21,7 +21,7 @@ type IncidentDetailDrawerProps = {
export const IncidentDetailDrawer = ({ mode, onCancel, onSubmit, incident }: IncidentDetailDrawerProps) => {
const [isEditView, setIsEditView] = useState<boolean>(false);
const showEditor = isEditView || mode === IncidentAction.ADD;
const showEditor = isEditView || mode === IncidentAction.CREATE;
const modalClosePopup = () => {
if (showEditor) {
Modal.confirm({

View File

@ -43,9 +43,9 @@ export const IncidentDrawerHeader = ({
const handleIncidentLinkCopy = useIncidentURNCopyLink(data ? data?.urn : '');
return (
<StyledHeader>
<StyledTitle>{mode === IncidentAction.ADD ? 'Create New Incident' : data?.title}</StyledTitle>
<StyledTitle>{mode === IncidentAction.CREATE ? 'Create New Incident' : data?.title}</StyledTitle>
<StyledHeaderActions>
{mode === IncidentAction.VIEW && isEditActive === false && (
{mode === IncidentAction.EDIT && isEditActive === false && (
<>
<Tooltip2 title="Edit Incident">
<EditButton

View File

@ -35,10 +35,15 @@ export const IncidentEditor = ({
onSubmit,
data,
onClose,
mode = IncidentAction.ADD,
mode = IncidentAction.CREATE,
}: IncidentEditorProps) => {
const assigneeValues = data?.assignees && getAssigneeWithURN(data.assignees);
const isFormValid = Boolean(data?.title?.length && data?.description && data?.type && data?.customType);
const isFormValid = Boolean(
data?.title?.length &&
data?.description &&
data?.type &&
(data?.type !== IncidentType.Custom || data?.customType),
);
const { user } = useUserContext();
const userHasChangedState = useRef(false);
const isFirstRender = useRef(true);
@ -47,7 +52,7 @@ export const IncidentEditor = ({
const [isLoadingAssigneeOrAssets, setIsLoadingAssigneeOrAssets] = useState(true);
const [isRequiredFieldsFilled, setIsRequiredFieldsFilled] = useState<boolean>(
mode === IncidentAction.VIEW ? !isFormValid : false,
mode === IncidentAction.EDIT ? isFormValid : false,
);
const { handleSubmit, form, isLoading } = useIncidentHandler({
@ -78,7 +83,7 @@ export const IncidentEditor = ({
// Ensure we don't override user's choice if they manually change the state
if (
mode === IncidentAction.VIEW &&
mode === IncidentAction.EDIT &&
(formValues?.status === IncidentStage.Fixed || formValues?.status === IncidentStage.NoActionRequired) &&
formValues?.state !== IncidentState.Resolved
) {
@ -105,7 +110,7 @@ export const IncidentEditor = ({
}
};
const actionButtonLabel = mode === IncidentAction.ADD ? 'Create' : 'Update';
const actionButtonLabel = mode === IncidentAction.CREATE ? 'Create' : 'Update';
const showCustomCategory = form.getFieldValue('type') === IncidentType.Custom;
const isLinkedAssetPresent = !formValues?.resourceUrns?.length;
const isSubmitButtonDisabled =
@ -146,7 +151,7 @@ export const IncidentEditor = ({
doNotFocus
className="add-incident-description"
placeholder="Provide a description..."
content={mode === IncidentAction.VIEW ? data?.description : ''}
content={mode === IncidentAction.EDIT ? data?.description : ''}
/>
</InputFormItem>
<IncidentSelectField
@ -158,7 +163,7 @@ export const IncidentEditor = ({
}
}}
form={form}
isDisabled={mode === IncidentAction.VIEW}
isDisabled={mode === IncidentAction.EDIT}
handleValuesChange={handleValuesChange}
value={formValues?.[INCIDENT_OPTION_LABEL_MAPPING.category.fieldName]}
/>
@ -171,6 +176,7 @@ export const IncidentEditor = ({
styles={{
width: '50%',
}}
isDisabled={mode === IncidentAction.EDIT}
id="custom-incident-type-input"
/>
</SelectFormItem>
@ -205,7 +211,7 @@ export const IncidentEditor = ({
setIsLinkedAssetsLoading={setIsLoadingAssigneeOrAssets}
/>
</SelectFormItem>
{mode === IncidentAction.VIEW && (
{mode === IncidentAction.EDIT && (
<IncidentSelectField
incidentLabelMap={INCIDENT_OPTION_LABEL_MAPPING.state}
options={INCIDENT_STATES}

View File

@ -63,7 +63,7 @@ export const IncidentLinkedAssetsList = ({
};
useEffect(() => {
if (mode === IncidentAction.ADD) {
if (mode === IncidentAction.CREATE) {
getEntities({
variables: {
urns: [urn],
@ -75,7 +75,7 @@ export const IncidentLinkedAssetsList = ({
useEffect(() => {
setLinkedAssets(resolvedLinkedAssets?.entities as any);
if (mode === IncidentAction.ADD) {
if (mode === IncidentAction.CREATE) {
form.setFieldValue(RESOURCE_URN_FIELD_NAME, [urn]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps

View File

@ -76,7 +76,7 @@ export const useIncidentHandler = ({ mode, onSubmit, incidentUrn, onClose, user,
const [form] = Form.useForm();
const { urn, entityType } = useEntityData();
const client = useApolloClient();
const isAddIncidentMode = mode === IncidentAction.ADD;
const isAddIncidentMode = mode === IncidentAction.CREATE;
const handleAddIncident = async (input: any) => {
return raiseIncidentMutation({
@ -146,7 +146,7 @@ export const useIncidentHandler = ({ mode, onSubmit, incidentUrn, onClose, user,
},
};
const newInput = _.omit(baseInput, ['state', 'message']);
const newUpdateInput = _.omit(newInput, ['resourceUrn', 'type']);
const newUpdateInput = _.omit(newInput, ['resourceUrn', 'type', 'customType']);
const input = !isAddIncidentMode ? newUpdateInput : newInput;
if (isAddIncidentMode) {

View File

@ -107,7 +107,7 @@ export const IncidentList = () => {
{showIncidentBuilder && (
<IncidentDetailDrawer
urn={urn}
mode={IncidentAction.ADD}
mode={IncidentAction.CREATE}
onSubmit={() => {
setTimeout(() => {
refetch();

View File

@ -136,7 +136,7 @@ export const IncidentListTable = ({ incidentData, filter, refetch }: Props) => {
{focusIncidentUrn && focusedIncidentEntity && (
<IncidentDetailDrawer
urn={focusIncidentUrn}
mode={IncidentAction.VIEW}
mode={IncidentAction.EDIT}
incident={focusIncidentData}
onCancel={() => setFocusIncidentUrn(null)}
onSubmit={() => {

View File

@ -62,8 +62,8 @@ export const INCIDENT_CATEGORIES = [
];
export enum IncidentAction {
ADD = 'add',
VIEW = 'view',
CREATE = 'create',
EDIT = 'edit',
}
interface IncidentPriorityInterface {