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

package/src/components/WfoBadges/WfoHeaderBadge/WfoHeaderBadge.tsx

@@ -6,28 +6,26 @@ import { TextColor } from '@elastic/eui/src/components/text/text_color';
 import { WfoBadge } from '../WfoBadge/WfoBadge';
 
 export type HeaderBadgeProps = EuiBadgeProps & {
-    textColor: TextColor | string;
-    children?: ReactNode;
+  textColor: TextColor | string;
+  children?: ReactNode;
 };
 
-export const WfoHeaderBadge: FC<HeaderBadgeProps> = ({
-    children,
-    ...restProps
-}) => {
-    const css = restProps.iconType
-        ? {
-              height: 24,
-              display: 'flex',
-              paddingLeft: 0,
-          }
-        : {
-              height: 24,
-              display: 'flex',
-          };
+export const WfoHeaderBadge: FC<HeaderBadgeProps> = ({ children, ...restProps }) => {
+  const css =
+    restProps.iconType ?
+      {
+        height: 24,
+        display: 'flex',
+        paddingLeft: 0,
+      }
+    : {
+        height: 24,
+        display: 'flex',
+      };
 
-    return (
-        <WfoBadge {...restProps} css={css}>
-            {children}
-        </WfoBadge>
-    );
+  return (
+    <WfoBadge {...restProps} css={css}>
+      {children}
+    </WfoBadge>
+  );
 };

package/src/components/WfoBadges/WfoProcessStatusBadge/WfoProcessStatusBadge.tsx

@@ -6,69 +6,66 @@ import { ProcessStatus } from '@/types';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoProcessStatusBadgeProps = {
-    processStatus: ProcessStatus;
+  processStatus: ProcessStatus;
 };
 
-export const WfoProcessStatusBadge: FC<WfoProcessStatusBadgeProps> = ({
-    processStatus,
-}) => {
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
+export const WfoProcessStatusBadge: FC<WfoProcessStatusBadgeProps> = ({ processStatus }) => {
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
 
-    const getBadgeColorFromProcessStatus = (status: ProcessStatus) => {
-        const {
-            primary,
-            danger,
-            textDanger,
-            borderBaseSubdued,
-            textPrimary,
-            success,
-            textSuccess,
-            textParagraph,
-            warning,
-            textWarning,
-        } = theme.colors;
+  const getBadgeColorFromProcessStatus = (status: ProcessStatus) => {
+    const {
+      primary,
+      danger,
+      textDanger,
+      borderBaseSubdued,
+      textPrimary,
+      success,
+      textSuccess,
+      textParagraph,
+      warning,
+      textWarning,
+    } = theme.colors;
 
-        switch (status.toLowerCase()) {
-            case ProcessStatus.COMPLETED:
-                return {
-                    badgeColor: toSecondaryColor(success),
-                    textColor: textSuccess,
-                };
-            case ProcessStatus.FAILED:
-            case ProcessStatus.ABORTED:
-                return {
-                    badgeColor: toSecondaryColor(danger),
-                    textColor: textDanger,
-                };
-            case ProcessStatus.SUSPENDED:
-                return {
-                    badgeColor: toSecondaryColor(warning),
-                    textColor: textWarning,
-                };
-            case ProcessStatus.CREATED:
-                return {
-                    badgeColor: borderBaseSubdued,
-                    textColor: textParagraph,
-                };
-            case ProcessStatus.WAITING:
-            case ProcessStatus.RESUMED:
-            case ProcessStatus.RUNNING:
-            case ProcessStatus.API_UNAVAILABLE:
-            case ProcessStatus.INCONSISTENT_DATA:
-            default:
-                return {
-                    badgeColor: toSecondaryColor(primary),
-                    textColor: textPrimary,
-                };
-        }
-    };
+    switch (status.toLowerCase()) {
+      case ProcessStatus.COMPLETED:
+        return {
+          badgeColor: toSecondaryColor(success),
+          textColor: textSuccess,
+        };
+      case ProcessStatus.FAILED:
+      case ProcessStatus.ABORTED:
+        return {
+          badgeColor: toSecondaryColor(danger),
+          textColor: textDanger,
+        };
+      case ProcessStatus.SUSPENDED:
+        return {
+          badgeColor: toSecondaryColor(warning),
+          textColor: textWarning,
+        };
+      case ProcessStatus.CREATED:
+        return {
+          badgeColor: borderBaseSubdued,
+          textColor: textParagraph,
+        };
+      case ProcessStatus.WAITING:
+      case ProcessStatus.RESUMED:
+      case ProcessStatus.RUNNING:
+      case ProcessStatus.API_UNAVAILABLE:
+      case ProcessStatus.INCONSISTENT_DATA:
+      default:
+        return {
+          badgeColor: toSecondaryColor(primary),
+          textColor: textPrimary,
+        };
+    }
+  };
 
-    const { badgeColor, textColor } =
-        getBadgeColorFromProcessStatus(processStatus);
+  const { badgeColor, textColor } = getBadgeColorFromProcessStatus(processStatus);
 
-    return (
-        <WfoBadge textColor={textColor} color={badgeColor}>
-            {processStatus.toLowerCase()}
-        </WfoBadge>
-    );
+  return (
+    <WfoBadge textColor={textColor} color={badgeColor}>
+      {processStatus.toLowerCase()}
+    </WfoBadge>
+  );
 };

package/src/components/WfoBadges/WfoProductBlockBadge/WfoProductBlockBadge.stories.tsx

@@ -3,14 +3,14 @@ import type { Meta } from '@storybook/react';
 import { WfoProductBlockBadge } from './WfoProductBlockBadge';
 
 const Story: Meta<typeof WfoProductBlockBadge> = {
-    component: WfoProductBlockBadge,
-    title: 'Badges/WfoProductBlockBadge',
+  component: WfoProductBlockBadge,
+  title: 'Badges/WfoProductBlockBadge',
 };
 
 export default Story;
 
 export const Default = {
-    args: {
-        children: 'Product block',
-    },
+  args: {
+    children: 'Product block',
+  },
 };

package/src/components/WfoBadges/WfoProductBlockBadge/WfoProductBlockBadge.tsx

@@ -8,76 +8,70 @@ import { BadgeType } from '@/types';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoProductBlockBadgeProps = {
-    children: string;
-    link?: string;
-    badgeType: BadgeType;
+  children: string;
+  link?: string;
+  badgeType: BadgeType;
 };
 
-export function WfoProductBlockBadge({
-    children,
-    link,
-    badgeType,
-}: WfoProductBlockBadgeProps) {
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
+export function WfoProductBlockBadge({ children, link, badgeType }: WfoProductBlockBadgeProps) {
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
 
-    const getBadgeColorFromType = (badgeType: BadgeType) => {
-        const {
-            danger,
-            textDanger,
-            borderBaseSubdued,
-            primary,
-            textPrimary,
-            success,
-            textSuccess,
-            warning,
-            textWarning,
-            textParagraph,
-        } = theme.colors;
+  const getBadgeColorFromType = (badgeType: BadgeType) => {
+    const {
+      danger,
+      textDanger,
+      borderBaseSubdued,
+      primary,
+      textPrimary,
+      success,
+      textSuccess,
+      warning,
+      textWarning,
+      textParagraph,
+    } = theme.colors;
 
-        switch (badgeType) {
-            case BadgeType.RESOURCE_TYPE:
-                return {
-                    badgeColor: toSecondaryColor(success),
-                    textColor: textSuccess,
-                };
-            case BadgeType.PRODUCT_BLOCK_TAG:
-            case BadgeType.PRODUCT_BLOCK:
-                return {
-                    badgeColor: toSecondaryColor(primary),
-                    textColor: textPrimary,
-                };
-            case BadgeType.WORKFLOW:
-            case BadgeType.TASK:
-            case BadgeType.PRODUCT:
-                return {
-                    badgeColor: toSecondaryColor(danger),
-                    textColor: textDanger,
-                };
-            case BadgeType.FIXED_INPUT:
-                return {
-                    badgeColor: toSecondaryColor(warning),
-                    textColor: textWarning,
-                };
-            case BadgeType.PRODUCT_TAG:
-            default:
-                return {
-                    badgeColor: borderBaseSubdued,
-                    textColor: textParagraph,
-                };
-        }
-    };
+    switch (badgeType) {
+      case BadgeType.RESOURCE_TYPE:
+        return {
+          badgeColor: toSecondaryColor(success),
+          textColor: textSuccess,
+        };
+      case BadgeType.PRODUCT_BLOCK_TAG:
+      case BadgeType.PRODUCT_BLOCK:
+        return {
+          badgeColor: toSecondaryColor(primary),
+          textColor: textPrimary,
+        };
+      case BadgeType.WORKFLOW:
+      case BadgeType.TASK:
+      case BadgeType.PRODUCT:
+        return {
+          badgeColor: toSecondaryColor(danger),
+          textColor: textDanger,
+        };
+      case BadgeType.FIXED_INPUT:
+        return {
+          badgeColor: toSecondaryColor(warning),
+          textColor: textWarning,
+        };
+      case BadgeType.PRODUCT_TAG:
+      default:
+        return {
+          badgeColor: borderBaseSubdued,
+          textColor: textParagraph,
+        };
+    }
+  };
 
-    const { badgeColor, textColor } = getBadgeColorFromType(badgeType);
+  const { badgeColor, textColor } = getBadgeColorFromType(badgeType);
 
-    return (
-        <WfoBadge textColor={textColor} color={badgeColor}>
-            {link ? (
-                <Link css={{ color: textColor }} href={link}>
-                    {children}
-                </Link>
-            ) : (
-                children
-            )}
-        </WfoBadge>
-    );
+  return (
+    <WfoBadge textColor={textColor} color={badgeColor}>
+      {link ?
+        <Link css={{ color: textColor }} href={link}>
+          {children}
+        </Link>
+      : children}
+    </WfoBadge>
+  );
 }

package/src/components/WfoBadges/WfoProductStatusBadge/WfoProductStatusBadge.stories.tsx

@@ -4,19 +4,19 @@ import { ProductLifecycleStatus } from '../../../types';
 import { WfoProductStatusBadge } from './WfoProductStatusBadge';
 
 const Story: Meta<typeof WfoProductStatusBadge> = {
-    component: WfoProductStatusBadge,
-    title: 'Badges/WfoProductStatusBadge',
+  component: WfoProductStatusBadge,
+  title: 'Badges/WfoProductStatusBadge',
 };
 export default Story;
 
 export const Default = {
-    args: {
-        status: ProductLifecycleStatus.ACTIVE,
-    },
+  args: {
+    status: ProductLifecycleStatus.ACTIVE,
+  },
 };
 
 export const Terminated = {
-    args: {
-        status: ProductLifecycleStatus.END_OF_LIFE,
-    },
+  args: {
+    status: ProductLifecycleStatus.END_OF_LIFE,
+  },
 };

package/src/components/WfoBadges/WfoProductStatusBadge/WfoProductStatusBadge.tsx

@@ -5,49 +5,40 @@ import { ProductLifecycleStatus } from '../../../types';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoProductStatusBadgeProps = {
-    status: ProductLifecycleStatus;
+  status: ProductLifecycleStatus;
 };
 
-export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({
-    status,
-}) => {
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
-
-    const getBadgeColorFromStatus = (status: string) => {
-        const {
-            primary,
-            borderBaseSubdued,
-            textPrimary,
-            textParagraph,
-            success,
-            textSuccess,
-        } = theme.colors;
-
-        switch (status.toLowerCase()) {
-            case ProductLifecycleStatus.ACTIVE:
-                return {
-                    badgeColor: toSecondaryColor(success),
-                    textColor: textSuccess,
-                };
-            case ProductLifecycleStatus.END_OF_LIFE:
-                return {
-                    badgeColor: borderBaseSubdued,
-                    textColor: textParagraph,
-                };
-
-            default:
-                return {
-                    badgeColor: toSecondaryColor(primary),
-                    textColor: textPrimary,
-                };
-        }
-    };
-
-    const { badgeColor, textColor } = getBadgeColorFromStatus(status);
-
-    return (
-        <WfoBadge textColor={textColor} color={badgeColor}>
-            {status.toLowerCase()}
-        </WfoBadge>
-    );
+export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({ status }) => {
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
+
+  const getBadgeColorFromStatus = (status: string) => {
+    const { primary, borderBaseSubdued, textPrimary, textParagraph, success, textSuccess } = theme.colors;
+
+    switch (status.toLowerCase()) {
+      case ProductLifecycleStatus.ACTIVE:
+        return {
+          badgeColor: toSecondaryColor(success),
+          textColor: textSuccess,
+        };
+      case ProductLifecycleStatus.END_OF_LIFE:
+        return {
+          badgeColor: borderBaseSubdued,
+          textColor: textParagraph,
+        };
+
+      default:
+        return {
+          badgeColor: toSecondaryColor(primary),
+          textColor: textPrimary,
+        };
+    }
+  };
+
+  const { badgeColor, textColor } = getBadgeColorFromStatus(status);
+
+  return (
+    <WfoBadge textColor={textColor} color={badgeColor}>
+      {status.toLowerCase()}
+    </WfoBadge>
+  );
 };

package/src/components/WfoBadges/WfoScheduledTasksBadges/WfoScheduledTasksBadges.tsx

@@ -4,35 +4,25 @@ import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 
 import { WfoScheduledTaskOnce, WfoScheduledTaskRecurring } from '@/icons';
 
-const WfoWorkflowScheduleIcon = ({
-    workflowSchedule,
-}: {
-    workflowSchedule: string;
-}) => {
-    if (workflowSchedule.includes('date[')) {
-        return <WfoScheduledTaskOnce />;
-    }
-    return <WfoScheduledTaskRecurring />;
+const WfoWorkflowScheduleIcon = ({ workflowSchedule }: { workflowSchedule: string }) => {
+  if (workflowSchedule.includes('date[')) {
+    return <WfoScheduledTaskOnce />;
+  }
+  return <WfoScheduledTaskRecurring />;
 };
 
-export const WfoScheduledTasksBadges = ({
-    workflowSchedules,
-}: {
-    workflowSchedules?: string[];
-}) => {
-    return (
-        <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
-            {workflowSchedules?.map((workflowSchedule) => {
-                return (
-                    <EuiFlexItem grow={0} key={workflowSchedule}>
-                        <EuiToolTip content={workflowSchedule}>
-                            <WfoWorkflowScheduleIcon
-                                workflowSchedule={workflowSchedule}
-                            />
-                        </EuiToolTip>
-                    </EuiFlexItem>
-                );
-            })}
-        </EuiFlexGroup>
-    );
+export const WfoScheduledTasksBadges = ({ workflowSchedules }: { workflowSchedules?: string[] }) => {
+  return (
+    <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+      {workflowSchedules?.map((workflowSchedule) => {
+        return (
+          <EuiFlexItem grow={0} key={workflowSchedule}>
+            <EuiToolTip content={workflowSchedule}>
+              <WfoWorkflowScheduleIcon workflowSchedule={workflowSchedule} />
+            </EuiToolTip>
+          </EuiFlexItem>
+        );
+      })}
+    </EuiFlexGroup>
+  );
 };

package/src/components/WfoBadges/WfoScheduledTasksBadges/WfoScheduledTasksBadgesContainer.tsx

@@ -8,20 +8,19 @@ import { ScheduledTaskDefinition } from '@/types';
 import { WfoScheduledTasksBadges } from './WfoScheduledTasksBadges';
 
 export const WfoScheduledTasksBadgesContainer = ({
-    workflowId,
+  workflowId,
 }: {
-    workflowId: ScheduledTaskDefinition['workflowId'];
+  workflowId: ScheduledTaskDefinition['workflowId'];
 }) => {
-    const { workflowSchedules, isFetching, isError } =
-        useGetSchedulesForWorkflow(workflowId);
+  const { workflowSchedules, isFetching, isError } = useGetSchedulesForWorkflow(workflowId);
 
-    if (isFetching) {
-        return <WfoLoading />;
-    }
+  if (isFetching) {
+    return <WfoLoading />;
+  }
 
-    if (isError) {
-        return <WfoError />;
-    }
+  if (isError) {
+    return <WfoError />;
+  }
 
-    return <WfoScheduledTasksBadges workflowSchedules={workflowSchedules} />;
+  return <WfoScheduledTasksBadges workflowSchedules={workflowSchedules} />;
 };

package/src/components/WfoBadges/WfoSubscriptionStatusBadge/WfoSubscriptionStatusBadge.stories.tsx

@@ -3,25 +3,25 @@ import type { Meta } from '@storybook/react';
 import { WfoSubscriptionStatusBadge } from './WfoSubscriptionStatusBadge';
 
 const Story: Meta<typeof WfoSubscriptionStatusBadge> = {
-    component: WfoSubscriptionStatusBadge,
-    title: 'Badges/WfoSubscriptionStatusBadge',
+  component: WfoSubscriptionStatusBadge,
+  title: 'Badges/WfoSubscriptionStatusBadge',
 };
 export default Story;
 
 export const Default = {
-    args: {
-        status: 'default badge',
-    },
+  args: {
+    status: 'default badge',
+  },
 };
 
 export const Active = {
-    args: {
-        status: 'active',
-    },
+  args: {
+    status: 'active',
+  },
 };
 
 export const Terminated = {
-    args: {
-        status: 'terminated',
-    },
+  args: {
+    status: 'terminated',
+  },
 };

package/src/components/WfoBadges/WfoSubscriptionStatusBadge/WfoSubscriptionStatusBadge.tsx

@@ -5,50 +5,41 @@ import { SubscriptionStatus } from '../../../types';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoSubscriptionStatusBadgeProps = {
-    status?: SubscriptionStatus;
+  status?: SubscriptionStatus;
 };
 
-export const WfoSubscriptionStatusBadge: FC<
-    WfoSubscriptionStatusBadgeProps
-> = ({ status }) => {
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
-    const lowerCaseStatus = status?.toLowerCase() || '';
-
-    const getBadgeColorFromStatus = () => {
-        const {
-            primary,
-            borderBaseSubdued,
-            textParagraph,
-            textPrimary,
-            success,
-            textSuccess,
-        } = theme.colors;
-
-        switch (lowerCaseStatus) {
-            case SubscriptionStatus.ACTIVE:
-                return {
-                    badgeColor: toSecondaryColor(success),
-                    textColor: textSuccess,
-                };
-            case SubscriptionStatus.TERMINATED:
-                return {
-                    badgeColor: borderBaseSubdued,
-                    textColor: textParagraph,
-                };
-
-            default:
-                return {
-                    badgeColor: toSecondaryColor(primary),
-                    textColor: textPrimary,
-                };
-        }
-    };
-
-    const { badgeColor, textColor } = getBadgeColorFromStatus();
-
-    return (
-        <WfoBadge textColor={textColor} color={badgeColor}>
-            {lowerCaseStatus}
-        </WfoBadge>
-    );
+export const WfoSubscriptionStatusBadge: FC<WfoSubscriptionStatusBadgeProps> = ({ status }) => {
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
+  const lowerCaseStatus = status?.toLowerCase() || '';
+
+  const getBadgeColorFromStatus = () => {
+    const { primary, borderBaseSubdued, textParagraph, textPrimary, success, textSuccess } = theme.colors;
+
+    switch (lowerCaseStatus) {
+      case SubscriptionStatus.ACTIVE:
+        return {
+          badgeColor: toSecondaryColor(success),
+          textColor: textSuccess,
+        };
+      case SubscriptionStatus.TERMINATED:
+        return {
+          badgeColor: borderBaseSubdued,
+          textColor: textParagraph,
+        };
+
+      default:
+        return {
+          badgeColor: toSecondaryColor(primary),
+          textColor: textPrimary,
+        };
+    }
+  };
+
+  const { badgeColor, textColor } = getBadgeColorFromStatus();
+
+  return (
+    <WfoBadge textColor={textColor} color={badgeColor}>
+      {lowerCaseStatus}
+    </WfoBadge>
+  );
 };