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

package/src/components/WfoSearchPage/utils.ts

@@ -1,179 +1,150 @@
-import {
-    Condition,
-    EntityKind,
-    Group,
-    RetrieverType,
-    SearchResult,
-} from '@/types';
+import { Condition, EntityKind, Group, RetrieverType, SearchResult } from '@/types';
 
 export function isSubscriptionSearchResult(item: SearchResult): boolean {
-    return item.entity_type === 'SUBSCRIPTION';
+  return item.entity_type === 'SUBSCRIPTION';
 }
 
 export function isProcessSearchResult(item: SearchResult): boolean {
-    return item.entity_type === 'PROCESS';
+  return item.entity_type === 'PROCESS';
 }
 
 export function isProductSearchResult(item: SearchResult): boolean {
-    return item.entity_type === 'PRODUCT';
+  return item.entity_type === 'PRODUCT';
 }
 
 export function isWorkflowSearchResult(item: SearchResult): boolean {
-    return item.entity_type === 'WORKFLOW';
+  return item.entity_type === 'WORKFLOW';
 }
 
 export const isCondition = (item: Group | Condition): item is Condition => {
-    return 'path' in item && 'condition' in item;
+  return 'path' in item && 'condition' in item;
 };
 
 const ENDPOINT_PATHS: Record<EntityKind, string> = {
-    PROCESS: 'processes',
-    PRODUCT: 'products',
-    WORKFLOW: 'workflows',
-    SUBSCRIPTION: 'subscriptions',
+  PROCESS: 'processes',
+  PRODUCT: 'products',
+  WORKFLOW: 'workflows',
+  SUBSCRIPTION: 'subscriptions',
 };
 
 export const getEndpointPath = (entityType: EntityKind): string => {
-    return ENDPOINT_PATHS[entityType] || ENDPOINT_PATHS.SUBSCRIPTION;
+  return ENDPOINT_PATHS[entityType] || ENDPOINT_PATHS.SUBSCRIPTION;
 };
 
 export const getDetailUrl = (result: SearchResult, baseUrl: string): string => {
-    const endpointPath = getEndpointPath(result.entity_type);
-    return `${baseUrl}/${endpointPath}/${result.entity_id}`;
+  const endpointPath = getEndpointPath(result.entity_type);
+  return `${baseUrl}/${endpointPath}/${result.entity_id}`;
 };
 
 export const ENTITY_TABS = [
-    { id: 'SUBSCRIPTION' as const, label: 'Subscriptions' },
-    { id: 'PRODUCT' as const, label: 'Products' },
-    { id: 'WORKFLOW' as const, label: 'Workflows' },
-    { id: 'PROCESS' as const, label: 'Processes' },
+  { id: 'SUBSCRIPTION' as const, label: 'Subscriptions' },
+  { id: 'PRODUCT' as const, label: 'Products' },
+  { id: 'WORKFLOW' as const, label: 'Workflows' },
+  { id: 'PROCESS' as const, label: 'Processes' },
 ];
 
 interface ThemeColors {
-    success: string;
-    primary: string;
-    warning: string;
-    accent: string;
-    textSubdued: string;
+  success: string;
+  primary: string;
+  warning: string;
+  accent: string;
+  textSubdued: string;
 }
 
 interface Theme {
-    colors: ThemeColors;
+  colors: ThemeColors;
 }
 
 const TYPE_COLOR_MAP: Record<string, keyof ThemeColors> = {
-    string: 'success',
-    number: 'primary',
-    boolean: 'warning',
-    datetime: 'accent',
-    component: 'primary',
+  string: 'success',
+  number: 'primary',
+  boolean: 'warning',
+  datetime: 'accent',
+  component: 'primary',
 };
 
 export const getTypeColor = (type: string, theme: Theme): string => {
-    const colorKey = TYPE_COLOR_MAP[type.toLowerCase()];
-    return colorKey ? theme.colors[colorKey] : theme.colors.textSubdued;
+  const colorKey = TYPE_COLOR_MAP[type.toLowerCase()];
+  return colorKey ? theme.colors[colorKey] : theme.colors.textSubdued;
 };
 
 interface PathInfo {
-    type?: string;
-    [key: string]: unknown;
+  type?: string;
+  [key: string]: unknown;
 }
 
 interface OperatorDisplay {
-    symbol: string;
-    description: string;
+  symbol: string;
+  description: string;
 }
 
 const OPERATOR_MAP: Record<string, OperatorDisplay> = {
-    eq: { symbol: '=', description: 'equals' },
-    neq: { symbol: '≠', description: 'not equals' },
-    lt: { symbol: '<', description: 'less than' },
-    lte: { symbol: '≤', description: 'less than or equal to' },
-    gt: { symbol: '>', description: 'greater than' },
-    gte: { symbol: '≥', description: 'greater than or equal to' },
-    between: { symbol: '⟷', description: 'between (range)' },
-    has_component: { symbol: '✓', description: 'has component' },
-    not_has_component: { symbol: '✗', description: 'does not have component' },
+  eq: { symbol: '=', description: 'equals' },
+  neq: { symbol: '≠', description: 'not equals' },
+  lt: { symbol: '<', description: 'less than' },
+  lte: { symbol: '≤', description: 'less than or equal to' },
+  gt: { symbol: '>', description: 'greater than' },
+  gte: { symbol: '≥', description: 'greater than or equal to' },
+  between: { symbol: '⟷', description: 'between (range)' },
+  has_component: { symbol: '✓', description: 'has component' },
+  not_has_component: { symbol: '✗', description: 'does not have component' },
 };
 
 const BOOLEAN_OPERATOR_MAP: Record<string, OperatorDisplay> = {
-    eq: { symbol: '✓', description: 'is true' },
-    neq: { symbol: '✗', description: 'is false' },
+  eq: { symbol: '✓', description: 'is true' },
+  neq: { symbol: '✗', description: 'is false' },
 };
 
-export const getOperatorDisplay = (
-    op: string,
-    selectedPathInfo?: PathInfo,
-): OperatorDisplay => {
-    if (selectedPathInfo?.type === 'boolean' && BOOLEAN_OPERATOR_MAP[op]) {
-        return BOOLEAN_OPERATOR_MAP[op];
-    }
-    return OPERATOR_MAP[op] || { symbol: op, description: op };
+export const getOperatorDisplay = (op: string, selectedPathInfo?: PathInfo): OperatorDisplay => {
+  if (selectedPathInfo?.type === 'boolean' && BOOLEAN_OPERATOR_MAP[op]) {
+    return BOOLEAN_OPERATOR_MAP[op];
+  }
+  return OPERATOR_MAP[op] || { symbol: op, description: op };
 };
 
-export const getButtonColor = (
-    op: string,
-    pathInfo: PathInfo | null,
-    condition: Condition,
-): 'primary' | 'text' => {
-    if (pathInfo?.type === 'boolean') {
-        const isSelected =
-            op === 'eq'
-                ? condition.condition.value === true
-                : condition.condition.value === false;
-        return isSelected ? 'primary' : 'text';
-    }
-    return condition.condition.op === op ? 'primary' : 'text';
+export const getButtonColor = (op: string, pathInfo: PathInfo | null, condition: Condition): 'primary' | 'text' => {
+  if (pathInfo?.type === 'boolean') {
+    const isSelected = op === 'eq' ? condition.condition.value === true : condition.condition.value === false;
+    return isSelected ? 'primary' : 'text';
+  }
+  return condition.condition.op === op ? 'primary' : 'text';
 };
 
-export const getButtonFill = (
-    op: string,
-    pathInfo: PathInfo | null,
-    condition: Condition,
-): boolean => {
-    if (pathInfo?.type === 'boolean') {
-        return op === 'eq'
-            ? condition.condition.value === true
-            : condition.condition.value === false;
-    }
-    return condition.condition.op === op;
+export const getButtonFill = (op: string, pathInfo: PathInfo | null, condition: Condition): boolean => {
+  if (pathInfo?.type === 'boolean') {
+    return op === 'eq' ? condition.condition.value === true : condition.condition.value === false;
+  }
+  return condition.condition.op === op;
 };
 
 export const isFilterValid = (group: Group): boolean => {
-    return group.children.every((child) => {
-        if (isCondition(child)) {
-            return (
-                child.path &&
-                child.condition.op &&
-                child.condition.value !== undefined
-            );
-        }
-        return isFilterValid(child);
-    });
+  return group.children.every((child) => {
+    if (isCondition(child)) {
+      return child.path && child.condition.op && child.condition.value !== undefined;
+    }
+    return isFilterValid(child);
+  });
 };
 
 interface SearchQuery {
-    text?: string;
+  text?: string;
 }
 
 export const buildSearchParams = (
-    debouncedQuery: SearchQuery | string,
-    selectedEntityTab: EntityKind,
-    filterGroup: Group,
-    pageSize: number,
-    retriever?: Exclude<RetrieverType, 'auto'>,
+  debouncedQuery: SearchQuery | string,
+  selectedEntityTab: EntityKind,
+  filterGroup: Group,
+  pageSize: number,
+  retriever?: Exclude<RetrieverType, 'auto'>,
 ) => {
-    const queryText =
-        typeof debouncedQuery === 'string'
-            ? debouncedQuery
-            : debouncedQuery?.text?.trim() || '';
-
-    return {
-        action: 'select' as const,
-        entity_type: selectedEntityTab,
-        query: queryText || '',
-        filters: filterGroup?.children.length > 0 ? filterGroup : undefined,
-        limit: pageSize,
-        retriever,
-    };
+  const queryText = typeof debouncedQuery === 'string' ? debouncedQuery : debouncedQuery?.text?.trim() || '';
+
+  return {
+    action: 'select' as const,
+    entity_type: selectedEntityTab,
+    query: queryText || '',
+    filters: filterGroup?.children.length > 0 ? filterGroup : undefined,
+    limit: pageSize,
+    retriever,
+  };
 };

package/src/components/WfoSettings/WfoAoStackStatus.tsx

@@ -2,39 +2,30 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import {
-    EuiButton,
-    EuiFlexItem,
-    EuiPanel,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
+import { EuiButton, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { useGetOrchestratorConfig } from '@/hooks';
 import { WfoChartBar } from '@/icons';
 
 export const WfoAoStackStatus = () => {
-    const t = useTranslations('settings.page');
-    const { aoStackStatusUrl } = useGetOrchestratorConfig();
+  const t = useTranslations('settings.page');
+  const { aoStackStatusUrl } = useGetOrchestratorConfig();
 
-    const openStatusPage = () => {
-        window.open(aoStackStatusUrl, '_blank');
-    };
+  const openStatusPage = () => {
+    window.open(aoStackStatusUrl, '_blank');
+  };
 
-    return (
-        <EuiFlexItem>
-            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
-                <EuiText size="s">
-                    <h4>{t('aoStackStatus')}</h4>
-                </EuiText>
-                <EuiSpacer size="m" />
-                <EuiButton
-                    iconType={() => <WfoChartBar />}
-                    onClick={openStatusPage}
-                >
-                    {t('viewStatusPage')}
-                </EuiButton>
-            </EuiPanel>
-        </EuiFlexItem>
-    );
+  return (
+    <EuiFlexItem>
+      <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+        <EuiText size="s">
+          <h4>{t('aoStackStatus')}</h4>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <EuiButton iconType={() => <WfoChartBar />} onClick={openStatusPage}>
+          {t('viewStatusPage')}
+        </EuiButton>
+      </EuiPanel>
+    </EuiFlexItem>
+  );
 };

package/src/components/WfoSettings/WfoEngineStatus.tsx

@@ -10,42 +10,36 @@ import { useGetEngineStatusQuery } from '@/rtk';
 import { EngineStatus } from '@/types';
 
 export const WfoEngineStatus = () => {
-    const { theme } = useOrchestratorTheme();
-    const { data } = useGetEngineStatusQuery();
-    const { engineStatus, runningProcesses } = data || {};
-    const isRunning = engineStatus === EngineStatus.RUNNING;
-    const t = useTranslations('settings.page');
+  const { theme } = useOrchestratorTheme();
+  const { data } = useGetEngineStatusQuery();
+  const { engineStatus, runningProcesses } = data || {};
+  const isRunning = engineStatus === EngineStatus.RUNNING;
+  const t = useTranslations('settings.page');
 
-    return (
-        <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
-            <EuiFlexGroup direction="column" gutterSize="s">
-                <EuiFlexItem>
-                    <EuiText size="s">
-                        <h4>{t('engineStatusTitle')}</h4>
-                    </EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem css={{ flexDirection: 'row' }}>
-                    <EuiText size="s" style={{ minWidth: 200 }}>
-                        {t('runningProcesses')}
-                    </EuiText>
-                    <EuiText size="s">{runningProcesses || '-'}</EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem css={{ flexDirection: 'row' }}>
-                    <EuiText size="s" style={{ minWidth: 190 }}>
-                        {t('status')}
-                    </EuiText>
-                    <WfoStatusDotIcon
-                        color={
-                            isRunning
-                                ? theme.colors.success
-                                : theme.colors.warning
-                        }
-                    />
-                    <EuiText size="xs" css={{ paddingTop: theme.size.xs }}>
-                        <p>{engineStatus}</p>
-                    </EuiText>
-                </EuiFlexItem>
-            </EuiFlexGroup>
-        </EuiPanel>
-    );
+  return (
+    <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiText size="s">
+            <h4>{t('engineStatusTitle')}</h4>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem css={{ flexDirection: 'row' }}>
+          <EuiText size="s" style={{ minWidth: 200 }}>
+            {t('runningProcesses')}
+          </EuiText>
+          <EuiText size="s">{runningProcesses || '-'}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem css={{ flexDirection: 'row' }}>
+          <EuiText size="s" style={{ minWidth: 190 }}>
+            {t('status')}
+          </EuiText>
+          <WfoStatusDotIcon color={isRunning ? theme.colors.success : theme.colors.warning} />
+          <EuiText size="xs" css={{ paddingTop: theme.size.xs }}>
+            <p>{engineStatus}</p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
 };

package/src/components/WfoSettings/WfoEngineStatusButton.tsx

@@ -8,36 +8,23 @@ import { useGetEngineStatusQuery, useSetEngineStatusMutation } from '@/rtk';
 import { EngineStatus } from '@/types';
 
 export const WfoEngineStatusButton = () => {
-    const { data, isLoading } = useGetEngineStatusQuery();
-    const { engineStatus } = data || {};
-    const [setEngineStatus, { isLoading: isSettingEngineStatus }] =
-        useSetEngineStatusMutation();
+  const { data, isLoading } = useGetEngineStatusQuery();
+  const { engineStatus } = data || {};
+  const [setEngineStatus, { isLoading: isSettingEngineStatus }] = useSetEngineStatusMutation();
 
-    const t = useTranslations('settings.page');
-    if (isLoading || isSettingEngineStatus) {
-        return (
-            <EuiButton isLoading fill>
-                Loading...
-            </EuiButton>
-        );
-    }
-    return engineStatus === EngineStatus.RUNNING ? (
-        <EuiButton
-            onClick={() => setEngineStatus(true)}
-            color="warning"
-            fill
-            iconType="pause"
-        >
-            {t('pauseEngine')}
-        </EuiButton>
-    ) : (
-        <EuiButton
-            onClick={() => setEngineStatus(false)}
-            color="primary"
-            fill
-            iconType="play"
-        >
-            {t('startEngine')}
-        </EuiButton>
+  const t = useTranslations('settings.page');
+  if (isLoading || isSettingEngineStatus) {
+    return (
+      <EuiButton isLoading fill>
+        Loading...
+      </EuiButton>
     );
+  }
+  return engineStatus === EngineStatus.RUNNING ?
+      <EuiButton onClick={() => setEngineStatus(true)} color="warning" fill iconType="pause">
+        {t('pauseEngine')}
+      </EuiButton>
+    : <EuiButton onClick={() => setEngineStatus(false)} color="primary" fill iconType="play">
+        {t('startEngine')}
+      </EuiButton>;
 };

package/src/components/WfoSettings/WfoFlushSettings.tsx

@@ -2,13 +2,7 @@ import React, { FunctionComponent, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import {
-    EuiButton,
-    EuiComboBox,
-    EuiPanel,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
+import { EuiButton, EuiComboBox, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 import { EuiComboBoxOptionOption } from '@elastic/eui/src/components/combo_box/types';
 
 import { PolicyResource } from '@/configuration';
@@ -20,75 +14,63 @@ import { WfoIsAllowedToRender } from '../WfoAuth';
 import { getWfoFlushSettingsStyle } from './styles';
 
 export const WfoFlushSettings: FunctionComponent = () => {
-    const { comboboxStyle } = useWithOrchestratorTheme(
-        getWfoFlushSettingsStyle,
-    );
+  const { comboboxStyle } = useWithOrchestratorTheme(getWfoFlushSettingsStyle);
 
-    const [clearCache] = useClearCacheMutation();
+  const [clearCache] = useClearCacheMutation();
 
-    const t = useTranslations('settings.page');
-    const [selectedOptions, setSelected] = useState<EuiComboBoxOptionOption[]>(
-        [],
-    );
-    const { showToastMessage } = useShowToastMessage();
+  const t = useTranslations('settings.page');
+  const [selectedOptions, setSelected] = useState<EuiComboBoxOptionOption[]>([]);
+  const { showToastMessage } = useShowToastMessage();
 
-    const onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
-        setSelected(selectedOptions);
-    };
-    const { data } = useGetCacheNamesQuery();
+  const onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
+    setSelected(selectedOptions);
+  };
+  const { data } = useGetCacheNamesQuery();
 
-    const options: EuiComboBoxOptionOption[] =
-        data && Object.entries(data).length > 0
-            ? Object.entries(data).map(([key, value]) => ({
-                  key,
-                  label: value,
-              }))
-            : [{ key: 'loading', label: 'Loading...' }];
+  const options: EuiComboBoxOptionOption[] =
+    data && Object.entries(data).length > 0 ?
+      Object.entries(data).map(([key, value]) => ({
+        key,
+        label: value,
+      }))
+    : [{ key: 'loading', label: 'Loading...' }];
 
-    const flushCache = () => {
-        if (selectedOptions.length < 1) {
-            return;
-        }
-        const cacheKey = selectedOptions.map((obj) => obj.key).join(', ');
-        clearCache(cacheKey)
-            .then(() => {
-                showToastMessage(
-                    ToastTypes.SUCCESS,
-                    `Cache for cache key ${cacheKey} flushed successfully`,
-                    'Cache cleared',
-                );
-            })
-            .catch(() => {
-                showToastMessage(
-                    ToastTypes.ERROR,
-                    `Flush for cache key ${cacheKey} failed`,
-                    'Flush failed',
-                );
-            });
-    };
+  const flushCache = () => {
+    if (selectedOptions.length < 1) {
+      return;
+    }
+    const cacheKey = selectedOptions.map((obj) => obj.key).join(', ');
+    clearCache(cacheKey)
+      .then(() => {
+        showToastMessage(ToastTypes.SUCCESS, `Cache for cache key ${cacheKey} flushed successfully`, 'Cache cleared');
+      })
+      .catch(() => {
+        showToastMessage(ToastTypes.ERROR, `Flush for cache key ${cacheKey} failed`, 'Flush failed');
+      });
+  };
 
-    return (
-        <WfoIsAllowedToRender resource={PolicyResource.SETTINGS_FLUSH_CACHE}>
-            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
-                <EuiText size="s">
-                    <h4>{t('flushCacheSettingsTitle')}</h4>
-                </EuiText>
-                <EuiSpacer size="m" />
-                <EuiComboBox
-                    css={comboboxStyle}
-                    aria-label="Flush settings"
-                    placeholder={t('selectSettings')}
-                    singleSelection={{ asPlainText: true }}
-                    options={options}
-                    selectedOptions={selectedOptions}
-                    onChange={onChange}
-                    fullWidth
-                />
-                <EuiSpacer size="m" />
-                <EuiButton onClick={flushCache} iconType="refresh">
-                    {t('flushButton')}
-                </EuiButton>
-            </EuiPanel>
-        </WfoIsAllowedToRender>
-    );
+  return (
+    <WfoIsAllowedToRender resource={PolicyResource.SETTINGS_FLUSH_CACHE}>
+      <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+        <EuiText size="s">
+          <h4>{t('flushCacheSettingsTitle')}</h4>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <EuiComboBox
+          css={comboboxStyle}
+          aria-label="Flush settings"
+          placeholder={t('selectSettings')}
+          singleSelection={{ asPlainText: true }}
+          options={options}
+          selectedOptions={selectedOptions}
+          onChange={onChange}
+          fullWidth
+        />
+        <EuiSpacer size="m" />
+        <EuiButton onClick={flushCache} iconType="refresh">
+          {t('flushButton')}
+        </EuiButton>
+      </EuiPanel>
+    </WfoIsAllowedToRender>
+  );
 };

package/src/components/WfoSettings/WfoModifySettings.tsx

@@ -4,37 +4,31 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 
-import {
-    WfoEngineStatusButton,
-    WfoIsAllowedToRender,
-    WfoResetTextSearchIndexButton,
-} from '@/components';
+import { WfoEngineStatusButton, WfoIsAllowedToRender, WfoResetTextSearchIndexButton } from '@/components';
 import { PolicyResource } from '@/configuration';
 
 export const WfoModifySettings = () => {
-    const t = useTranslations('settings.page');
-    return (
-        <EuiFlexItem>
-            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
-                <EuiText size="s">
-                    <h4>{t('resetTextSearchIndex')}</h4>
-                </EuiText>
-                <EuiSpacer size="m"></EuiSpacer>
-                <WfoResetTextSearchIndexButton />
-            </EuiPanel>
+  const t = useTranslations('settings.page');
+  return (
+    <EuiFlexItem>
+      <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+        <EuiText size="s">
+          <h4>{t('resetTextSearchIndex')}</h4>
+        </EuiText>
+        <EuiSpacer size="m"></EuiSpacer>
+        <WfoResetTextSearchIndexButton />
+      </EuiPanel>
 
-            <WfoIsAllowedToRender
-                resource={PolicyResource.SETTINGS_START_STOP_ENGINE}
-            >
-                <EuiSpacer />
-                <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
-                    <EuiText size="s">
-                        <h4>{t('modifyEngine')}</h4>
-                    </EuiText>
-                    <EuiSpacer size="m"></EuiSpacer>
-                    <WfoEngineStatusButton />
-                </EuiPanel>
-            </WfoIsAllowedToRender>
-        </EuiFlexItem>
-    );
+      <WfoIsAllowedToRender resource={PolicyResource.SETTINGS_START_STOP_ENGINE}>
+        <EuiSpacer />
+        <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+          <EuiText size="s">
+            <h4>{t('modifyEngine')}</h4>
+          </EuiText>
+          <EuiSpacer size="m"></EuiSpacer>
+          <WfoEngineStatusButton />
+        </EuiPanel>
+      </WfoIsAllowedToRender>
+    </EuiFlexItem>
+  );
 };