@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.1

package/src/components/WfoWorkflowSteps/styles.ts

@@ -2,130 +2,124 @@ import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
 
-export const getWorkflowStepsStyles = ({
-    theme,
-    toSecondaryColor,
-    isDarkModeActive,
-}: WfoThemeHelpers) => {
-    const SPACE_BETWEEN_STEPS = theme.base * 1.5;
-
-    const stepSpacerStyle = css({
-        borderLeft: `1px solid ${theme.colors.backgroundBaseAccent}`,
-        height: `${SPACE_BETWEEN_STEPS}px`,
-        marginLeft: '36px',
+export const getWorkflowStepsStyles = ({ theme, toSecondaryColor, isDarkModeActive }: WfoThemeHelpers) => {
+  const SPACE_BETWEEN_STEPS = theme.base * 1.5;
+
+  const stepSpacerStyle = css({
+    borderLeft: `1px solid ${theme.colors.backgroundBaseAccent}`,
+    height: `${SPACE_BETWEEN_STEPS}px`,
+    marginLeft: '36px',
+  });
+
+  const stepRowStyle = css({
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  });
+
+  const stepListHeaderStyle = css({
+    marginBottom: '24px',
+    marginTop: '60px',
+    alignItems: 'flex-end',
+  });
+
+  const stepListContentStyle = css({
+    flexDirection: 'row',
+    alignItems: 'center',
+  });
+
+  const stepListContentBoldTextStyle = css({
+    fontSize: theme.size.base,
+    fontWeight: theme.font.weight.bold,
+  });
+
+  const stepListContentAnchorStyle = css({
+    marginTop: 2,
+    marginLeft: 0,
+    fontSize: theme.size.m,
+    fontWeight: theme.font.weight.bold,
+    color: theme.colors.link,
+    cursor: 'pointer',
+  });
+
+  const stepListOptionsContainerStyle = css({
+    flexGrow: 0,
+  });
+
+  const stepStateIcon = {
+    height: '40px',
+    width: '40px',
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    borderRadius: '24px',
+  };
+
+  const stepDurationStyle = {
+    fontSize: theme.size.m,
+    color: theme.colors.textSubdued,
+    fontWeight: theme.font.weight.semiBold,
+  };
+
+  const stepStateSuccessIconStyle = css({
+    ...stepStateIcon,
+    backgroundColor: isDarkModeActive ? toSecondaryColor(theme.colors.link) : theme.colors.backgroundLightPrimary,
+  });
+
+  const stepStateSuspendIconStyle = css({
+    ...stepStateIcon,
+    backgroundColor: toSecondaryColor(theme.colors.warning),
+  });
+
+  const stepStatePendingIconStyle = css({
+    ...stepStateIcon,
+    backgroundColor: toSecondaryColor(theme.colors.backgroundBaseAccent),
+  });
+  const stepStateFailedIconStyle = css({
+    ...stepStateIcon,
+    backgroundColor: toSecondaryColor(theme.colors.danger),
+  });
+
+  const stepHeaderRightStyle = css({
+    alignItems: 'center',
+  });
+
+  const stepEmailContainerStyle = css({
+    paddingLeft: 24,
+    width: 600,
+    marginTop: 0,
+  });
+
+  const getStepHeaderStyle = (isClickable: boolean) =>
+    css({
+      gap: 0,
+      alignItems: 'center',
+      cursor: isClickable ? 'pointer' : 'default',
     });
 
-    const stepRowStyle = css({
-        flexGrow: 1,
-        alignItems: 'center',
-        justifyContent: 'flex-end',
+  const getStepToggleExpandStyle = (isVisible: boolean) =>
+    css({
+      marginRight: theme.base / 2,
+      visibility: isVisible ? 'visible' : 'hidden',
     });
 
-    const stepListHeaderStyle = css({
-        marginBottom: '24px',
-        marginTop: '60px',
-        alignItems: 'flex-end',
-    });
-
-    const stepListContentStyle = css({
-        flexDirection: 'row',
-        alignItems: 'center',
-    });
-
-    const stepListContentBoldTextStyle = css({
-        fontSize: theme.size.base,
-        fontWeight: theme.font.weight.bold,
-    });
-
-    const stepListContentAnchorStyle = css({
-        marginTop: 2,
-        marginLeft: 0,
-        fontSize: theme.size.m,
-        fontWeight: theme.font.weight.bold,
-        color: theme.colors.link,
-        cursor: 'pointer',
-    });
-
-    const stepListOptionsContainerStyle = css({
-        flexGrow: 0,
-    });
-
-    const stepStateIcon = {
-        height: '40px',
-        width: '40px',
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-        borderRadius: '24px',
-    };
-
-    const stepDurationStyle = {
-        fontSize: theme.size.m,
-        color: theme.colors.textSubdued,
-        fontWeight: theme.font.weight.semiBold,
-    };
-
-    const stepStateSuccessIconStyle = css({
-        ...stepStateIcon,
-        backgroundColor: isDarkModeActive
-            ? toSecondaryColor(theme.colors.link)
-            : theme.colors.backgroundLightPrimary,
-    });
-
-    const stepStateSuspendIconStyle = css({
-        ...stepStateIcon,
-        backgroundColor: toSecondaryColor(theme.colors.warning),
-    });
-
-    const stepStatePendingIconStyle = css({
-        ...stepStateIcon,
-        backgroundColor: toSecondaryColor(theme.colors.backgroundBaseAccent),
-    });
-    const stepStateFailedIconStyle = css({
-        ...stepStateIcon,
-        backgroundColor: toSecondaryColor(theme.colors.danger),
-    });
-
-    const stepHeaderRightStyle = css({
-        alignItems: 'center',
-    });
-
-    const stepEmailContainerStyle = css({
-        paddingLeft: 24,
-        width: 600,
-        marginTop: 0,
-    });
-
-    const getStepHeaderStyle = (isClickable: boolean) =>
-        css({
-            gap: 0,
-            alignItems: 'center',
-            cursor: isClickable ? 'pointer' : 'default',
-        });
-
-    const getStepToggleExpandStyle = (isVisible: boolean) =>
-        css({
-            marginRight: theme.base / 2,
-            visibility: isVisible ? 'visible' : 'hidden',
-        });
-
-    return {
-        SPACE_BETWEEN_STEPS,
-        stepDurationStyle,
-        stepEmailContainerStyle,
-        stepHeaderRightStyle,
-        stepListContentAnchorStyle,
-        stepListContentBoldTextStyle,
-        stepListContentStyle,
-        stepListHeaderStyle,
-        stepListOptionsContainerStyle,
-        stepRowStyle,
-        stepSpacerStyle,
-        stepStateFailedIconStyle,
-        stepStatePendingIconStyle,
-        stepStateSuccessIconStyle,
-        stepStateSuspendIconStyle,
-        getStepHeaderStyle,
-        getStepToggleExpandStyle,
-    };
+  return {
+    SPACE_BETWEEN_STEPS,
+    stepDurationStyle,
+    stepEmailContainerStyle,
+    stepHeaderRightStyle,
+    stepListContentAnchorStyle,
+    stepListContentBoldTextStyle,
+    stepListContentStyle,
+    stepListHeaderStyle,
+    stepListOptionsContainerStyle,
+    stepRowStyle,
+    stepSpacerStyle,
+    stepStateFailedIconStyle,
+    stepStatePendingIconStyle,
+    stepStateSuccessIconStyle,
+    stepStateSuspendIconStyle,
+    getStepHeaderStyle,
+    getStepToggleExpandStyle,
+  };
 };

package/src/components/confirmationDialog/ConfirmationDialogStyling.ts

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 
 export const confirmationDialogStyling = css`
-    .dialog-content {
-        h2 {
-            margin: 10px 0;
-            line-height: 22px;
-            font-size: 16px;
-            font-weight: normal;
-        }
+  .dialog-content {
+    h2 {
+      margin: 10px 0;
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: normal;
     }
+  }
 `;

package/src/components/confirmationDialog/WfoConfirmationDialog.tsx

@@ -17,13 +17,13 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 
 import {
-    EuiButton,
-    EuiModal,
-    EuiModalBody,
-    EuiModalFooter,
-    EuiModalHeader,
-    EuiModalHeaderTitle,
-    EuiOverlayMask,
+  EuiButton,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
 } from '@elastic/eui';
 
 import { ConfirmDialogHandler } from '@/contexts/ConfirmationDialogProvider';
@@ -31,77 +31,63 @@ import { ConfirmDialogHandler } from '@/contexts/ConfirmationDialogProvider';
 import { confirmationDialogStyling } from './ConfirmationDialogStyling';
 
 interface WfoConfirmationDialogProps {
-    isOpen?: boolean;
-    onCancel: ConfirmDialogHandler;
-    onConfirm: ConfirmDialogHandler;
-    question: string;
-    subQuestion?: string;
-    cancelButtonText?: string;
-    confirmButtonText?: string;
-    isError?: boolean;
+  isOpen?: boolean;
+  onCancel: ConfirmDialogHandler;
+  onConfirm: ConfirmDialogHandler;
+  question: string;
+  subQuestion?: string;
+  cancelButtonText?: string;
+  confirmButtonText?: string;
+  isError?: boolean;
 }
 
 export default function WfoConfirmationDialog({
-    isOpen = false,
-    onCancel,
-    onConfirm,
-    question = '',
-    subQuestion = '',
-    cancelButtonText = '',
-    confirmButtonText = '',
-    isError = false,
+  isOpen = false,
+  onCancel,
+  onConfirm,
+  question = '',
+  subQuestion = '',
+  cancelButtonText = '',
+  confirmButtonText = '',
+  isError = false,
 }: WfoConfirmationDialogProps) {
-    const t = useTranslations('confirmationDialog');
+  const t = useTranslations('confirmationDialog');
 
-    return (
-        <div className="confirmation-dialog-overlay">
-            {isOpen && (
-                <EuiOverlayMask>
-                    <EuiModal
-                        css={confirmationDialogStyling}
-                        className="confirm-modal"
-                        onClose={() => onCancel}
-                        initialFocus="[name=popfirst]"
-                    >
-                        <EuiModalHeader>
-                            <EuiModalHeaderTitle>
-                                {t('title')}
-                            </EuiModalHeaderTitle>
-                        </EuiModalHeader>
+  return (
+    <div className="confirmation-dialog-overlay">
+      {isOpen && (
+        <EuiOverlayMask>
+          <EuiModal
+            css={confirmationDialogStyling}
+            className="confirm-modal"
+            onClose={() => onCancel}
+            initialFocus="[name=popfirst]"
+          >
+            <EuiModalHeader>
+              <EuiModalHeaderTitle>{t('title')}</EuiModalHeaderTitle>
+            </EuiModalHeader>
 
-                        <EuiModalBody>
-                            <div>
-                                <section
-                                    className={`dialog-content ${
-                                        isError ? ' error' : ''
-                                    }`}
-                                >
-                                    <h2>{question}</h2>
-                                    {subQuestion && <p>{subQuestion}</p>}
-                                </section>
-                            </div>
-                        </EuiModalBody>
+            <EuiModalBody>
+              <div>
+                <section className={`dialog-content ${isError ? ' error' : ''}`}>
+                  <h2>{question}</h2>
+                  {subQuestion && <p>{subQuestion}</p>}
+                </section>
+              </div>
+            </EuiModalBody>
 
-                        <EuiModalFooter>
-                            <EuiButton
-                                onClick={onCancel}
-                                id="dialog-cancel"
-                                fill={false}
-                            >
-                                {cancelButtonText || t('cancel')}
-                            </EuiButton>
+            <EuiModalFooter>
+              <EuiButton onClick={onCancel} id="dialog-cancel" fill={false}>
+                {cancelButtonText || t('cancel')}
+              </EuiButton>
 
-                            <EuiButton
-                                onClick={onConfirm}
-                                fill
-                                id="dialog-confirm"
-                            >
-                                {confirmButtonText || t('confirm')}
-                            </EuiButton>
-                        </EuiModalFooter>
-                    </EuiModal>
-                </EuiOverlayMask>
-            )}
-        </div>
-    );
+              <EuiButton onClick={onConfirm} fill id="dialog-confirm">
+                {confirmButtonText || t('confirm')}
+              </EuiButton>
+            </EuiModalFooter>
+          </EuiModal>
+        </EuiOverlayMask>
+      )}
+    </div>
+  );
 }

package/src/configuration/constants.ts

@@ -26,10 +26,8 @@ export const IPAM_FREE_SUBNETS_ENDPOINT = `${IPAM_ENDPOINT}/free_subnets`;
 
 //subscriptions
 export const SUBSCRIPTION_ACTIONS_ENDPOINT = 'subscriptions/workflows';
-export const SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT =
-    'surf/subscriptions/dropdown-options';
-export const CUSTOMER_DESCRIPTION_ENDPOINT =
-    '/subscription_customer_descriptions';
+export const SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT = 'surf/subscriptions/dropdown-options';
+export const CUSTOMER_DESCRIPTION_ENDPOINT = '/subscription_customer_descriptions';
 
 //metadata
 export const METADATA_PRODUCT_ENDPOINT = 'products';

package/src/configuration/policy-resources.ts

@@ -1,23 +1,23 @@
 export enum PolicyResource {
-    NAVIGATION_METADATA = '/orchestrator/metadata/',
-    NAVIGATION_SETTINGS = '/orchestrator/settings/',
-    NAVIGATION_SUBSCRIPTIONS = '/orchestrator/subscriptions/',
-    NAVIGATION_TASKS = '/orchestrator/tasks/',
-    NAVIGATION_WORKFLOWS = '/orchestrator/processes/',
-    PROCESS_ABORT = '/orchestrator/processes/abort/',
-    PROCESS_DELETE = '/orchestrator/processes/delete/',
-    PROCESS_DETAILS = '/orchestrator/processes/details/',
-    PROCESS_RELATED_SUBSCRIPTIONS = '/orchestrator/subscriptions/view/from-process',
-    PROCESS_RETRY = '/orchestrator/processes/retry/',
-    PROCESS_USER_INPUT = '/orchestrator/processes/user-input/',
-    SUBSCRIPTION_CREATE = '/orchestrator/processes/create/process/menu',
-    SUBSCRIPTION_MODIFY = '/orchestrator/subscriptions/modify/',
-    SUBSCRIPTION_TERMINATE = '/orchestrator/subscriptions/terminate/',
-    SUBSCRIPTION_RECONCILE = '/orchestrator/subscriptions/reconcile/',
-    SUBSCRIPTION_VALIDATE = '/orchestrator/subscriptions/validate/',
-    TASKS_CREATE = '/orchestrator/processes/create/task',
-    TASKS_RETRY_ALL = '/orchestrator/processes/all-tasks/retry',
-    SETTINGS_FLUSH_CACHE = '/orchestrator/settings/flush-cache',
-    SETTINGS_START_STOP_ENGINE = '/orchestrator/settings/start-stop-engine',
-    SET_IN_SYNC = '/orchestrator/subscriptions/set-in-sync',
+  NAVIGATION_METADATA = '/orchestrator/metadata/',
+  NAVIGATION_SETTINGS = '/orchestrator/settings/',
+  NAVIGATION_SUBSCRIPTIONS = '/orchestrator/subscriptions/',
+  NAVIGATION_TASKS = '/orchestrator/tasks/',
+  NAVIGATION_WORKFLOWS = '/orchestrator/processes/',
+  PROCESS_ABORT = '/orchestrator/processes/abort/',
+  PROCESS_DELETE = '/orchestrator/processes/delete/',
+  PROCESS_DETAILS = '/orchestrator/processes/details/',
+  PROCESS_RELATED_SUBSCRIPTIONS = '/orchestrator/subscriptions/view/from-process',
+  PROCESS_RETRY = '/orchestrator/processes/retry/',
+  PROCESS_USER_INPUT = '/orchestrator/processes/user-input/',
+  SUBSCRIPTION_CREATE = '/orchestrator/processes/create/process/menu',
+  SUBSCRIPTION_MODIFY = '/orchestrator/subscriptions/modify/',
+  SUBSCRIPTION_TERMINATE = '/orchestrator/subscriptions/terminate/',
+  SUBSCRIPTION_RECONCILE = '/orchestrator/subscriptions/reconcile/',
+  SUBSCRIPTION_VALIDATE = '/orchestrator/subscriptions/validate/',
+  TASKS_CREATE = '/orchestrator/processes/create/task',
+  TASKS_RETRY_ALL = '/orchestrator/processes/all-tasks/retry',
+  SETTINGS_FLUSH_CACHE = '/orchestrator/settings/flush-cache',
+  SETTINGS_START_STOP_ENGINE = '/orchestrator/settings/start-stop-engine',
+  SET_IN_SYNC = '/orchestrator/subscriptions/set-in-sync',
 }

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.4.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.5.1';

package/src/contexts/ConfirmationDialogProvider.tsx

@@ -4,93 +4,75 @@ import { createContext, useState } from 'react';
 import WfoConfirmationDialog from '../components/confirmationDialog/WfoConfirmationDialog';
 
 export type ConfirmDialogHandler = (
-    e:
-        | React.KeyboardEvent<HTMLDivElement>
-        | React.MouseEvent<HTMLButtonElement, MouseEvent>
-        | undefined,
+  e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined,
 ) => void;
 
 interface ConfirmDialogState {
-    onConfirm: ConfirmDialogHandler;
-    question: string;
-    isError?: boolean;
-    subQuestion?: string;
-    cancelButtonText?: string;
-    confirmButtonText?: string;
+  onConfirm: ConfirmDialogHandler;
+  question: string;
+  isError?: boolean;
+  subQuestion?: string;
+  cancelButtonText?: string;
+  confirmButtonText?: string;
 }
 
 interface ConfirmDialogContext {
-    showConfirmDialog: (props: ConfirmDialogState) => void;
-    closeConfirmDialog: () => void;
+  showConfirmDialog: (props: ConfirmDialogState) => void;
+  closeConfirmDialog: () => void;
 }
 
 export const ConfirmationDialogContext = createContext<ConfirmDialogContext>({
-    showConfirmDialog: () => {},
-    closeConfirmDialog: () => {},
+  showConfirmDialog: () => {},
+  closeConfirmDialog: () => {},
 });
 
 export const ConfirmationDialogProvider = ConfirmationDialogContext.Provider;
 
-export function ConfirmationDialogContextWrapper({
-    children,
-}: {
-    children: ReactNode;
-}) {
-    const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
-    const [
-        {
-            onConfirm,
-            question,
-            isError,
-            subQuestion,
-            cancelButtonText,
-            confirmButtonText,
-        },
-        setState,
-    ] = useState<ConfirmDialogState>({
-        onConfirm: () => {},
-        question: '',
+export function ConfirmationDialogContextWrapper({ children }: { children: ReactNode }) {
+  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
+  const [{ onConfirm, question, isError, subQuestion, cancelButtonText, confirmButtonText }, setState] =
+    useState<ConfirmDialogState>({
+      onConfirm: () => {},
+      question: '',
     });
 
-    const closeConfirmDialog = () => setConfirmationDialogOpen(false);
+  const closeConfirmDialog = () => setConfirmationDialogOpen(false);
 
-    const showConfirmDialog = ({
-        onConfirm,
-        question,
-        isError = false,
-        subQuestion = '',
-        cancelButtonText = '',
-        confirmButtonText = '',
-    }: ConfirmDialogState) => {
-        setConfirmationDialogOpen(true);
-        setState({
-            onConfirm,
-            question,
-            isError,
-            subQuestion,
-            cancelButtonText,
-            confirmButtonText,
-        });
-    };
+  const showConfirmDialog = ({
+    onConfirm,
+    question,
+    isError = false,
+    subQuestion = '',
+    cancelButtonText = '',
+    confirmButtonText = '',
+  }: ConfirmDialogState) => {
+    setConfirmationDialogOpen(true);
+    setState({
+      onConfirm,
+      question,
+      isError,
+      subQuestion,
+      cancelButtonText,
+      confirmButtonText,
+    });
+  };
 
-    return (
-        <ConfirmationDialogProvider
-            value={{ showConfirmDialog, closeConfirmDialog }}
-        >
-            <WfoConfirmationDialog
-                isOpen={confirmationDialogOpen}
-                onCancel={() => setConfirmationDialogOpen(false)}
-                onConfirm={(e) => {
-                    onConfirm(e);
-                    setConfirmationDialogOpen(false);
-                }}
-                question={question}
-                isError={isError}
-                subQuestion={subQuestion}
-                cancelButtonText={cancelButtonText}
-                confirmButtonText={confirmButtonText}
-            />
-            {children}
-        </ConfirmationDialogProvider>
-    );
+  return (
+    <ConfirmationDialogProvider value={{ showConfirmDialog, closeConfirmDialog }}>
+      <WfoConfirmationDialog
+        isOpen={confirmationDialogOpen}
+        onCancel={() => setConfirmationDialogOpen(false)}
+        onConfirm={(e) => {
+          onConfirm(e);
+          setConfirmationDialogOpen(false);
+        }}
+        question={question}
+        isError={isError}
+        subQuestion={subQuestion}
+        cancelButtonText={cancelButtonText}
+        confirmButtonText={confirmButtonText}
+      />
+      {children}
+    </ConfirmationDialogProvider>
+  );
 }