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

package/src/components/WfoButtonComboBox/WfoButtonComboBox.tsx

@@ -1,79 +1,70 @@
 import React, { FC, useEffect, useState } from 'react';
 
-import {
-    EuiPopover,
-    EuiSelectable,
-    EuiSelectableOption,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
+import { EuiPopover, EuiSelectable, EuiSelectableOption, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { getWfoButtonComboBoxStyles } from '@/components/WfoButtonComboBox/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
 export type WfoStartButtonComboBoxProps = {
-    options: EuiSelectableOption[];
-    onOptionChange: (selectedOption: EuiSelectableOption) => void;
-    title?: string;
-    children: (togglePopover: () => void) => React.ReactElement;
-    className?: string;
+  options: EuiSelectableOption[];
+  onOptionChange: (selectedOption: EuiSelectableOption) => void;
+  title?: string;
+  children: (togglePopover: () => void) => React.ReactElement;
+  className?: string;
 };
 
 export const WfoButtonComboBox: FC<WfoStartButtonComboBoxProps> = ({
-    options,
-    onOptionChange,
-    title,
-    children,
-    className,
+  options,
+  onOptionChange,
+  title,
+  children,
+  className,
 }) => {
-    const [isPopoverOpen, setPopoverOpen] = useState(false);
-    const [optionsState, setOptionsState] =
-        useState<EuiSelectableOption[]>(options);
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const [optionsState, setOptionsState] = useState<EuiSelectableOption[]>(options);
 
-    const { selectableStyle, titleStyle } = useWithOrchestratorTheme(
-        getWfoButtonComboBoxStyles,
-    );
+  const { selectableStyle, titleStyle } = useWithOrchestratorTheme(getWfoButtonComboBoxStyles);
 
-    useEffect(() => {
-        if (!isPopoverOpen) {
-            setOptionsState(options);
-        }
-    }, [isPopoverOpen, options]);
+  useEffect(() => {
+    if (!isPopoverOpen) {
+      setOptionsState(options);
+    }
+  }, [isPopoverOpen, options]);
 
-    return (
-        <EuiPopover
-            initialFocus={`.euiSelectable .euiFieldSearch`}
-            button={children(() => setPopoverOpen(!isPopoverOpen))}
-            isOpen={isPopoverOpen}
-            closePopover={() => setPopoverOpen(false)}
-        >
-            {title && (
-                <>
-                    <EuiText size="s" css={titleStyle}>
-                        {title}
-                    </EuiText>
-                    <EuiSpacer size="s"></EuiSpacer>
-                </>
-            )}
-            <EuiSelectable
-                className={className}
-                css={selectableStyle}
-                options={optionsState}
-                searchable
-                onChange={(options, _, changedOption) => {
-                    onOptionChange(changedOption);
-                    setOptionsState(options);
-                }}
-                height={200}
-            >
-                {(list, search) => (
-                    <>
-                        {search}
-                        <EuiSpacer size="s" />
-                        {list}
-                    </>
-                )}
-            </EuiSelectable>
-        </EuiPopover>
-    );
+  return (
+    <EuiPopover
+      initialFocus={`.euiSelectable .euiFieldSearch`}
+      button={children(() => setPopoverOpen(!isPopoverOpen))}
+      isOpen={isPopoverOpen}
+      closePopover={() => setPopoverOpen(false)}
+    >
+      {title && (
+        <>
+          <EuiText size="s" css={titleStyle}>
+            {title}
+          </EuiText>
+          <EuiSpacer size="s"></EuiSpacer>
+        </>
+      )}
+      <EuiSelectable
+        className={className}
+        css={selectableStyle}
+        options={optionsState}
+        searchable
+        onChange={(options, _, changedOption) => {
+          onOptionChange(changedOption);
+          setOptionsState(options);
+        }}
+        height={200}
+      >
+        {(list, search) => (
+          <>
+            {search}
+            <EuiSpacer size="s" />
+            {list}
+          </>
+        )}
+      </EuiSelectable>
+    </EuiPopover>
+  );
 };

package/src/components/WfoButtonComboBox/styles.ts

@@ -3,26 +3,26 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoButtonComboBoxStyles = ({ theme }: WfoThemeHelpers) => {
-    const selectableStyle = css({
-        '.euiFieldSearch': {
-            backgroundColor: theme.colors.backgroundBasePlain,
-            color: theme.colors.textParagraph,
-            '&:focus': {
-                backgroundColor: theme.colors.backgroundBaseNeutral,
-            },
-        },
+  const selectableStyle = css({
+    '.euiFieldSearch': {
+      backgroundColor: theme.colors.backgroundBasePlain,
+      color: theme.colors.textParagraph,
+      '&:focus': {
+        backgroundColor: theme.colors.backgroundBaseNeutral,
+      },
+    },
 
-        '.euiSelectableList .euiSelectableListItem': {
-            borderColor: theme.colors.borderBaseSubdued,
-        },
-    });
+    '.euiSelectableList .euiSelectableListItem': {
+      borderColor: theme.colors.borderBaseSubdued,
+    },
+  });
 
-    const titleStyle = css({
-        fontWeight: theme.font.weight.semiBold,
-    });
+  const titleStyle = css({
+    fontWeight: theme.font.weight.semiBold,
+  });
 
-    return {
-        selectableStyle,
-        titleStyle,
-    };
+  return {
+    selectableStyle,
+    titleStyle,
+  };
 };

package/src/components/WfoButtonWithConfirm/WfoButtonWithConfirm.tsx

@@ -6,30 +6,30 @@ import type { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ConfirmationDialogContext } from '@/contexts';
 
 interface WfoButtonWithConfirmProps {
-    question: string;
-    onConfirm: () => void;
-    iconType?: EuiIconType;
-    ariaLabel?: string;
+  question: string;
+  onConfirm: () => void;
+  iconType?: EuiIconType;
+  ariaLabel?: string;
 }
 
 export const WfoButtonWithConfirm = ({
-    question,
-    onConfirm,
-    iconType = 'trash',
-    ariaLabel = 'Confirmation button',
+  question,
+  onConfirm,
+  iconType = 'trash',
+  ariaLabel = 'Confirmation button',
 }: WfoButtonWithConfirmProps) => {
-    const { showConfirmDialog } = useContext(ConfirmationDialogContext);
+  const { showConfirmDialog } = useContext(ConfirmationDialogContext);
 
-    return (
-        <EuiButtonIcon
-            iconType={iconType}
-            onClick={() => {
-                showConfirmDialog({
-                    question,
-                    onConfirm,
-                });
-            }}
-            aria-label={ariaLabel}
-        />
-    );
+  return (
+    <EuiButtonIcon
+      iconType={iconType}
+      onClick={() => {
+        showConfirmDialog({
+          question,
+          onConfirm,
+        });
+      }}
+      aria-label={ariaLabel}
+    />
+  );
 };

package/src/components/WfoContentHeader/WfoContentHeader.tsx

@@ -1,59 +1,39 @@
 import React, { FC, ReactElement } from 'react';
 
-import {
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiPageHeader,
-    EuiSpacer,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 
 import { WfoRenderElementOrString } from '@/components';
 
 export type WfoContentHeaderProps = {
-    title: ReactElement | string;
-    subtitle?: ReactElement | string;
-    children?: ReactElement | ReactElement[] | string;
+  title: ReactElement | string;
+  subtitle?: ReactElement | string;
+  children?: ReactElement | ReactElement[] | string;
 };
 
-export const WfoContentHeader: FC<WfoContentHeaderProps> = ({
-    title,
-    subtitle,
-    children,
-}) => (
-    <>
-        <EuiFlexGroup>
-            <EuiFlexItem>
-                <WfoRenderElementOrString
-                    renderString={(value) => (
-                        <EuiPageHeader pageTitle={value} />
-                    )}
-                >
-                    {title}
-                </WfoRenderElementOrString>
-                {subtitle && (
-                    <div>
-                        <EuiSpacer size="m" />
-                        <WfoRenderElementOrString>
-                            {subtitle}
-                        </WfoRenderElementOrString>
-                    </div>
-                )}
-            </EuiFlexItem>
+export const WfoContentHeader: FC<WfoContentHeaderProps> = ({ title, subtitle, children }) => (
+  <>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <WfoRenderElementOrString renderString={(value) => <EuiPageHeader pageTitle={value} />}>
+          {title}
+        </WfoRenderElementOrString>
+        {subtitle && (
+          <div>
+            <EuiSpacer size="m" />
+            <WfoRenderElementOrString>{subtitle}</WfoRenderElementOrString>
+          </div>
+        )}
+      </EuiFlexItem>
 
-            {children && (
-                <EuiFlexItem grow={0}>
-                    <EuiFlexGroup
-                        justifyContent="flexEnd"
-                        alignItems="flexStart"
-                    >
-                        <WfoRenderElementOrString>
-                            {children}
-                        </WfoRenderElementOrString>
-                    </EuiFlexGroup>
-                </EuiFlexItem>
-            )}
-        </EuiFlexGroup>
+      {children && (
+        <EuiFlexItem grow={0}>
+          <EuiFlexGroup justifyContent="flexEnd" alignItems="flexStart">
+            <WfoRenderElementOrString>{children}</WfoRenderElementOrString>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
 
-        <EuiSpacer size="l" />
-    </>
+    <EuiSpacer size="l" />
+  </>
 );

package/src/components/WfoDateTime/WfoDateTime.tsx

@@ -3,11 +3,11 @@ import React, { FC } from 'react';
 import { getDate, parseDateOrTimeRelativeToToday } from '@/utils';
 
 export type WfoDateTimeProps = {
-    dateOrIsoString: Date | string | null;
+  dateOrIsoString: Date | string | null;
 };
 
 export const WfoDateTime: FC<WfoDateTimeProps> = ({ dateOrIsoString }) => {
-    const date = getDate(dateOrIsoString);
+  const date = getDate(dateOrIsoString);
 
-    return <span>{parseDateOrTimeRelativeToToday(date)}</span>;
+  return <span>{parseDateOrTimeRelativeToToday(date)}</span>;
 };

package/src/components/WfoDiff/WfoDiff.tsx

@@ -10,13 +10,7 @@ import 'prism-themes/themes/prism-ghcolors.min.css';
 import * as refractor from 'refractor';
 import { diffLines, formatLines } from 'unidiff';
 
-import {
-    EuiButtonIcon,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { getWfoDiffStyles } from '@/components/WfoDiff/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
@@ -27,106 +21,94 @@ const SMALL_CONTEXT = 3;
 const FULL_CONTEXT = 1000000;
 
 interface DiffState {
-    type: DiffType;
-    hunks: HunkData[];
+  type: DiffType;
+  hunks: HunkData[];
 }
 
 interface WfoDiffProps {
-    oldText: string;
-    newText: string;
-    syntax?: 'javascript' | 'python';
+  oldText: string;
+  newText: string;
+  syntax?: 'javascript' | 'python';
 }
 
 const WfoDiff: FC<WfoDiffProps> = ({ oldText, newText, syntax }) => {
-    const t = useTranslations('processes.delta');
-    const [showSplit, setShowSplit] = useState(true);
-    const [showFull, setShowFull] = useState(false);
-
-    const { diffStyle } = useWithOrchestratorTheme(getWfoDiffStyles);
-
-    const [{ type, hunks }, setDiff] = useState<DiffState>({
-        type: 'modify',
-        hunks: [],
+  const t = useTranslations('processes.delta');
+  const [showSplit, setShowSplit] = useState(true);
+  const [showFull, setShowFull] = useState(false);
+
+  const { diffStyle } = useWithOrchestratorTheme(getWfoDiffStyles);
+
+  const [{ type, hunks }, setDiff] = useState<DiffState>({
+    type: 'modify',
+    hunks: [],
+  });
+  const updateDiffText = useCallback(() => {
+    const diffText = formatLines(diffLines(oldText, newText), {
+      context: showFull ? FULL_CONTEXT : SMALL_CONTEXT,
     });
-    const updateDiffText = useCallback(() => {
-        const diffText = formatLines(diffLines(oldText, newText), {
-            context: showFull ? FULL_CONTEXT : SMALL_CONTEXT,
-        });
-        const [diff] = parseDiff(diffText, { nearbySequences: 'zip' });
-        setDiff(diff);
-    }, [oldText, newText, setDiff, showFull]);
-
-    const tokens = useMemo(() => {
-        if (!hunks) {
-            return undefined;
-        }
-
-        const options = {
-            refractor,
-            highlight: !!syntax,
-            language: syntax ?? '',
-        };
-
-        try {
-            return tokenize(hunks, options);
-        } catch {
-            return undefined;
-        }
-    }, [hunks, syntax]);
-
-    useEffect(() => {
-        updateDiffText();
-    }, [updateDiffText, showFull]);
-
-    return (
-        <div>
-            <EuiFlexGroup gutterSize={'xs'}>
-                <EuiFlexItem grow={false}>
-                    <EuiText>
-                        <h3>{t('title')}</h3>
-                    </EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                        size={'s'}
-                        iconType={
-                            showSplit
-                                ? 'continuityAboveBelow'
-                                : 'continuityWithin'
-                        }
-                        onClick={() => setShowSplit(!showSplit)}
-                        aria-label={t(
-                            showSplit
-                                ? 'continuityAboveBelow'
-                                : 'continuityWithin',
-                        )}
-                    />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                        size={'s'}
-                        iconType={showFull ? 'fullScreenExit' : 'fullScreen'}
-                        onClick={() => setShowFull(!showFull)}
-                        aria-label={t(
-                            showFull ? 'fullScreenExit' : 'fullScreen',
-                        )}
-                    />
-                </EuiFlexItem>
-            </EuiFlexGroup>
-            <EuiSpacer />
-            <Diff
-                css={diffStyle}
-                viewType={showSplit ? 'split' : 'unified'}
-                diffType={type}
-                hunks={hunks || EMPTY_HUNKS}
-                tokens={tokens}
-            >
-                {(hunks) =>
-                    hunks.map((hunk) => <Hunk key={hunk.content} hunk={hunk} />)
-                }
-            </Diff>
-        </div>
-    );
+    const [diff] = parseDiff(diffText, { nearbySequences: 'zip' });
+    setDiff(diff);
+  }, [oldText, newText, setDiff, showFull]);
+
+  const tokens = useMemo(() => {
+    if (!hunks) {
+      return undefined;
+    }
+
+    const options = {
+      refractor,
+      highlight: !!syntax,
+      language: syntax ?? '',
+    };
+
+    try {
+      return tokenize(hunks, options);
+    } catch {
+      return undefined;
+    }
+  }, [hunks, syntax]);
+
+  useEffect(() => {
+    updateDiffText();
+  }, [updateDiffText, showFull]);
+
+  return (
+    <div>
+      <EuiFlexGroup gutterSize={'xs'}>
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            <h3>{t('title')}</h3>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            size={'s'}
+            iconType={showSplit ? 'continuityAboveBelow' : 'continuityWithin'}
+            onClick={() => setShowSplit(!showSplit)}
+            aria-label={t(showSplit ? 'continuityAboveBelow' : 'continuityWithin')}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            size={'s'}
+            iconType={showFull ? 'fullScreenExit' : 'fullScreen'}
+            onClick={() => setShowFull(!showFull)}
+            aria-label={t(showFull ? 'fullScreenExit' : 'fullScreen')}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <Diff
+        css={diffStyle}
+        viewType={showSplit ? 'split' : 'unified'}
+        diffType={type}
+        hunks={hunks || EMPTY_HUNKS}
+        tokens={tokens}
+      >
+        {(hunks) => hunks.map((hunk) => <Hunk key={hunk.content} hunk={hunk} />)}
+      </Diff>
+    </div>
+  );
 };
 
 export default WfoDiff;

package/src/components/WfoDiff/styles.ts

@@ -3,44 +3,37 @@ import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoDiffStyles = ({
-    theme,
-    toSecondaryColor,
-    isDarkModeActive,
-}: WfoThemeHelpers) => {
-    const SHADE_FACTOR = 0.5;
-    const TINT_FACTOR = 0.65;
+export const getWfoDiffStyles = ({ theme, toSecondaryColor, isDarkModeActive }: WfoThemeHelpers) => {
+  const SHADE_FACTOR = 0.5;
+  const TINT_FACTOR = 0.65;
 
-    const insertGutterColor = toSecondaryColor(theme.colors.success);
-    const insertCodeColor = isDarkModeActive
-        ? shade(insertGutterColor, SHADE_FACTOR)
-        : tint(insertGutterColor, TINT_FACTOR);
+  const insertGutterColor = toSecondaryColor(theme.colors.success);
+  const insertCodeColor =
+    isDarkModeActive ? shade(insertGutterColor, SHADE_FACTOR) : tint(insertGutterColor, TINT_FACTOR);
 
-    const deleteColor = toSecondaryColor(theme.colors.danger);
-    const deleteSecondaryColor = isDarkModeActive
-        ? shade(deleteColor, SHADE_FACTOR)
-        : tint(deleteColor, TINT_FACTOR);
+  const deleteColor = toSecondaryColor(theme.colors.danger);
+  const deleteSecondaryColor = isDarkModeActive ? shade(deleteColor, SHADE_FACTOR) : tint(deleteColor, TINT_FACTOR);
 
-    const diffStyle = css({
-        '.diff-code-insert': {
-            backgroundColor: insertCodeColor,
-        },
-        '.diff-gutter-insert': {
-            backgroundColor: insertGutterColor,
-        },
-        '.diff-code-delete': {
-            backgroundColor: deleteSecondaryColor,
-        },
-        '.diff-gutter-delete': {
-            backgroundColor: deleteColor,
-        },
+  const diffStyle = css({
+    '.diff-code-insert': {
+      backgroundColor: insertCodeColor,
+    },
+    '.diff-gutter-insert': {
+      backgroundColor: insertGutterColor,
+    },
+    '.diff-code-delete': {
+      backgroundColor: deleteSecondaryColor,
+    },
+    '.diff-gutter-delete': {
+      backgroundColor: deleteColor,
+    },
 
-        '.operator, .punctuation': {
-            color: theme.colors.textParagraph,
-        },
-    });
+    '.operator, .punctuation': {
+      color: theme.colors.textParagraph,
+    },
+  });
 
-    return {
-        diffStyle,
-    };
+  return {
+    diffStyle,
+  };
 };