mirror of
https://github.com/datahub-project/datahub.git
synced 2025-07-24 18:10:11 +00:00
fix(ui/incident): Add validation for custom type (#12924)
Co-authored-by: John Joyce <john@acryl.io>
This commit is contained in:
parent
0c315d2c62
commit
048bbf83c5
@ -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({
|
||||
|
@ -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
|
||||
|
@ -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}
|
||||
|
@ -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
|
||||
|
@ -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) {
|
||||
|
@ -107,7 +107,7 @@ export const IncidentList = () => {
|
||||
{showIncidentBuilder && (
|
||||
<IncidentDetailDrawer
|
||||
urn={urn}
|
||||
mode={IncidentAction.ADD}
|
||||
mode={IncidentAction.CREATE}
|
||||
onSubmit={() => {
|
||||
setTimeout(() => {
|
||||
refetch();
|
||||
|
@ -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={() => {
|
||||
|
@ -62,8 +62,8 @@ export const INCIDENT_CATEGORIES = [
|
||||
];
|
||||
|
||||
export enum IncidentAction {
|
||||
ADD = 'add',
|
||||
VIEW = 'view',
|
||||
CREATE = 'create',
|
||||
EDIT = 'edit',
|
||||
}
|
||||
|
||||
interface IncidentPriorityInterface {
|
||||
|
Loading…
x
Reference in New Issue
Block a user