@orchestrator-ui/orchestrator-ui-components 6.5.0 → 6.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/.turbo/turbo-build.log +8 -8
  2. package/.turbo/turbo-lint.log +3 -6
  3. package/.turbo/turbo-test.log +6 -6
  4. package/CHANGELOG.md +28 -0
  5. package/dist/index.d.ts +837 -255
  6. package/dist/index.js +2738 -2371
  7. package/dist/index.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/components/WfoAgent/WfoAgent/WfoAgent.tsx +48 -39
  10. package/src/components/WfoAvailabilityCheck/WfoAvailabilityCheck.tsx +27 -0
  11. package/src/components/WfoAvailabilityCheck/index.ts +1 -0
  12. package/src/components/WfoBackendUnavailable/WfoBackendUnavailable.tsx +109 -0
  13. package/src/components/WfoBackendUnavailable/index.ts +1 -0
  14. package/src/components/WfoInlineEdit/WfoInlineEdit.tsx +5 -1
  15. package/src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx +1 -1
  16. package/src/components/WfoLogoSpinner/WfoLogoSpinner.tsx +2 -2
  17. package/src/components/WfoMetadata/WfoMetadataDescriptionField.tsx +3 -1
  18. package/src/components/WfoPydanticForm/WfoPydanticForm.tsx +7 -1
  19. package/src/components/WfoPydanticForm/fields/WfoArrayField/WfoArrayField.tsx +15 -6
  20. package/src/components/WfoPydanticForm/fields/WfoReactSelect/styles.ts +5 -1
  21. package/src/components/WfoSearchPage/WfoSearch/WfoSearch.tsx +9 -2
  22. package/src/components/WfoSubscription/WfoCustomerDescriptionsField.tsx +1 -1
  23. package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx +138 -46
  24. package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem.tsx +27 -33
  25. package/src/components/WfoSubscription/WfoSubscriptionActions/styles.ts +3 -1
  26. package/src/components/WfoSubscription/WfoTargetTypeIcon.tsx +37 -6
  27. package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx +1 -0
  28. package/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx +1 -0
  29. package/src/components/index.ts +2 -0
  30. package/src/configuration/version.ts +1 -1
  31. package/src/hooks/index.ts +1 -0
  32. package/src/hooks/useBackendAvailability.ts +72 -0
  33. package/src/messages/en-GB.json +39 -0
  34. package/src/messages/nl-NL.json +2 -0
  35. package/src/rtk/api.ts +5 -3
  36. package/src/rtk/endpoints/availability.ts +41 -0
  37. package/src/rtk/endpoints/index.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orchestrator-ui/orchestrator-ui-components",
3
- "version": "6.5.0",
3
+ "version": "6.7.0",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Library of UI Components used to display the workflow orchestrator frontend",
6
6
  "author": {
@@ -53,7 +53,7 @@
53
53
  "next-query-params": "^5.0.0",
54
54
  "object-hash": "^3.0.0",
55
55
  "prism-themes": "^1.9.0",
56
- "pydantic-forms": "^0.9.2",
56
+ "pydantic-forms": "^0.9.4",
57
57
  "react-diff-view": "^3.2.0",
58
58
  "react-draggable": "^4.4.6",
59
59
  "react-redux": "^9.1.2",
@@ -11,7 +11,9 @@ import {
11
11
  import { CopilotSidebar } from '@copilotkit/react-ui';
12
12
  import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
13
13
 
14
+ import { WfoAvailabilityCheck } from '@/components/WfoAvailabilityCheck';
14
15
  import { WfoSearchResults } from '@/components/WfoSearchPage/WfoSearchResults';
16
+ import { useAgentAvailability } from '@/hooks/useBackendAvailability';
15
17
  import { AnySearchParameters, SearchResult } from '@/types';
16
18
 
17
19
  import { ExportButton, ExportData } from '../ExportButton';
@@ -46,6 +48,8 @@ export function WfoAgent() {
46
48
  const t = useTranslations('agent');
47
49
  const tPage = useTranslations('agent.page');
48
50
 
51
+ const agentAvailability = useAgentAvailability();
52
+
49
53
  const { state } = useCoAgent<SearchState>({
50
54
  name: 'query_agent',
51
55
  initialState,
@@ -84,44 +88,49 @@ export function WfoAgent() {
84
88
  });
85
89
 
86
90
  return (
87
- <EuiFlexGroup gutterSize="l" alignItems="stretch">
88
- <EuiFlexItem grow={2}>
89
- <EuiText>
90
- <h1>{t('title')}</h1>
91
- </EuiText>
92
-
93
- <EuiSpacer size="m" />
94
-
95
- {results_data && results_data.action === 'view_results' && (
96
- <>
97
- {results_data.message && (
98
- <>
99
- <EuiText size="s">
100
- <p>{results_data.message}</p>
101
- </EuiText>
102
- <EuiSpacer size="s" />
103
- </>
104
- )}
105
- <WfoSearchResults
106
- results={results_data.results}
107
- loading={false}
108
- selectedRecordIndex={-1}
109
- onRecordSelect={() => {}}
110
- />
111
- </>
112
- )}
113
- </EuiFlexItem>
114
-
115
- <EuiFlexItem grow={1}>
116
- <CopilotSidebar
117
- defaultOpen
118
- clickOutsideToClose={false}
119
- labels={{
120
- title: tPage('copilot.title'),
121
- initial: tPage('copilot.initial'),
122
- }}
123
- />
124
- </EuiFlexItem>
125
- </EuiFlexGroup>
91
+ <WfoAvailabilityCheck
92
+ featureType="agent"
93
+ availability={agentAvailability}
94
+ >
95
+ <EuiFlexGroup gutterSize="l" alignItems="stretch">
96
+ <EuiFlexItem grow={2}>
97
+ <EuiText>
98
+ <h1>{t('title')}</h1>
99
+ </EuiText>
100
+
101
+ <EuiSpacer size="m" />
102
+
103
+ {results_data && results_data.action === 'view_results' && (
104
+ <>
105
+ {results_data.message && (
106
+ <>
107
+ <EuiText size="s">
108
+ <p>{results_data.message}</p>
109
+ </EuiText>
110
+ <EuiSpacer size="s" />
111
+ </>
112
+ )}
113
+ <WfoSearchResults
114
+ results={results_data.results}
115
+ loading={false}
116
+ selectedRecordIndex={-1}
117
+ onRecordSelect={() => {}}
118
+ />
119
+ </>
120
+ )}
121
+ </EuiFlexItem>
122
+
123
+ <EuiFlexItem grow={1}>
124
+ <CopilotSidebar
125
+ defaultOpen
126
+ clickOutsideToClose={false}
127
+ labels={{
128
+ title: tPage('copilot.title'),
129
+ initial: tPage('copilot.initial'),
130
+ }}
131
+ />
132
+ </EuiFlexItem>
133
+ </EuiFlexGroup>
134
+ </WfoAvailabilityCheck>
126
135
  );
127
136
  }
@@ -0,0 +1,27 @@
1
+ import React, { FC, ReactNode } from 'react';
2
+
3
+ import { WfoBackendUnavailable } from '@/components/WfoBackendUnavailable';
4
+ import { BackendFeatureStatus } from '@/hooks';
5
+
6
+ interface WfoAvailabilityCheckProps {
7
+ featureType: 'search' | 'agent';
8
+ availability: BackendFeatureStatus;
9
+ children: ReactNode;
10
+ }
11
+
12
+ export const WfoAvailabilityCheck: FC<WfoAvailabilityCheckProps> = ({
13
+ featureType,
14
+ availability,
15
+ children,
16
+ }) => {
17
+ if (!availability.isLoading && !availability.isAvailable) {
18
+ return (
19
+ <WfoBackendUnavailable
20
+ featureType={featureType}
21
+ onRetry={() => window.location.reload()}
22
+ />
23
+ );
24
+ }
25
+
26
+ return <>{children}</>;
27
+ };
@@ -0,0 +1 @@
1
+ export { WfoAvailabilityCheck } from './WfoAvailabilityCheck';
@@ -0,0 +1,109 @@
1
+ import React, { FC } from 'react';
2
+
3
+ import { useTranslations } from 'next-intl';
4
+
5
+ import {
6
+ EuiButton,
7
+ EuiCallOut,
8
+ EuiCode,
9
+ EuiSpacer,
10
+ EuiText,
11
+ } from '@elastic/eui';
12
+
13
+ interface WfoBackendUnavailableProps {
14
+ featureType: 'search' | 'agent';
15
+ onRetry?: () => void;
16
+ }
17
+
18
+ export const WfoBackendUnavailable: FC<WfoBackendUnavailableProps> = ({
19
+ featureType,
20
+ onRetry,
21
+ }) => {
22
+ const t = useTranslations(`${featureType}.availability.unavailable`);
23
+
24
+ const getInstructionSteps = () => {
25
+ if (featureType === 'search') {
26
+ return [
27
+ 'setEnvironmentVariable',
28
+ 'checkVersion',
29
+ 'restartService',
30
+ 'checkDockerConfig',
31
+ ];
32
+ } else {
33
+ return [
34
+ 'setAgentEnvironment',
35
+ 'setSearchEnvironment',
36
+ 'checkVersion',
37
+ 'configureOpenAI',
38
+ 'restartService',
39
+ 'checkDockerConfig',
40
+ ];
41
+ }
42
+ };
43
+
44
+ const renderInstruction = (step: string) => {
45
+ if (step === 'setEnvironmentVariable') {
46
+ return (
47
+ <>
48
+ {t('instructions.setEnvironmentVariable.before')}
49
+ <EuiCode>SEARCH_ENABLED=True</EuiCode>
50
+ {t('instructions.setEnvironmentVariable.after')}
51
+ </>
52
+ );
53
+ } else if (step === 'setAgentEnvironment') {
54
+ return (
55
+ <>
56
+ {t('instructions.setAgentEnvironment.before')}
57
+ <EuiCode>AGENT_ENABLED=True</EuiCode>
58
+ {t('instructions.setAgentEnvironment.after')}
59
+ </>
60
+ );
61
+ } else if (step === 'setSearchEnvironment') {
62
+ return (
63
+ <>
64
+ {t('instructions.setSearchEnvironment.before')}
65
+ <EuiCode>SEARCH_ENABLED=True</EuiCode>
66
+ {t('instructions.setSearchEnvironment.after')}
67
+ </>
68
+ );
69
+ } else {
70
+ return t(`instructions.${step}`);
71
+ }
72
+ };
73
+
74
+ return (
75
+ <EuiCallOut
76
+ title={t('title')}
77
+ color="warning"
78
+ iconType="alert"
79
+ data-testid={`backend-unavailable-${featureType}`}
80
+ >
81
+ <EuiText size="s">
82
+ <ul>
83
+ {getInstructionSteps().map((step, index) => (
84
+ <li key={index}>{renderInstruction(step)}</li>
85
+ ))}
86
+ </ul>
87
+ </EuiText>
88
+
89
+ <EuiSpacer size="s" />
90
+
91
+ <EuiText size="s" color="subdued">
92
+ {t('documentation')}
93
+ </EuiText>
94
+
95
+ {onRetry && (
96
+ <>
97
+ <EuiSpacer size="m" />
98
+ <EuiButton
99
+ size="s"
100
+ onClick={onRetry}
101
+ data-testid={`retry-${featureType}-backend`}
102
+ >
103
+ {t('retryButton')}
104
+ </EuiButton>
105
+ </>
106
+ )}
107
+ </EuiCallOut>
108
+ );
109
+ };
@@ -0,0 +1 @@
1
+ export { WfoBackendUnavailable } from './WfoBackendUnavailable';
@@ -21,7 +21,11 @@ export const WfoInlineEdit: FC<WfoInlineEditProps> = ({
21
21
  const [isTooltipVisible, setIsTooltipVisible] = useState<boolean>(true);
22
22
 
23
23
  const handleSave = () => {
24
- onSave(note);
24
+ onSave(
25
+ note.startsWith(INVISIBLE_CHARACTER)
26
+ ? note.replace(INVISIBLE_CHARACTER, '')
27
+ : note,
28
+ );
25
29
  setIsTooltipVisible(true);
26
30
  };
27
31
 
@@ -28,7 +28,7 @@ export const WfoSubscriptionDetailNoteEdit: FC<
28
28
  const triggerNoteModifyWorkflow = (note: string) => {
29
29
  const noteModifyPayload = [
30
30
  { subscription_id: subscriptionId },
31
- { note: note === INVISIBLE_CHARACTER ? '' : note },
31
+ { note: note },
32
32
  ];
33
33
  startProcess({
34
34
  workflowName: 'modify_note',
@@ -18,8 +18,8 @@ export const WfoLogoSpinner: FC = () => {
18
18
  >
19
19
  <path
20
20
  css={spinPathCss}
21
- fill-rule="evenodd"
22
- clip-rule="evenodd"
21
+ fillRule="evenodd"
22
+ clipRule="evenodd"
23
23
  d="M314 128H326V144.078L346.283 151.332C369.967 159.802 392.949 170.121 415.016 182.193L437.19 194.324L457.599 173.916L466.084 182.401L444.445 204.04L447.318 212.963C458.702 248.31 474.148 282.216 493.346 314H512V326H494.455L479.094 369.434L455.768 455.642L435.097 460.957C396.477 470.887 359.666 486.806 326 508.122V512H314V507.221C278.542 479.763 236.412 462.268 191.965 456.521L177.181 471.305L168.695 462.82L182.781 448.735L178.858 430.061C170.982 392.571 155.435 357.146 133.224 326H128V314H133.231C160.297 276.391 177.89 232.762 184.46 186.82L184.848 184.112L189.665 183.666C233.34 179.627 275.674 166.567 314 145.34V128ZM202.538 445.947C242.754 452.568 280.91 468.411 314 492.245V473.428L292.129 457.339C282.687 450.394 271.901 445.495 260.459 442.955L215.509 432.977L202.538 445.947ZM208.77 422.745L192.914 438.601L190.601 427.593C182.966 391.252 168.422 356.769 147.811 326H167.27L185.783 350.958C193.014 360.707 198.054 371.902 200.557 383.779L208.77 422.745ZM226.103 422.382L263.197 430.616C276.356 433.537 288.761 439.171 299.618 447.158L314 457.738V417.444L303.215 409.851C296.575 405.176 288.932 402.121 280.9 400.931L257.731 397.499L256.799 391.686L226.103 422.382ZM254.454 377.061L219.438 412.077L212.924 381.173C210.046 367.514 204.25 354.639 195.934 343.429L183.006 326H232.601L229.611 329.619L244.302 349.711C249.156 356.351 252.367 364.047 253.669 372.169L254.454 377.061ZM267.273 381.213L268.188 386.917L282.658 389.061C292.545 390.526 301.951 394.285 310.123 400.039L314 402.769L314 334.486L267.273 381.213ZM305.515 326L264.836 366.679C262.933 358.009 259.243 349.815 253.989 342.628L244.805 330.068L248.166 326H305.515ZM334.486 314H397.264L395.224 310.835C390.692 303.805 387.582 295.956 386.069 287.731L383.296 272.646L376.608 271.878L334.486 314ZM361.679 269.835L326 305.515V249.534L334.477 256.566C342.377 263.12 351.712 267.658 361.679 269.835ZM387.442 261.044L393.491 261.739L397.872 285.56C399.1 292.244 401.627 298.621 405.309 304.333L411.542 314H445.931L438.77 304.37C430.045 292.635 424.088 279.078 421.347 264.714L415.326 233.159L387.442 261.044ZM405.876 225.638L372.221 259.294L369.403 258.97C359.378 257.818 349.905 253.774 342.139 247.331L326 233.942V192.781L348.742 206.751C357.205 211.95 366.418 215.817 376.057 218.216L405.876 225.638ZM426.131 222.354L433.762 262.345C436.146 274.835 441.325 286.624 448.913 296.829L461.681 314H479.389C461.411 283.226 446.826 250.582 435.896 216.641L434.909 213.576L426.131 222.354ZM428.349 203.166L416.305 215.21L379.11 205.952C370.728 203.865 362.717 200.503 355.357 195.982L326 177.948V156.822L342.242 162.631C365.334 170.889 387.741 180.95 409.256 192.721L428.349 203.166ZM172.88 314H147.865C170.649 280.354 186.351 242.412 194.003 202.489L210.359 218.845L199.918 262.269C197.825 270.976 194.357 279.294 189.644 286.91L172.88 314ZM222.688 214.203L202.768 194.283C241.657 189.241 279.328 177.284 314 158.982V175.227L274.426 197.566C268.264 201.044 261.689 203.732 254.855 205.567L222.688 214.203ZM212.207 265.224L220.838 229.325L257.158 265.644L253.797 288.527C252.423 297.887 248.521 306.694 242.513 314H187.743L200.392 293.56C205.811 284.803 209.799 275.237 212.207 265.224ZM233.004 224.52L268.805 260.32L279.936 258.894C288.584 257.785 296.814 254.52 303.871 249.399L314 242.047V189.741L280.639 208.572C273.553 212.572 265.991 215.663 258.132 217.773L233.004 224.52ZM265.67 290.271L267.734 276.219L305.514 314H257.168C261.531 306.759 264.433 298.697 265.67 290.271ZM279.529 271.044L314 305.515V256.874L310.919 259.11C302.235 265.414 292.105 269.432 281.461 270.796L279.529 271.044ZM326 411.217L326 334.486L381.141 389.626L327.12 412.005L326 411.217ZM334.485 326L384.831 376.346L385.892 369.943C387.512 360.156 391.386 350.88 397.207 342.847L407.079 329.224L405 326H334.485ZM326 425.458L390.325 398.811L413.149 421.634L372.676 430.61C359.487 433.535 347.056 439.185 336.18 447.198L326 454.698V425.458ZM395.266 386.781L417.889 409.403L426.993 373.721C429.987 361.985 435.155 350.914 442.229 341.083L453.081 326H419.278L421.611 329.619L406.924 349.888C402.195 356.415 399.047 363.952 397.73 371.904L395.266 386.781ZM375.412 442.949L423.745 432.23L439.062 447.547L432.109 449.335C394.715 458.95 358.965 474.008 326 494.005V470.397L343.677 457.374C353.134 450.406 363.944 445.493 375.412 442.949ZM428.281 419.796L447.764 439.278L467.629 365.861L481.726 326H468.651L452.488 348.464C446.337 357.013 441.843 366.64 439.239 376.845L428.281 419.796Z"
24
24
  fill="#76B5E0"
25
25
  />
@@ -1,5 +1,7 @@
1
1
  import React, { FC } from 'react';
2
2
 
3
+ import { INVISIBLE_CHARACTER } from '@/utils';
4
+
3
5
  import { WfoInlineEdit } from '../WfoInlineEdit';
4
6
 
5
7
  interface WfoMetadataDescriptionFieldProps {
@@ -13,7 +15,7 @@ export const WfoMetadataDescriptionField: FC<
13
15
  return (
14
16
  <div>
15
17
  <WfoInlineEdit
16
- value={description}
18
+ value={description || INVISIBLE_CHARACTER}
17
19
  onlyShowOnHover={true}
18
20
  onSave={onSave}
19
21
  />
@@ -55,6 +55,7 @@ export const useWfoPydanticFormConfig = () => {
55
55
  const componentMatcherExtender = useAppSelector(
56
56
  (state) => state.pydanticForm?.componentMatcherExtender,
57
57
  );
58
+
58
59
  const t = useTranslations('pydanticForms.userInputForm');
59
60
  const translationMessages: AbstractIntlMessages = useMessages();
60
61
 
@@ -255,6 +256,10 @@ export const WfoPydanticForm = ({
255
256
  startProcessPayload,
256
257
  isTask,
257
258
  }: WfoPydanticFormProps) => {
259
+ const generateFormId = useMemo(() => {
260
+ return `${JSON.stringify(startProcessPayload)}`;
261
+ }, [startProcessPayload]);
262
+
258
263
  const [startProcess] = useStartProcessMutation();
259
264
  const router = useRouter();
260
265
  const {
@@ -328,7 +333,7 @@ export const WfoPydanticForm = ({
328
333
  };
329
334
 
330
335
  return pydanticFormProvider;
331
- }, [isTask, startProcess, startProcessPayload]);
336
+ }, [startProcess, startProcessPayload]);
332
337
 
333
338
  const handleCancel = useCallback(() => {
334
339
  const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
@@ -365,6 +370,7 @@ export const WfoPydanticForm = ({
365
370
  return (
366
371
  <PydanticForm
367
372
  formKey={processName}
373
+ formId={generateFormId}
368
374
  onSuccess={onSuccess}
369
375
  onCancel={handleCancel}
370
376
  config={config}
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useCallback, useEffect } from 'react';
2
2
  import { useFieldArray } from 'react-hook-form';
3
3
 
4
4
  import {
@@ -81,6 +81,19 @@ export const WfoArrayField = ({
81
81
  name: arrayName,
82
82
  });
83
83
 
84
+ const appendDefault = useCallback(() => {
85
+ append({
86
+ [arrayName]: arrayItem?.default ?? undefined,
87
+ });
88
+ }, [append, arrayItem?.default, arrayName]);
89
+
90
+ useEffect(() => {
91
+ if (arrayName && arrayItem && minItems && fields) {
92
+ const missingCount = Math.max(0, minItems - fields.length);
93
+ Array.from({ length: missingCount }).forEach(() => appendDefault());
94
+ }
95
+ }, [minItems, append, remove, arrayItem, arrayName, fields, appendDefault]);
96
+
84
97
  const showMinus = (!minItems || fields.length > minItems) && !disabled;
85
98
  const showPlus = (!maxItems || fields.length < maxItems) && !disabled;
86
99
 
@@ -127,11 +140,7 @@ export const WfoArrayField = ({
127
140
 
128
141
  {showPlus && (
129
142
  <PlusButton
130
- onClick={() => {
131
- append({
132
- [arrayName]: arrayItem.default ?? undefined,
133
- });
134
- }}
143
+ onClick={appendDefault}
135
144
  testId={`${arrayName}-plus-button`}
136
145
  />
137
146
  )}
@@ -26,6 +26,10 @@ export const getWfoReactSelectStyles = (wfoTheme: WfoTheme) => {
26
26
  : theme.colors.lightestShade,
27
27
  color: theme.colors.text,
28
28
  border: `1px solid ${theme.colors.lightShade}`,
29
+ borderColor: 'none',
30
+ '&:hover': {
31
+ borderColor: 'none',
32
+ },
29
33
  };
30
34
  },
31
35
  input: (baseStyles: object) => ({
@@ -33,7 +37,7 @@ export const getWfoReactSelectStyles = (wfoTheme: WfoTheme) => {
33
37
  color: theme.colors.text,
34
38
  }),
35
39
  singleValue: (baseStyles: object, state: { isDisabled: boolean }) => {
36
- const opacity = state.isDisabled ? 0.3 : 1;
40
+ const opacity = state.isDisabled ? 0.6 : 1;
37
41
  const transition = 'opacity 300ms';
38
42
  return {
39
43
  ...baseStyles,
@@ -16,6 +16,7 @@ import {
16
16
  } from '@elastic/eui';
17
17
 
18
18
  import { WfoSubscription } from '@/components';
19
+ import { WfoAvailabilityCheck } from '@/components/WfoAvailabilityCheck';
19
20
  import { WfoBadge } from '@/components/WfoBadges';
20
21
  import {
21
22
  ENTITY_TABS,
@@ -23,6 +24,7 @@ import {
23
24
  } from '@/components/WfoSearchPage/utils';
24
25
  import { TreeProvider } from '@/contexts';
25
26
  import { useOrchestratorTheme } from '@/hooks';
27
+ import { useSearchAvailability } from '@/hooks/useBackendAvailability';
26
28
  import { useDebounce } from '@/hooks/useDebounce';
27
29
  import { useSearch } from '@/hooks/useSearch';
28
30
  import { useSearchPagination } from '@/hooks/useSearchPagination';
@@ -43,6 +45,8 @@ import {
43
45
  export const WfoSearch = () => {
44
46
  const t = useTranslations('search.page');
45
47
  const { theme } = useOrchestratorTheme();
48
+ const searchAvailability = useSearchAvailability();
49
+
46
50
  const {
47
51
  urlParams,
48
52
  query,
@@ -202,7 +206,10 @@ export const WfoSearch = () => {
202
206
  const { RESULTS_GROW, DETAIL_GROW } = LAYOUT_RATIOS;
203
207
 
204
208
  return (
205
- <>
209
+ <WfoAvailabilityCheck
210
+ featureType="search"
211
+ availability={searchAvailability}
212
+ >
206
213
  <EuiTabs>
207
214
  {ENTITY_TABS.map((tab) => (
208
215
  <EuiTab
@@ -442,6 +449,6 @@ export const WfoSearch = () => {
442
449
  </EuiFlexGroup>
443
450
  </>
444
451
  )}
445
- </>
452
+ </WfoAvailabilityCheck>
446
453
  );
447
454
  };
@@ -70,7 +70,7 @@ export const WfoCustomerDescriptionsField: FC<
70
70
  {fullname ?? customerId} {`${shortcode ?? customerId}`}:
71
71
  </div>
72
72
  <WfoInlineEdit
73
- value={description}
73
+ value={description || INVISIBLE_CHARACTER}
74
74
  onSave={(value) =>
75
75
  updateCustomerDescription({
76
76
  id: id,