yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-31 02:37:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datahub-web-react/src/app/entityV2/shared/tabs/Incident/AcrylComponents/IncidentDetailDrawer.tsx
View File

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

4
datahub-web-react/src/app/entityV2/shared/tabs/Incident/AcrylComponents/IncidentDrawerHeader.tsx
View File

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

22
datahub-web-react/src/app/entityV2/shared/tabs/Incident/AcrylComponents/IncidentEditor.tsx
View File

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

4
datahub-web-react/src/app/entityV2/shared/tabs/Incident/AcrylComponents/IncidentLinkedAssetsList.tsx
View File

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

4
datahub-web-react/src/app/entityV2/shared/tabs/Incident/AcrylComponents/hooks/useIncidentHandler.ts
View File

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

2
datahub-web-react/src/app/entityV2/shared/tabs/Incident/IncidentList.tsx
View File

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

2
datahub-web-react/src/app/entityV2/shared/tabs/Incident/IncidentListTable.tsx
View File

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

4
datahub-web-react/src/app/entityV2/shared/tabs/Incident/constant.ts
View File

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