refactor(backoffice-v2): no longer using nested details for registry …

…block (#810) Co-authored-by: Alon Peretz <Alonp99@gmail.com>
ballerine-io · Aug 10, 2023 · 25c17e9 · 25c17e9
1 parent 18f0f5f
commit 25c17e9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/apps/backoffice-v2/src/pages/Entity/components/EditableDetails/EditableDetails.tsx b/apps/backoffice-v2/src/pages/Entity/components/EditableDetails/EditableDetails.tsx
@@ -5,7 +5,7 @@ import { toStartCase } from '../../../../common/utils/to-start-case/to-start-cas
 import { camelCaseToSpace } from '../../../../common/utils/camel-case-to-space/camel-case-to-space';
 import { Input } from '../../../../common/components/atoms/Input/Input';
 import { Button, buttonVariants } from '../../../../common/components/atoms/Button/Button';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { ChangeEvent, FunctionComponent, useEffect, useState } from 'react';
 import { AnyRecord } from '../../../../common/types';
 import { IEditableDetails } from './interfaces';
 import { useUpdateWorkflowByIdMutation } from '../../../../domains/workflows/hooks/mutations/useUpdateWorkflowByIdMutation/useUpdateWorkflowByIdMutation';
@@ -21,7 +21,7 @@ import { SelectValue } from '../../../../common/components/atoms/Select/Select.V
 import { Select } from '../../../../common/components/atoms/Select/Select';
 import { useWatchDropdownOptions } from './hooks/useWatchDropdown';
 import { keyFactory } from '../../../../common/utils/key-factory/key-factory';
-import { isObject } from '@ballerine/common';
+import { isNullish, isObject } from '@ballerine/common';
 import { isValidUrl } from '../../../../common/utils/is-valid-url';
 import { JsonDialog } from '../../../../common/components/molecules/JsonDialog/JsonDialog';
 import { FileJson2 } from 'lucide-react';
@@ -128,6 +128,20 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
  >
  {formData?.map(
  ({ title, isEditable, type, format, pattern, value, valueAlias, dropdownOptions }) => {
+ const originalValue = form.watch(title);
+
+ const displayValue = (value: unknown) => {
+ if (isEditable) return originalValue;
+
+ return isNullish(value) || value === '' ? 'Unavailable' : value;
+ };
+
+ const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+ const inputValue = event.target.value;
+
+ form.setValue(title, inputValue === 'Unavailable' ? '' : inputValue);
+ };
+
  return (
  <FormField
  key={keyFactory(valueId, title, `form-field`)}
@@ -167,7 +181,7 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
  key={keyFactory(valueId, title, `form-field`)}
  className={buttonVariants({
  variant: 'link',
- className: '!block cursor-pointer !p-0',
+ className: '!block cursor-pointer !p-0 !text-blue-500',
  })}
  target={'_blank'}
  rel={'noopener noreferrer'}
@@ -229,6 +243,8 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
  pattern={pattern}
  autoComplete={'off'}
  {...field}
+ value={displayValue(originalValue)}
+ onChange={handleInputChange}
  />
  </FormControl>
  )}

diff --git a/apps/backoffice-v2/src/pages/Entity/components/Heading/Heading.tsx b/apps/backoffice-v2/src/pages/Entity/components/Heading/Heading.tsx
@@ -4,8 +4,8 @@ import { ctw } from '../../../../common/utils/ctw/ctw';
 
 export const Heading: FunctionComponent<IHeadingProps> = ({ id, value }) => (
  <h2
- className={ctw(`ml-2 mt-6 p-2 text-2xl font-bold`, {
- 'text-2xl text-slate-400': id === 'nested-details-heading',
+ className={ctw(`ml-1 mt-6 p-2 text-2xl font-bold`, {
+ 'text-2xl': id === 'nested-details-heading',
  'col-span-full': id === 'header',
  })}
  >

diff --git a/apps/backoffice-v2/src/pages/Entity/hooks/useTasks/useTasks.tsx b/apps/backoffice-v2/src/pages/Entity/hooks/useTasks/useTasks.tsx
@@ -63,17 +63,14 @@ export const useTasks = ({
  {
  id: 'nested-details-heading',
  type: 'heading',
- value: convertSnakeCaseToTitleCase(key),
+ value: 'Registry information',
  },
  {
- type: 'nestedDetails',
+ type: 'details',
  value: {
  data: Object.entries(pluginsOutput[key] ?? {})?.map(([title, value]) => ({
  title,
  value,
- // Can be part of the response or from a config in the future.
- showNull: true,
- anchorUrls: true,
  })),
  },
  },