Skip to content

Commit 98c1716

Browse files
Georgi2704Georgi2704
authored
Fix notes not cleared when changing pages (#1686)
* Fix notes not cleared when changing pages * Fixed some type issues, detail pages work in progress * Working build, added note detail page editor * Added changeset * Make boolean parameters non-optional
1 parent c19dacd commit 98c1716

File tree

11 files changed

+372
-90
lines changed

11 files changed

+372
-90
lines changed

‎.changeset/olive-carrots-change.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@orchestrator-ui/orchestrator-ui-components': minor
3+
---
4+
5+
Fix notes not updating when changing pages, fix cancel button resetting note to older value

‎packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoInlineNoteEdit.tsx‎

Lines changed: 70 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,37 @@ import { EuiInlineEditText } from '@elastic/eui';
55

66
import { WfoToolTip } from '@/components';
77
import { useOrchestratorTheme } from '@/hooks';
8-
import { useStartProcessMutation } from '@/rtk/endpoints/forms';
9-
import type { Subscription } from '@/types';
8+
import { INVISIBLE_CHARACTER } from '@/utils';
109

1110
interface WfoInlineNoteEditProps {
12-
value: Subscription['note'];
13-
subscriptionId?: Subscription['subscriptionId'];
11+
value: string;
1412
onlyShowOnHover?: boolean;
13+
triggerNoteModifyWorkflow?: (note: string) => void;
1514
}
1615

1716
export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
1817
value,
19-
subscriptionId,
2018
onlyShowOnHover = false,
19+
triggerNoteModifyWorkflow = () => {},
2120
}) => {
2221
const { theme } = useOrchestratorTheme();
23-
const [note, setNote] = useState<string>(value ?? '');
22+
const [note, setNote] = useState<string>(value);
2423
const [isTooltipVisible, setIsTooltipVisible] = useState<boolean>(true);
2524

26-
const [startProcess] = useStartProcessMutation();
27-
const triggerNoteModifyWorkflow = () => {
28-
const noteModifyPayload = [
29-
{ subscription_id: subscriptionId },
30-
{ note },
31-
];
32-
startProcess({
33-
workflowName: 'modify_note',
34-
userInputs: noteModifyPayload,
35-
});
36-
};
37-
3825
const handleSave = () => {
39-
triggerNoteModifyWorkflow();
26+
triggerNoteModifyWorkflow(note);
4027
setIsTooltipVisible(true);
4128
};
4229

4330
const handleCancel = () => {
44-
setNote(value ?? '');
31+
setNote(value);
4532
setIsTooltipVisible(true);
4633
};
4734

4835
// This useEffect makes sure the note is updated when a new value property is passed in
4936
// for example by a parent component that is update through a websocket event
5037
useEffect(() => {
51-
setNote(value ?? '');
38+
setNote(value);
5239
}, [value]);
5340

5441
return (
@@ -63,72 +50,79 @@ export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
6350
}}
6451
>
6552
<WfoToolTip
66-
css={{ visibility: isTooltipVisible ? 'visible' : 'hidden' }}
53+
css={{
54+
visibility:
55+
isTooltipVisible && note !== INVISIBLE_CHARACTER
56+
? 'visible'
57+
: 'hidden',
58+
}}
6759
tooltipContent={note}
6860
>
69-
<EuiInlineEditText
70-
inputAriaLabel="Edit note"
71-
value={note}
72-
onChange={(e: ChangeEvent<HTMLInputElement>) => {
73-
setNote(e.target.value);
74-
}}
75-
onCancel={handleCancel}
76-
onSave={handleSave}
77-
size={'s'}
78-
css={{
79-
width: theme.base * 16,
80-
'.euiFlexItem:nth-of-type(2)': {
81-
justifyContent: 'center',
82-
},
83-
'.euiButtonEmpty__content': {
84-
justifyContent: 'left',
85-
},
86-
}}
87-
readModeProps={{
88-
onClick: () => setIsTooltipVisible(false),
89-
title: '',
90-
css: {
91-
minWidth: '100%',
92-
'.euiIcon': {
93-
visibility: onlyShowOnHover
94-
? 'hidden'
95-
: 'visible',
61+
<span>
62+
<EuiInlineEditText
63+
inputAriaLabel="Edit note"
64+
value={note}
65+
onChange={(e: ChangeEvent<HTMLInputElement>) => {
66+
setNote(e.target.value);
67+
}}
68+
onCancel={handleCancel}
69+
onSave={handleSave}
70+
size={'s'}
71+
css={{
72+
width: theme.base * 16,
73+
'.euiFlexItem:nth-of-type(2)': {
74+
justifyContent: 'center',
9675
},
97-
},
98-
}}
99-
editModeProps={{
100-
saveButtonProps: {
101-
color: 'primary',
102-
size: 'xs',
103-
},
104-
cancelButtonProps: {
105-
color: 'danger',
106-
size: 'xs',
107-
},
108-
inputProps: {
109-
css: {
76+
'.euiButtonEmpty__content': {
11077
justifyContent: 'left',
111-
height: '32px',
112-
paddingLeft: '4px',
113-
margin: '0',
114-
width: '98%',
11578
},
116-
},
117-
formRowProps: {
79+
}}
80+
readModeProps={{
81+
onClick: () => setIsTooltipVisible(false),
82+
title: '',
11883
css: {
119-
padding: 0,
120-
margin: 0,
121-
height: '32px',
122-
'.euiFormRow__fieldWrapper': {
123-
minHeight: '32px',
84+
minWidth: '100%',
85+
'.euiIcon': {
86+
visibility: onlyShowOnHover
87+
? 'hidden'
88+
: 'visible',
89+
},
90+
},
91+
}}
92+
editModeProps={{
93+
saveButtonProps: {
94+
color: 'primary',
95+
size: 'xs',
96+
},
97+
cancelButtonProps: {
98+
color: 'danger',
99+
size: 'xs',
100+
},
101+
inputProps: {
102+
css: {
103+
justifyContent: 'left',
124104
height: '32px',
105+
paddingLeft: '4px',
106+
margin: '0',
107+
width: '98%',
108+
},
109+
},
110+
formRowProps: {
111+
css: {
125112
padding: 0,
126113
margin: 0,
114+
height: '32px',
115+
'.euiFormRow__fieldWrapper': {
116+
minHeight: '32px',
117+
height: '32px',
118+
padding: 0,
119+
margin: 0,
120+
},
127121
},
128122
},
129-
},
130-
}}
131-
/>
123+
}}
124+
/>
125+
</span>
132126
</WfoToolTip>
133127
</div>
134128
);

‎packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import type { FC } from 'react';
2+
import React from 'react';
3+
4+
import { WfoInlineNoteEdit } from '@/components';
5+
import { useGetSubscriptionDetailQuery } from '@/rtk';
6+
import { useStartProcessMutation } from '@/rtk/endpoints/forms';
7+
import { useUpdateSubscriptionDetailNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation';
8+
import { SubscriptionDetail } from '@/types';
9+
import { INVISIBLE_CHARACTER } from '@/utils';
10+
11+
interface WfoSubscriptionDetailNoteEditProps {
12+
subscriptionId: SubscriptionDetail['subscriptionId'];
13+
onlyShowOnHover?: boolean;
14+
}
15+
16+
export const WfoSubscriptionDetailNoteEdit: FC<
17+
WfoSubscriptionDetailNoteEditProps
18+
> = ({ subscriptionId, onlyShowOnHover = false }) => {
19+
const { data, endpointName } = useGetSubscriptionDetailQuery({
20+
subscriptionId,
21+
});
22+
23+
const selectedItem = data?.subscription ?? { note: '' };
24+
const [startProcess] = useStartProcessMutation();
25+
const [updateSub] = useUpdateSubscriptionDetailNoteOptimisticMutation();
26+
27+
const triggerNoteModifyWorkflow = (note: string) => {
28+
const noteModifyPayload = [
29+
{ subscription_id: subscriptionId },
30+
{ note: note === INVISIBLE_CHARACTER ? '' : note },
31+
];
32+
startProcess({
33+
workflowName: 'modify_note',
34+
userInputs: noteModifyPayload,
35+
});
36+
37+
updateSub({
38+
queryName: endpointName ?? '',
39+
subscriptionId: subscriptionId,
40+
note: note,
41+
});
42+
};
43+
44+
return (
45+
<WfoInlineNoteEdit
46+
value={
47+
selectedItem?.note?.trim()
48+
? selectedItem.note
49+
: INVISIBLE_CHARACTER
50+
}
51+
onlyShowOnHover={onlyShowOnHover}
52+
triggerNoteModifyWorkflow={triggerNoteModifyWorkflow}
53+
/>
54+
);
55+
};

‎packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import type { FC } from 'react';
2+
import React from 'react';
3+
4+
import { WfoInlineNoteEdit } from '@/components';
5+
import { ApiResult, SubscriptionListResponse, UseQuery } from '@/rtk';
6+
import { useStartProcessMutation } from '@/rtk/endpoints/forms';
7+
import { useUpdateSubscriptionNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation';
8+
import { Subscription } from '@/types';
9+
import { INVISIBLE_CHARACTER } from '@/utils';
10+
11+
interface WfoSubscriptionNoteEditProps {
12+
subscriptionId: Subscription['subscriptionId'];
13+
onlyShowOnHover?: boolean;
14+
queryVariables: Record<string, unknown>;
15+
useQuery: UseQuery<SubscriptionListResponse, Subscription>;
16+
}
17+
18+
export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
19+
subscriptionId,
20+
onlyShowOnHover = false,
21+
queryVariables,
22+
useQuery,
23+
}) => {
24+
const { selectedItem } = useQuery(queryVariables, {
25+
selectFromResult: (result: ApiResult<SubscriptionListResponse>) => ({
26+
selectedItem: result?.data?.subscriptions?.find(
27+
(sub) => sub.subscriptionId === subscriptionId,
28+
),
29+
}),
30+
});
31+
const endpointName = useQuery().endpointName;
32+
const [startProcess] = useStartProcessMutation();
33+
const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
34+
35+
const triggerNoteModifyWorkflow = (note: string) => {
36+
const noteModifyPayload = [
37+
{ subscription_id: subscriptionId },
38+
{ note: note === INVISIBLE_CHARACTER ? '' : note },
39+
];
40+
startProcess({
41+
workflowName: 'modify_note',
42+
userInputs: noteModifyPayload,
43+
});
44+
45+
updateSub({
46+
queryName: endpointName ?? '',
47+
subscriptionId: subscriptionId,
48+
graphQlQueryVariables: queryVariables,
49+
note: note,
50+
});
51+
};
52+
53+
return (
54+
<WfoInlineNoteEdit
55+
value={
56+
selectedItem?.note?.trim()
57+
? selectedItem.note
58+
: INVISIBLE_CHARACTER
59+
}
60+
onlyShowOnHover={onlyShowOnHover}
61+
triggerNoteModifyWorkflow={triggerNoteModifyWorkflow}
62+
/>
63+
);
64+
};

‎packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
export * from './WfoInlineNoteEdit';
2+
export * from './WfoSubscriptionNoteEdit';
3+
export * from './WfoSubscriptionDetailNoteEdit';

‎packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
SubscriptionKeyValueBlock,
77
WfoCustomerDescriptionsField,
88
WfoInSyncField,
9-
WfoInlineNoteEdit,
9+
WfoSubscriptionDetailNoteEdit,
1010
WfoSubscriptionStatusBadge,
1111
} from '@/components';
1212
import { SubscriptionDetail } from '@/types';
@@ -35,7 +35,6 @@ export const WfoSubscriptionDetailSection = ({
3535
status,
3636
customer,
3737
customerDescriptions,
38-
note,
3938
} = subscriptionDetail;
4039

4140
const subscriptionDetailBlockData = [
@@ -102,9 +101,9 @@ export const WfoSubscriptionDetailSection = ({
102101
{
103102
key: t('note'),
104103
value: (
105-
<WfoInlineNoteEdit
104+
<WfoSubscriptionDetailNoteEdit
106105
subscriptionId={subscriptionId}
107-
value={note}
106+
onlyShowOnHover={true}
108107
/>
109108
),
110109
},

0 commit comments

Comments
 (0)