@orchestrator-ui/orchestrator-ui-components 8.4.5 → 8.6.0

package/src/components/WfoTable/WfoStructuredSearchTable/styles.ts

@@ -0,0 +1,182 @@
+import { css } from '@emotion/react';
+
+import { WfoThemeHelpers } from '@/hooks';
+
+export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) => {
+  const queryBuilderContainerStyles = css({
+    backgroundColor: theme.colors.backgroundBaseSubdued,
+    padding: theme.base / 2,
+    marginBottom: theme.base,
+    border: `thin solid ${theme.colors.borderBasePlain}`,
+    borderRadius: theme.border.radius.small,
+  });
+  const toggleButtonStyles = css({
+    backgroundColor: 'primary',
+    padding: theme.base * 0.75,
+  });
+
+  const buttonGroupStyles = css({
+    alignSelf: 'center',
+    backgroundColor: 'transparent',
+    height: theme.base * 2,
+    '.euiButtonGroup__buttons': {
+      backgroundColor: 'transparent',
+      height: theme.base * 2,
+      minHeight: theme.base * 2,
+    },
+    'button.euiButtonGroupButton': {
+      height: theme.base * 2,
+      minHeight: theme.base * 2,
+      blockSize: theme.base * 2,
+      borderRadius: 0,
+      transition: 'none',
+    },
+    'button.euiButtonGroupButton:not(.euiButtonGroupButton-isSelected)': {
+      backgroundColor: theme.colors.backgroundBasePlain,
+    },
+    'button.euiButtonGroupButton:first-of-type': {
+      borderTopLeftRadius: theme.base,
+      borderBottomLeftRadius: theme.base,
+    },
+    'button.euiButtonGroupButton:last-of-type': {
+      borderTopRightRadius: theme.base,
+      borderBottomRightRadius: theme.base,
+    },
+  });
+
+  const ruleContainerStyles = css({
+    '& > .rule': {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: theme.base / 2,
+      alignItems: 'center',
+      marginBottom: theme.base / 4,
+      marginTop: theme.base / 4,
+    },
+  });
+
+  const ruleGroupContainerBase = {
+    padding: theme.base / 2,
+    border: `1px solid ${theme.colors.borderBaseSubdued}`,
+  };
+
+  const ruleGroupContainerBlueStyles = css({
+    ...ruleGroupContainerBase,
+    borderRadius: theme.border.radius.small,
+    backgroundColor: '#E9F1F9',
+  });
+
+  const ruleGroupContainerWhiteStyles = css({
+    ...ruleGroupContainerBase,
+    borderRadius: theme.border.radius.small,
+    backgroundColor: theme.colors.backgroundBasePlain,
+  });
+
+  const innerGroupContainerWhiteStyles = css({
+    ...ruleGroupContainerBase,
+    borderBottomLeftRadius: theme.border.radius.small,
+    borderTopLeftRadius: theme.border.radius.small,
+    backgroundColor: theme.colors.backgroundBasePlain,
+  });
+
+  const innerGroupContainerBlueStyles = css({
+    ...ruleGroupContainerBase,
+    borderBottomLeftRadius: theme.border.radius.small,
+    borderTopLeftRadius: theme.border.radius.small,
+    backgroundColor: '#E9F1F9',
+  });
+
+  const removeGroupActionStyles = css({
+    backgroundColor: theme.colors.backgroundLightPrimary,
+    width: '40px',
+    height: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomRightRadius: theme.border.radius.small,
+    borderTopRightRadius: theme.border.radius.small,
+    border: `thin solid ${theme.colors.borderBasePlain}`,
+    cursor: 'pointer',
+  });
+
+  const expandingSearchRowStyles = css({
+    padding: theme.base / 2,
+    height: theme.base * 2,
+    borderRadius: theme.border.radius.medium,
+    border: 'thin solid FEF7E0',
+    backgroundColor: '#FEF7E0',
+  });
+  const expandingRowBodyStyles = css({
+    display: 'flex',
+    gap: theme.base,
+    fontWeight: theme.font.weight.bold,
+    span: {
+      fontWeight: 'bold',
+    },
+  });
+
+  const addRulePlusStyles = css({
+    fontSize: theme.size.l,
+  });
+
+  const addRuleContainerStyles = css({
+    color: theme.colors.primary,
+    size: theme.size.m,
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: theme.base / 2,
+    alignSelf: 'end',
+    cursor: 'pointer',
+    marginRight: theme.base / 2,
+  });
+
+  const addGroupStyles = css({
+    border: `thin dashed ${theme.colors.backgroundFilledPrimary}`,
+    borderRadius: theme.border.radius.medium,
+    alignItems: 'center',
+    paddingBlock: theme.base / 3,
+    paddingInline: theme.base,
+    color: theme.colors.primary,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    cursor: 'pointer',
+  });
+
+  const inlineCombinatorStyles = css({
+    alignSelf: 'start',
+    transform: `translateY(calc(-50% - ${theme.base / 8}px))`,
+  });
+
+  const ruleGroupBodyGridStyles = css({
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    columnGap: theme.base / 2,
+    rowGap: theme.base / 4,
+    alignItems: 'center',
+    '& > :first-child': {
+      gridColumn: '1 / -1',
+    },
+    '& > :first-child:not(:only-child)': {
+      gridColumn: '2 / -1',
+    },
+  });
+
+  return {
+    toggleButtonStyles,
+    queryBuilderContainerStyles,
+    buttonGroupStyles,
+    ruleContainerStyles,
+    ruleGroupContainerBlueStyles,
+    ruleGroupContainerWhiteStyles,
+    innerGroupContainerWhiteStyles,
+    innerGroupContainerBlueStyles,
+    removeGroupActionStyles,
+    expandingSearchRowStyles,
+    expandingRowBodyStyles,
+    addRulePlusStyles,
+    addRuleContainerStyles,
+    addGroupStyles,
+    inlineCombinatorStyles,
+    ruleGroupBodyGridStyles,
+  };
+};

package/src/components/WfoTable/WfoStructuredSearchTable/utils.ts

@@ -0,0 +1,45 @@
+import type { RuleGroupType } from 'react-querybuilder';
+import { parseCEL } from 'react-querybuilder/parseCEL';
+
+export const parseCelToRuleGroup = (celString: string): RuleGroupType | undefined => {
+  if (!celString) {
+    return undefined;
+  }
+  try {
+    const ruleGroup = parseCEL(celString);
+    return ruleGroup?.rules?.length > 0 ? ruleGroup : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Builds a CEL filter that appends a single column condition (`field == "value"`) to the current
+ * filter and returns it together with its parsed rule group. The column name is resolved via
+ * getColumnSearchFieldName, falling back to the field key. Returns undefined when the input can't
+ * produce a valid filter (empty/quoted search text, or a filter that doesn't parse back to rules).
+ */
+export const buildColumnFilter = <T>(
+  field: keyof T,
+  searchText: string,
+  currentFilter?: string,
+  getColumnSearchFieldName?: (field: keyof T) => string,
+): { filterString: string; ruleGroup: RuleGroupType } | undefined => {
+  // A double quote in the value would break the `== "..."` CEL literal and parseCEL has no escaping.
+  if (!searchText || searchText.includes('"')) {
+    return undefined;
+  }
+
+  const searchFieldName = getColumnSearchFieldName?.(field) ?? String(field);
+  const columnFilterCondition = `${searchFieldName} == "${searchText}"`;
+  const trimmedCurrentFilter = currentFilter?.trim();
+  const filterString =
+    trimmedCurrentFilter ? `(${trimmedCurrentFilter}) && ${columnFilterCondition}` : columnFilterCondition;
+
+  const ruleGroup = parseCelToRuleGroup(filterString);
+  if (!ruleGroup) {
+    return undefined;
+  }
+
+  return { filterString, ruleGroup };
+};

package/src/components/WfoTable/WfoTable/WfoDragHandler.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import type { FC } from 'react';
 import Draggable from 'react-draggable';
 import type { DraggableEventHandler } from 'react-draggable';
@@ -17,6 +17,7 @@ interface WfoDragHandlerProps {
 }
 
 export const WfoDragHandler: FC<WfoDragHandlerProps> = ({ headerRowRef, fieldName, onUpdateColumWidth }) => {
+  const nodeRef = useRef(null);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
   const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
@@ -66,8 +67,9 @@ export const WfoDragHandler: FC<WfoDragHandlerProps> = ({ headerRowRef, fieldNam
         onDrag={onDrag}
         bounds={bounds}
         onStop={onStop}
+        nodeRef={nodeRef}
       >
-        <div css={dragAndDropStyle} />
+        <div css={dragAndDropStyle} ref={nodeRef} />
       </Draggable>
     </div>
   );

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx

@@ -25,6 +25,7 @@ export type TableSettingsModalProps<T> = {
   onClose: () => void;
   onUpdateTableConfig: (updatedTableConfig: TableSettingsConfig<T>) => void;
   onResetToDefaults: () => void;
+  extraSettings?: React.ReactNode;
 };
 
 export const TableSettingsModal = <T,>({
@@ -33,6 +34,7 @@ export const TableSettingsModal = <T,>({
   onUpdateTableConfig,
   onResetToDefaults,
   onClose,
+  extraSettings,
 }: TableSettingsModalProps<T>) => {
   const t = useTranslations('main');
   const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
@@ -97,6 +99,13 @@ export const TableSettingsModal = <T,>({
             options={options}
           />
         </EuiFormRow>
+
+        {extraSettings && (
+          <>
+            <EuiSpacer size="xs" />
+            {extraSettings}
+          </>
+        )}
       </EuiForm>
     </WfoSettingsModal>
   );

package/src/components/WfoTable/index.ts

@@ -1,18 +1,14 @@
-export * from './WfoTableSettingsModal';
-
 export * from './utils/columns';
 export * from './utils/constants';
-
 export * from './utils/tableConfigPersistence';
 export * from './utils/tableUtils';
-
+export * from './WfoTableSettingsModal';
 export * from './WfoStatusColorField';
 export * from './WfoTableWithFilter';
-
 export * from './WfoSortButtons';
 export * from './WfoFirstPartUUID';
 export * from './WfoInlineJson';
 export * from './WfoRowContextMenu';
-
 export * from './WfoAdvancedTable';
 export * from './WfoTable';
+export * from './WfoStructuredSearchTable';

package/src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx

@@ -8,18 +8,26 @@ import { useGetOrchestratorConfig } from '@/hooks';
 interface WfoTitleWithWebsocketBadgeProps {
   title: string | ReactNode;
   wsUrl?: string;
+  extraElement?: ReactNode;
 }
 
-export const WfoTitleWithWebsocketBadge = ({ title, wsUrl = undefined }: WfoTitleWithWebsocketBadgeProps) => {
+export const WfoTitleWithWebsocketBadge = ({
+  title,
+  wsUrl = undefined,
+  extraElement,
+}: WfoTitleWithWebsocketBadgeProps) => {
   const { useWebSockets } = useGetOrchestratorConfig();
 
   const pageTitle =
-    useWebSockets ?
-      <EuiFlexGroup alignItems="center" gutterSize="s">
+    useWebSockets || extraElement ?
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>{title}</EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <WfoWebsocketStatusBadge wsUrl={wsUrl} />
-        </EuiFlexItem>
+        {useWebSockets && (
+          <EuiFlexItem grow={false}>
+            <WfoWebsocketStatusBadge wsUrl={wsUrl} />
+          </EuiFlexItem>
+        )}
+        {extraElement && <EuiFlexItem grow={false}>{extraElement}</EuiFlexItem>}
       </EuiFlexGroup>
     : title;
 

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -28,6 +28,7 @@ export interface WfoStepProps {
   isTask: boolean;
   isStartStep?: boolean;
   processId?: string;
+  workflowName?: string;
   userPermissions: FormUserPermissions;
 }
 

package/src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx

@@ -20,6 +20,7 @@ export type WfoStepListProps = {
   onTriggerExpandStepListItem: (stepListItem: StepListItem) => void;
   isTask: boolean;
   processId: string;
+  workflowName?: string;
   userPermissions: FormUserPermissions;
 };
 
@@ -32,6 +33,7 @@ export const WfoStepList = React.forwardRef(
       onTriggerExpandStepListItem,
       isTask,
       processId,
+      workflowName,
       userPermissions,
     }: WfoStepListProps,
     reference: Ref<WfoStepListRef>,
@@ -97,6 +99,7 @@ export const WfoStepList = React.forwardRef(
               isStartStep={index === 0}
               isTask={isTask}
               processId={processId}
+              workflowName={workflowName}
               userPermissions={userPermissions}
             />
           </div>

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx

@@ -2,7 +2,14 @@ import React, { Ref, useEffect, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { WfoJsonCodeBlock, WfoLoading, WfoStepList, WfoStepListHeader, WfoStepListRef } from '@/components';
+import {
+  WfoJsonCodeBlock,
+  WfoLoading,
+  WfoPageWithUserGuide,
+  WfoStepList,
+  WfoStepListHeader,
+  WfoStepListRef,
+} from '@/components';
 import WfoDiff, { getSubscriptionDiffTexts } from '@/components/WfoDiff/WfoDiff';
 import { WfoTraceback } from '@/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback';
 import { useGetRawProcessDetailQuery } from '@/rtk/endpoints/processDetail';
@@ -21,6 +28,7 @@ export interface WfoWorkflowStepListProps {
   traceBack: string | null;
   startedAt: string;
   processId: string;
+  workflowName?: string;
   isTask: boolean;
   userInputForm?: InputForm;
   userPermissions: FormUserPermissions;
@@ -40,7 +48,16 @@ export const WfoProcessSubscriptionDelta = ({ processId }: { processId: string }
 
 export const WfoWorkflowStepList = React.forwardRef(
   (
-    { steps = [], lastStatus, traceBack, processId, isTask, userInputForm, userPermissions }: WfoWorkflowStepListProps,
+    {
+      steps = [],
+      lastStatus,
+      traceBack,
+      processId,
+      workflowName,
+      isTask,
+      userInputForm,
+      userPermissions,
+    }: WfoWorkflowStepListProps,
     reference: Ref<WfoStepListRef>,
   ) => {
     const [showHiddenKeys, setShowHiddenKeys] = useState(false);
@@ -143,16 +160,19 @@ export const WfoWorkflowStepList = React.forwardRef(
         {showRaw && <WfoProcessRawData processId={processId} />}
         {showDelta && <WfoProcessSubscriptionDelta processId={processId} />}
         {!showRaw && !showDelta && (
-          <WfoStepList
-            ref={reference}
-            stepListItems={stepListItems}
-            showHiddenKeys={showHiddenKeys}
-            isTask={isTask}
-            onToggleExpandStepListItem={toggleExpandedStateStepListItem}
-            processId={processId}
-            onTriggerExpandStepListItem={handleExpandStepListItem}
-            userPermissions={userPermissions}
-          />
+          <WfoPageWithUserGuide workflowName={workflowName}>
+            <WfoStepList
+              ref={reference}
+              stepListItems={stepListItems}
+              showHiddenKeys={showHiddenKeys}
+              isTask={isTask}
+              onToggleExpandStepListItem={toggleExpandedStateStepListItem}
+              processId={processId}
+              workflowName={workflowName}
+              onTriggerExpandStepListItem={handleExpandStepListItem}
+              userPermissions={userPermissions}
+            />
+          </WfoPageWithUserGuide>
         )}
       </>
     );

package/src/components/WfoWorkflowUserGuide/WfoPageWithUserGuide.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode, useState } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, useIsWithinBreakpoints } from '@elastic/eui';
+
+import { useGetOrchestratorConfig } from '@/hooks';
+
+import { WfoWorkflowGuideExpandablePanel } from './WfoWorkflowGuideExpandablePanel';
+
+interface WfoFormWithUserGuideProps {
+  workflowName?: string;
+  children: ReactNode;
+}
+
+export const WfoPageWithUserGuide = ({ workflowName, children }: WfoFormWithUserGuideProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isBigScreen = useIsWithinBreakpoints(['xl', 'xxl']);
+  const { showWorkflowUserGuide } = useGetOrchestratorConfig();
+
+  if (!workflowName || !showWorkflowUserGuide) {
+    return <>{children}</>;
+  }
+
+  const workflowGuideExpandablePanel = (
+    <WfoWorkflowGuideExpandablePanel
+      workflowName={workflowName}
+      isExpanded={isExpanded}
+      onToggle={() => setIsExpanded((expanded) => !expanded)}
+    />
+  );
+
+  return (
+    <EuiFlexGroup gutterSize="s" direction={isBigScreen ? 'row' : 'column'}>
+      {!isBigScreen && workflowGuideExpandablePanel}
+      <EuiFlexItem grow={true}>{children}</EuiFlexItem>
+      {isBigScreen && workflowGuideExpandablePanel}
+    </EuiFlexGroup>
+  );
+};

package/src/components/WfoWorkflowUserGuide/WfoWorkflowGuideExpandablePanel.tsx

@@ -0,0 +1,151 @@
+import React, { ReactNode } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLoadingSpinner,
+  EuiMarkdownFormat,
+  EuiPanel,
+  EuiText,
+  useIsWithinBreakpoints,
+} from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { useGetWorkflowGuideQuery } from '@/rtk';
+
+import { getStyles } from './styles';
+
+interface WfoWorkflowUserGuideProps {
+  workflowName: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+interface WfoUserGuideToggleStripProps {
+  onToggle: () => void;
+  ariaLabel: string;
+  isBigScreen: boolean;
+  noLeadingBorder?: boolean;
+  children: ReactNode;
+}
+
+const WfoWorkflowGuideToggleStrip = ({
+  onToggle,
+  ariaLabel,
+  isBigScreen,
+  noLeadingBorder,
+  children,
+}: WfoUserGuideToggleStripProps) => {
+  const {
+    fullHeightStyle,
+    toggleStripContainerStyle,
+    toggleStripContainerHorizontalStyle,
+    toggleStripPanelStyle,
+    noLeftBorderStyle,
+    noBottomBorderStyle,
+  } = useWithOrchestratorTheme(getStyles);
+
+  return (
+    <EuiFlexItem
+      grow={false}
+      onClick={onToggle}
+      aria-label={ariaLabel}
+      css={isBigScreen ? toggleStripContainerStyle : toggleStripContainerHorizontalStyle}
+    >
+      <EuiPanel
+        hasShadow={false}
+        css={[toggleStripPanelStyle, noLeadingBorder && (isBigScreen ? noLeftBorderStyle : noBottomBorderStyle)]}
+      >
+        <EuiFlexGroup
+          direction={isBigScreen ? 'column' : 'row'}
+          alignItems="center"
+          gutterSize="s"
+          justifyContent="center"
+          css={fullHeightStyle}
+        >
+          {children}
+        </EuiFlexGroup>
+      </EuiPanel>
+    </EuiFlexItem>
+  );
+};
+
+const WfoWorkflowGuideMarkdown = ({ workflowName, isBigScreen }: { workflowName: string; isBigScreen: boolean }) => {
+  const t = useTranslations('workflowGuide');
+  const { guideBodyStyle, guidePanelStyle, guideStackedBodyStyle, guideStackedPanelStyle } =
+    useWithOrchestratorTheme(getStyles);
+  const { data, isLoading, isError } = useGetWorkflowGuideQuery({ workflowName });
+  const content = data?.content ?? '';
+
+  return (
+    <div css={isBigScreen ? guideBodyStyle : guideStackedBodyStyle}>
+      {(isLoading && <EuiLoadingSpinner size="m" />)
+        || ((isError || !content) && <EuiText color="subdued">{t('noGuideAvailable')}</EuiText>) || (
+          <EuiPanel paddingSize="m" hasShadow css={isBigScreen ? guidePanelStyle : guideStackedPanelStyle}>
+            <EuiMarkdownFormat>{content}</EuiMarkdownFormat>
+          </EuiPanel>
+        )}
+    </div>
+  );
+};
+
+export const WfoWorkflowGuideExpandablePanel = ({ workflowName, isExpanded, onToggle }: WfoWorkflowUserGuideProps) => {
+  const t = useTranslations('workflowGuide');
+  const { fullHeightStyle, guideExpandedItemStyle, guideExpandedFillStyle } = useWithOrchestratorTheme(getStyles);
+  const isBigScreen = useIsWithinBreakpoints(['xl', 'xxl']);
+
+  const OpenGuideButton = () => (
+    <EuiFlexItem grow={false}>
+      <EuiFlexGroup gutterSize="xs" alignItems="center" direction={isBigScreen ? 'column' : 'row'}>
+        <EuiIcon type={isBigScreen ? 'arrowLeft' : 'arrowDown'} size="xxl" color="primary" />
+        <EuiIcon type={'info'} size="xxl" color="primary" />
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+
+  const CloseGuideButton = () => (
+    <EuiFlexItem grow={false}>
+      <EuiIcon type={isBigScreen ? 'arrowRight' : 'arrowUp'} size="xl" color="primary" />
+    </EuiFlexItem>
+  );
+
+  if (!isExpanded) {
+    return (
+      <WfoWorkflowGuideToggleStrip onToggle={onToggle} ariaLabel={t('show')} isBigScreen={isBigScreen}>
+        <OpenGuideButton />
+      </WfoWorkflowGuideToggleStrip>
+    );
+  }
+
+  if (isBigScreen) {
+    return (
+      <EuiFlexItem grow={1} css={guideExpandedItemStyle}>
+        <EuiFlexGroup gutterSize="none" css={[fullHeightStyle, guideExpandedFillStyle]}>
+          <WfoWorkflowGuideMarkdown workflowName={workflowName} isBigScreen />
+          <WfoWorkflowGuideToggleStrip onToggle={onToggle} ariaLabel={t('hide')} isBigScreen noLeadingBorder>
+            <CloseGuideButton />
+          </WfoWorkflowGuideToggleStrip>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    );
+  }
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiFlexGroup direction="column" gutterSize="none">
+        <WfoWorkflowGuideToggleStrip
+          onToggle={onToggle}
+          ariaLabel={t('hide')}
+          isBigScreen={isBigScreen}
+          noLeadingBorder
+        >
+          <CloseGuideButton />
+        </WfoWorkflowGuideToggleStrip>
+        <WfoWorkflowGuideMarkdown workflowName={workflowName} isBigScreen />
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};

package/src/components/WfoWorkflowUserGuide/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoWorkflowGuideExpandablePanel';
+export * from './WfoPageWithUserGuide';