@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

package/src/components/WfoInlineEdit/WfoInlineEdit.tsx

@@ -7,126 +7,113 @@ import { WfoToolTip } from '@/components';
 import { INVISIBLE_CHARACTER } from '@/utils';
 
 interface WfoInlineEditProps {
-    value: string;
-    onlyShowOnHover?: boolean;
-    onSave?: (note: string) => void;
+  value: string;
+  onlyShowOnHover?: boolean;
+  onSave?: (note: string) => void;
 }
 
-export const WfoInlineEdit: FC<WfoInlineEditProps> = ({
-    value,
-    onlyShowOnHover = false,
-    onSave = () => {},
-}) => {
-    const [note, setValue] = useState<string>(value);
-    const [isTooltipVisible, setIsTooltipVisible] = useState<boolean>(true);
+export const WfoInlineEdit: FC<WfoInlineEditProps> = ({ value, onlyShowOnHover = false, onSave = () => {} }) => {
+  const [note, setValue] = useState<string>(value);
+  const [isTooltipVisible, setIsTooltipVisible] = useState<boolean>(true);
 
-    const handleSave = () => {
-        onSave(
-            note.startsWith(INVISIBLE_CHARACTER)
-                ? note.replace(INVISIBLE_CHARACTER, '')
-                : note,
-        );
-        setIsTooltipVisible(true);
-    };
+  const handleSave = () => {
+    onSave(note.startsWith(INVISIBLE_CHARACTER) ? note.replace(INVISIBLE_CHARACTER, '') : note);
+    setIsTooltipVisible(true);
+  };
 
-    const handleCancel = () => {
-        setValue(value);
-        setIsTooltipVisible(true);
-    };
+  const handleCancel = () => {
+    setValue(value);
+    setIsTooltipVisible(true);
+  };
 
-    // This useEffect makes sure the note is updated when a new value property is passed in
-    // for example by a parent component that is update through a websocket event
-    useEffect(() => {
-        setValue(value);
-    }, [value]);
+  // This useEffect makes sure the note is updated when a new value property is passed in
+  // for example by a parent component that is update through a websocket event
+  useEffect(() => {
+    setValue(value);
+  }, [value]);
 
-    return (
-        <div
+  return (
+    <div
+      css={{
+        width: '100%',
+        ':hover': {
+          '.euiIcon': {
+            visibility: 'visible',
+          },
+        },
+        '& > .euiToolTipAnchor': {
+          width: '100%',
+        },
+      }}
+    >
+      <WfoToolTip
+        css={{
+          visibility: isTooltipVisible && note !== INVISIBLE_CHARACTER ? 'visible' : 'hidden',
+        }}
+        tooltipContent={note}
+      >
+        <span>
+          <EuiInlineEditText
+            inputAriaLabel="Edit field"
+            value={note}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              setValue(e.target.value);
+            }}
+            onCancel={handleCancel}
+            onSave={handleSave}
+            size={'s'}
             css={{
-                width: '100%',
-                ':hover': {
-                    '.euiIcon': {
-                        visibility: 'visible',
-                    },
+              '.euiFlexItem:nth-of-type(2)': {
+                justifyContent: 'center',
+              },
+              '.euiButtonEmpty__content': {
+                justifyContent: 'left',
+              },
+            }}
+            readModeProps={{
+              onClick: () => setIsTooltipVisible(false),
+              title: '',
+              css: {
+                minWidth: '100%',
+                '.euiIcon': {
+                  visibility: onlyShowOnHover ? 'hidden' : 'visible',
+                },
+              },
+            }}
+            editModeProps={{
+              saveButtonProps: {
+                color: 'primary',
+                size: 'xs',
+              },
+              cancelButtonProps: {
+                color: 'danger',
+                size: 'xs',
+              },
+              inputProps: {
+                css: {
+                  justifyContent: 'left',
+                  height: '32px',
+                  paddingLeft: '4px',
+                  margin: '0',
                 },
-                '& > .euiToolTipAnchor': {
-                    width: '100%',
+              },
+              formRowProps: {
+                css: {
+                  padding: 0,
+                  margin: 0,
+                  height: '32px',
+                  '.euiFormRow__fieldWrapper': {
+                    minHeight: '32px',
+                    height: '32px',
+                    padding: 0,
+                    margin: 0,
+                  },
                 },
+              },
             }}
-        >
-            <WfoToolTip
-                css={{
-                    visibility:
-                        isTooltipVisible && note !== INVISIBLE_CHARACTER
-                            ? 'visible'
-                            : 'hidden',
-                }}
-                tooltipContent={note}
-            >
-                <span>
-                    <EuiInlineEditText
-                        inputAriaLabel="Edit field"
-                        value={note}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                            setValue(e.target.value);
-                        }}
-                        onCancel={handleCancel}
-                        onSave={handleSave}
-                        size={'s'}
-                        css={{
-                            '.euiFlexItem:nth-of-type(2)': {
-                                justifyContent: 'center',
-                            },
-                            '.euiButtonEmpty__content': {
-                                justifyContent: 'left',
-                            },
-                        }}
-                        readModeProps={{
-                            onClick: () => setIsTooltipVisible(false),
-                            title: '',
-                            css: {
-                                minWidth: '100%',
-                                '.euiIcon': {
-                                    visibility: onlyShowOnHover
-                                        ? 'hidden'
-                                        : 'visible',
-                                },
-                            },
-                        }}
-                        editModeProps={{
-                            saveButtonProps: {
-                                color: 'primary',
-                                size: 'xs',
-                            },
-                            cancelButtonProps: {
-                                color: 'danger',
-                                size: 'xs',
-                            },
-                            inputProps: {
-                                css: {
-                                    justifyContent: 'left',
-                                    height: '32px',
-                                    paddingLeft: '4px',
-                                    margin: '0',
-                                },
-                            },
-                            formRowProps: {
-                                css: {
-                                    padding: 0,
-                                    margin: 0,
-                                    height: '32px',
-                                    '.euiFormRow__fieldWrapper': {
-                                        minHeight: '32px',
-                                        height: '32px',
-                                        padding: 0,
-                                        margin: 0,
-                                    },
-                                },
-                            },
-                        }}
-                    />
-                </span>
-            </WfoToolTip>
-        </div>
-    );
+          />
+        </span>
+      </WfoToolTip>
+    </div>
+  );
 };

package/src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx

@@ -10,47 +10,41 @@ import { INVISIBLE_CHARACTER } from '@/utils';
 import { WfoInlineEdit } from '../WfoInlineEdit';
 
 interface WfoSubscriptionDetailNoteEditProps {
-    subscriptionId: SubscriptionDetail['subscriptionId'];
-    onlyShowOnHover?: boolean;
+  subscriptionId: SubscriptionDetail['subscriptionId'];
+  onlyShowOnHover?: boolean;
 }
 
-export const WfoSubscriptionDetailNoteEdit: FC<
-    WfoSubscriptionDetailNoteEditProps
-> = ({ subscriptionId, onlyShowOnHover = false }) => {
-    const { data, endpointName } = useGetSubscriptionDetailQuery({
-        subscriptionId,
+export const WfoSubscriptionDetailNoteEdit: FC<WfoSubscriptionDetailNoteEditProps> = ({
+  subscriptionId,
+  onlyShowOnHover = false,
+}) => {
+  const { data, endpointName } = useGetSubscriptionDetailQuery({
+    subscriptionId,
+  });
+
+  const selectedItem = data?.subscription ?? { note: '' };
+  const [startProcess] = useStartProcessMutation();
+  const [updateSub] = useUpdateSubscriptionDetailNoteOptimisticMutation();
+
+  const triggerNoteModifyWorkflow = (note: string) => {
+    const noteModifyPayload = [{ subscription_id: subscriptionId }, { note: note }];
+    startProcess({
+      workflowName: 'modify_note',
+      userInputs: noteModifyPayload,
     });
 
-    const selectedItem = data?.subscription ?? { note: '' };
-    const [startProcess] = useStartProcessMutation();
-    const [updateSub] = useUpdateSubscriptionDetailNoteOptimisticMutation();
-
-    const triggerNoteModifyWorkflow = (note: string) => {
-        const noteModifyPayload = [
-            { subscription_id: subscriptionId },
-            { note: note },
-        ];
-        startProcess({
-            workflowName: 'modify_note',
-            userInputs: noteModifyPayload,
-        });
-
-        updateSub({
-            queryName: endpointName ?? '',
-            subscriptionId: subscriptionId,
-            note: note,
-        });
-    };
-
-    return (
-        <WfoInlineEdit
-            value={
-                selectedItem?.note?.trim()
-                    ? selectedItem.note
-                    : INVISIBLE_CHARACTER
-            }
-            onlyShowOnHover={onlyShowOnHover}
-            onSave={triggerNoteModifyWorkflow}
-        />
-    );
+    updateSub({
+      queryName: endpointName ?? '',
+      subscriptionId: subscriptionId,
+      note: note,
+    });
+  };
+
+  return (
+    <WfoInlineEdit
+      value={selectedItem?.note?.trim() ? selectedItem.note : INVISIBLE_CHARACTER}
+      onlyShowOnHover={onlyShowOnHover}
+      onSave={triggerNoteModifyWorkflow}
+    />
+  );
 };

package/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx

@@ -7,46 +7,43 @@ import { useUpdateSubscriptionNoteOptimisticMutation } from '@/rtk/endpoints/sub
 import { INVISIBLE_CHARACTER } from '@/utils';
 
 interface WfoSubscriptionNoteEditProps {
-    onlyShowOnHover?: boolean;
-    queryVariables: Record<string, unknown>;
-    endpointName: string | undefined;
-    subscriptionId: string;
-    note: string | null;
+  onlyShowOnHover?: boolean;
+  queryVariables: Record<string, unknown>;
+  endpointName: string | undefined;
+  subscriptionId: string;
+  note: string | null;
 }
 
 export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
-    onlyShowOnHover = false,
-    queryVariables,
-    endpointName,
-    subscriptionId,
-    note,
+  onlyShowOnHover = false,
+  queryVariables,
+  endpointName,
+  subscriptionId,
+  note,
 }) => {
-    const [startProcess] = useStartProcessMutation();
-    const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
+  const [startProcess] = useStartProcessMutation();
+  const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
 
-    const triggerNoteModifyWorkflow = (note: string) => {
-        const noteModifyPayload = [
-            { subscription_id: subscriptionId },
-            { note: note === INVISIBLE_CHARACTER ? '' : note },
-        ];
-        startProcess({
-            workflowName: 'modify_note',
-            userInputs: noteModifyPayload,
-        });
+  const triggerNoteModifyWorkflow = (note: string) => {
+    const noteModifyPayload = [{ subscription_id: subscriptionId }, { note: note === INVISIBLE_CHARACTER ? '' : note }];
+    startProcess({
+      workflowName: 'modify_note',
+      userInputs: noteModifyPayload,
+    });
 
-        updateSub({
-            queryName: endpointName ?? '',
-            subscriptionId: subscriptionId,
-            graphQlQueryVariables: queryVariables,
-            note: note,
-        });
-    };
+    updateSub({
+      queryName: endpointName ?? '',
+      subscriptionId: subscriptionId,
+      graphQlQueryVariables: queryVariables,
+      note: note,
+    });
+  };
 
-    return (
-        <WfoInlineEdit
-            value={note?.trim() ? note : INVISIBLE_CHARACTER}
-            onlyShowOnHover={onlyShowOnHover}
-            onSave={triggerNoteModifyWorkflow}
-        />
-    );
+  return (
+    <WfoInlineEdit
+      value={note?.trim() ? note : INVISIBLE_CHARACTER}
+      onlyShowOnHover={onlyShowOnHover}
+      onSave={triggerNoteModifyWorkflow}
+    />
+  );
 };

package/src/components/WfoInsyncIcon/WfoInsyncIcon.stories.tsx

@@ -3,19 +3,19 @@ import type { Meta } from '@storybook/react';
 import { WfoInsyncIcon } from './WfoInsyncIcon';
 
 const Story: Meta<typeof WfoInsyncIcon> = {
-    component: WfoInsyncIcon,
-    title: 'WfoInsyncIcon',
+  component: WfoInsyncIcon,
+  title: 'WfoInsyncIcon',
 };
 export default Story;
 
 export const Default = {
-    args: {
-        inSync: true,
-    },
+  args: {
+    inSync: true,
+  },
 };
 
 export const DefaultOutofSync = {
-    args: {
-        inSync: false,
-    },
+  args: {
+    inSync: false,
+  },
 };

package/src/components/WfoInsyncIcon/WfoInsyncIcon.tsx

@@ -4,23 +4,13 @@ import { useOrchestratorTheme } from '@/hooks';
 import { WfoCheckmarkCircleFill, WfoMinusCircleFill } from '@/icons';
 
 interface WfoInsyncIconProps {
-    inSync: boolean;
+  inSync: boolean;
 }
 
 export const WfoInsyncIcon = ({ inSync }: WfoInsyncIconProps) => {
-    const { theme } = useOrchestratorTheme();
+  const { theme } = useOrchestratorTheme();
 
-    return inSync ? (
-        <WfoCheckmarkCircleFill
-            height={20}
-            width={20}
-            color={theme.colors.primary}
-        />
-    ) : (
-        <WfoMinusCircleFill
-            height={20}
-            width={20}
-            color={theme.colors.danger}
-        />
-    );
+  return inSync ?
+      <WfoCheckmarkCircleFill height={20} width={20} color={theme.colors.primary} />
+    : <WfoMinusCircleFill height={20} width={20} color={theme.colors.danger} />;
 };

package/src/components/WfoJsonCodeBlock/WfoJsonCodeBlock.tsx

@@ -7,8 +7,8 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { getStyles } from './styles';
 
 export type WfoJsonCodeBlockProps = {
-    data: object;
-    isBasicStyle?: boolean;
+  data: object;
+  isBasicStyle?: boolean;
 };
 
 /**
@@ -17,23 +17,19 @@ export type WfoJsonCodeBlockProps = {
  * @param isBasicStyle Basic style is a minimalistic style of the code block. It has no paddings and line numbers
  * @constructor
  */
-export const WfoJsonCodeBlock: FC<WfoJsonCodeBlockProps> = ({
-    data,
-    isBasicStyle = false,
-}) => {
-    const { euiCodeBlockStyle, euiBasicCodeBlockStyle } =
-        useWithOrchestratorTheme(getStyles);
+export const WfoJsonCodeBlock: FC<WfoJsonCodeBlockProps> = ({ data, isBasicStyle = false }) => {
+  const { euiCodeBlockStyle, euiBasicCodeBlockStyle } = useWithOrchestratorTheme(getStyles);
 
-    const json = JSON.stringify(data, null, 4);
+  const json = JSON.stringify(data, null, 4);
 
-    return (
-        <EuiCodeBlock
-            css={isBasicStyle ? euiBasicCodeBlockStyle : euiCodeBlockStyle}
-            isCopyable={true}
-            language="json"
-            lineNumbers={!isBasicStyle}
-        >
-            {json}
-        </EuiCodeBlock>
-    );
+  return (
+    <EuiCodeBlock
+      css={isBasicStyle ? euiBasicCodeBlockStyle : euiCodeBlockStyle}
+      isCopyable={true}
+      language="json"
+      lineNumbers={!isBasicStyle}
+    >
+      {json}
+    </EuiCodeBlock>
+  );
 };

package/src/components/WfoJsonCodeBlock/styles.ts

@@ -3,25 +3,25 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoThemeHelpers) => {
-    const euiCodeBlockStyle = css({
-        marginTop: 10,
-        borderRadius: theme.border.radius.medium,
-    });
+  const euiCodeBlockStyle = css({
+    marginTop: 10,
+    borderRadius: theme.border.radius.medium,
+  });
 
-    const euiBasicCodeBlockStyle = css({
-        backgroundColor: 'inherit',
-        '.euiCodeBlock__pre': {
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingLeft: 0,
-        },
-        '.euiCodeBlock__controls': {
-            backgroundColor: 'inherit',
-        },
-    });
+  const euiBasicCodeBlockStyle = css({
+    backgroundColor: 'inherit',
+    '.euiCodeBlock__pre': {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+    },
+    '.euiCodeBlock__controls': {
+      backgroundColor: 'inherit',
+    },
+  });
 
-    return {
-        euiCodeBlockStyle,
-        euiBasicCodeBlockStyle,
-    };
+  return {
+    euiCodeBlockStyle,
+    euiBasicCodeBlockStyle,
+  };
 };

package/src/components/WfoKeyValueTable/WfoKeyCell.tsx

@@ -7,19 +7,18 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { getStyles } from './styles';
 
 export type WfoKeyCellProps = {
-    value: string;
-    rowNumber: number;
+  value: string;
+  rowNumber: number;
 };
 
 export const WfoKeyCell: FC<WfoKeyCellProps> = ({ value, rowNumber }) => {
-    const { keyColumnStyle, keyCellStyle, getBackgroundColorStyleForRow } =
-        useWithOrchestratorTheme(getStyles);
+  const { keyColumnStyle, keyCellStyle, getBackgroundColorStyleForRow } = useWithOrchestratorTheme(getStyles);
 
-    return (
-        <div css={[getBackgroundColorStyleForRow(rowNumber), keyColumnStyle]}>
-            <EuiText css={keyCellStyle} size="s">
-                {value}
-            </EuiText>
-        </div>
-    );
+  return (
+    <div css={[getBackgroundColorStyleForRow(rowNumber), keyColumnStyle]}>
+      <EuiText css={keyCellStyle} size="s">
+        {value}
+      </EuiText>
+    </div>
+  );
 };

package/src/components/WfoKeyValueTable/WfoKeyValueTable.tsx

@@ -7,35 +7,32 @@ import { WfoValueCell } from './WfoValueCell';
 import { getStyles } from './styles';
 
 export type WfoKeyValueTableDataType = {
-    key: string;
-    value: ReactNode;
-    textToCopy?: string;
+  key: string;
+  value: ReactNode;
+  textToCopy?: string;
 };
 
 export type WfoKeyValueTableProps = {
-    keyValues: WfoKeyValueTableDataType[];
-    showCopyToClipboardIcon?: boolean;
+  keyValues: WfoKeyValueTableDataType[];
+  showCopyToClipboardIcon?: boolean;
 };
 
-export const WfoKeyValueTable: FC<WfoKeyValueTableProps> = ({
-    keyValues,
-    showCopyToClipboardIcon = false,
-}) => {
-    const { keyValueTable } = useWithOrchestratorTheme(getStyles);
+export const WfoKeyValueTable: FC<WfoKeyValueTableProps> = ({ keyValues, showCopyToClipboardIcon = false }) => {
+  const { keyValueTable } = useWithOrchestratorTheme(getStyles);
 
-    return (
-        <div css={keyValueTable}>
-            {keyValues.map(({ key, value, textToCopy }, rowNumber) => (
-                <Fragment key={key}>
-                    <WfoKeyCell value={key} rowNumber={rowNumber} />
-                    <WfoValueCell
-                        value={value}
-                        textToCopy={textToCopy}
-                        rowNumber={rowNumber}
-                        enableCopyIcon={showCopyToClipboardIcon}
-                    />
-                </Fragment>
-            ))}
-        </div>
-    );
+  return (
+    <div css={keyValueTable}>
+      {keyValues.map(({ key, value, textToCopy }, rowNumber) => (
+        <Fragment key={key}>
+          <WfoKeyCell value={key} rowNumber={rowNumber} />
+          <WfoValueCell
+            value={value}
+            textToCopy={textToCopy}
+            rowNumber={rowNumber}
+            enableCopyIcon={showCopyToClipboardIcon}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
 };