@orchestrator-ui/orchestrator-ui-components 8.4.4 → 8.5.0

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';

package/src/components/WfoWorkflowUserGuide/styles.ts

@@ -0,0 +1,87 @@
+import { css } from '@emotion/react';
+
+import { WfoThemeHelpers } from '@/hooks';
+
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
+  const fullHeightStyle = css({
+    height: '100%',
+  });
+
+  const toggleStripContainerStyle = css({
+    width: theme.base * 4,
+    cursor: 'pointer',
+  });
+
+  const toggleStripContainerHorizontalStyle = css({
+    width: '100%',
+    height: theme.base * 4,
+    cursor: 'pointer',
+  });
+
+  const toggleStripPanelStyle = css({
+    height: '100%',
+    backgroundColor: theme.colors.backgroundBasePrimary,
+    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
+    transition: 'box-shadow 100ms ease-in-out, border-style 100ms ease-in-out',
+    '&:hover': {
+      borderStyle: 'solid',
+      boxShadow: `0 0 0 2px ${theme.colors.backgroundBasePrimary}`,
+    },
+  });
+
+  const guideExpandedItemStyle = css({
+    position: 'relative',
+  });
+
+  const guideExpandedFillStyle = css({
+    position: 'absolute',
+    inset: 0,
+  });
+
+  const guidePanelStyle = css({
+    height: '100%',
+    overflowY: 'auto',
+    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
+    borderRightWidth: 0,
+  });
+
+  const guideBodyStyle = css({
+    flex: 1,
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+  });
+
+  const noLeftBorderStyle = css({
+    borderLeftWidth: 0,
+  });
+
+  const noBottomBorderStyle = css({
+    borderBottomWidth: 0,
+  });
+
+  const guideStackedBodyStyle = css({
+    maxHeight: '50vh',
+    overflowY: 'auto',
+  });
+
+  const guideStackedPanelStyle = css({
+    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
+    borderTopWidth: 0,
+  });
+
+  return {
+    fullHeightStyle,
+    toggleStripContainerStyle,
+    toggleStripContainerHorizontalStyle,
+    toggleStripPanelStyle,
+    noLeftBorderStyle,
+    noBottomBorderStyle,
+    guidePanelStyle,
+    guideBodyStyle,
+    guideStackedBodyStyle,
+    guideStackedPanelStyle,
+    guideExpandedItemStyle,
+    guideExpandedFillStyle,
+  };
+};

package/src/components/index.ts

@@ -38,6 +38,7 @@ export * from './WfoTableCodeBlock';
 export * from './WfoInlineEdit';
 export * from './WfoPydanticForm';
 export * from './WfoSearchPage';
+export * from './WfoWorkflowUserGuide';
 export * from './WfoMonacoCodeBlock';
 export * from './WfoLogoSpinner';
 export * from './WfoPopover';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.4.4';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.5.0';

package/src/contexts/OrchestratorConfigContext.tsx

@@ -13,6 +13,7 @@ export const emptyOrchestratorConfig: OrchestratorConfig = {
   useWebSockets: false,
   useThemeToggle: false,
   showWorkflowInformationLink: false,
+  showWorkflowUserGuide: false,
   workflowInformationLinkUrl: '',
   enableSupportMenuItem: false,
   supportMenuItemUrl: '',

package/src/hooks/index.ts

@@ -13,4 +13,5 @@ export * from './useGetOrchestratorConfig';
 export * from './useBackendAvailability';
 export * from './useGetSchedulesForWorkflow';
 export * from './useGetWorkflowNameById';
+export * from './usePathAutoComplete';
 export * from './useGetPydanticFormsConfig';

package/src/hooks/usePathAutoComplete.ts

@@ -53,7 +53,6 @@ const FALLBACK_DEFINITIONS: Record<
 export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
   const [paths, setPaths] = useState<PathInfo[]>([]);
   const debouncedPrefix = useDebounce(prefix, 300);
-
   const { data: definitions = FALLBACK_DEFINITIONS, isError: defError } = useSearchDefinitionsQuery();
 
   const {
@@ -88,7 +87,7 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
         displayLabel: leaf.name,
         ui_types: leaf.ui_types,
         availablePaths: leaf.paths || [],
-        pathCount: leaf.paths ? leaf.paths.length : 0,
+        pathCount: leaf.paths ? leaf.paths?.length : 0,
       });
     });
 
@@ -105,12 +104,12 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
         displayLabel: component.name,
         ui_types: component.ui_types,
         availablePaths: component.paths || [],
-        pathCount: component.paths ? component.paths.length : 0,
+        pathCount: component.paths ? component.paths?.length : 0,
       });
     });
 
     setPaths(enrichedPaths);
-  }, [pathData, definitions, debouncedPrefix.length]);
+  }, [pathData, definitions, debouncedPrefix?.length]);
 
   const errorMessage =
     isError ? 'Failed to load paths'

package/src/hooks/useSearch.ts

@@ -2,23 +2,30 @@ import { useEffect, useState } from 'react';
 
 import { Query } from '@elastic/eui';
 
-import { useSearchMutation } from '@/rtk/endpoints';
-import { EntityKind, Group, PaginatedSearchResults, RetrieverType } from '@/types';
+import { useLazySearchQuery } from '@/rtk/endpoints';
+import { EntityKind, Filter, PaginatedSearchResults, RetrieverType } from '@/types';
+
+const emptyResult: PaginatedSearchResults = {
+  data: [],
+  page_info: { has_next_page: false, next_page_cursor: null },
+  search_metadata: { search_type: null, description: null },
+  cursor: {
+    total_items: 0,
+    start_cursor: 0,
+    end_cursor: 0,
+  },
+};
 
 export const useSearch = (
   query: Query | string,
   entityType: EntityKind,
-  filterGroup?: Group,
+  filterGroup?: Filter,
   limit?: number,
   retriever: RetrieverType = RetrieverType.Auto,
 ) => {
-  const [results, setResults] = useState<PaginatedSearchResults>({
-    data: [],
-    page_info: { has_next_page: false, next_page_cursor: null },
-    search_metadata: { search_type: null, description: null },
-  });
+  const [results, setResults] = useState<PaginatedSearchResults>({ ...emptyResult });
 
-  const [triggerSearch, { isLoading, isError }] = useSearchMutation();
+  const [triggerSearch, { isLoading, isError }] = useLazySearchQuery();
 
   useEffect(() => {
     const queryText = typeof query === 'string' ? query : query.text?.trim() || '';
@@ -27,9 +34,7 @@ export const useSearch = (
 
     if (queryText.length < 2 && !hasFilters) {
       setResults({
-        data: [],
-        page_info: { has_next_page: false, next_page_cursor: null },
-        search_metadata: { search_type: null, description: null },
+        ...emptyResult,
       });
       return;
     }
@@ -42,6 +47,7 @@ export const useSearch = (
           filters: filterGroup && filterGroup.children.length > 0 ? filterGroup : undefined,
           limit: limit,
           retriever: retriever === RetrieverType.Auto ? undefined : retriever,
+          response_columns: [],
         }).unwrap();
 
         setResults({
@@ -54,13 +60,12 @@ export const useSearch = (
             search_type: result.search_metadata?.search_type || null,
             description: result.search_metadata?.description || null,
           },
+          cursor: result.cursor,
         });
       } catch (error) {
         console.error('Search error:', error);
         setResults({
-          data: [],
-          page_info: { has_next_page: false, next_page_cursor: null },
-          search_metadata: { search_type: null, description: null },
+          ...emptyResult,
         });
       }
     };

package/src/hooks/useSearchPagination.ts

@@ -1,10 +1,11 @@
 import { useCallback, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 
 import { Query } from '@elastic/eui';
 
 import { buildSearchParams } from '@/components/WfoSearchPage/utils';
 import { useSearchWithPaginationMutation } from '@/rtk/endpoints';
-import { EntityKind, Group, PaginatedSearchResults, RetrieverType, SearchResult } from '@/types';
+import { EntityKind, Filter, PaginatedSearchResults, RetrieverType, SearchResult } from '@/types';
 
 interface PageHistoryItem {
   page: number;
@@ -26,10 +27,10 @@ interface UseSearchPaginationReturn {
 export const useSearchPagination = (
   debouncedQuery: Query | string,
   selectedEntityTab: EntityKind,
-  filterGroup: Group,
+  filterGroup: Filter,
   pageSize: number,
   results: PaginatedSearchResults,
-  setResults: (results: PaginatedSearchResults) => void,
+  setResults: Dispatch<SetStateAction<PaginatedSearchResults>>,
   retriever?: RetrieverType,
 ): UseSearchPaginationReturn => {
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -50,7 +51,7 @@ export const useSearchPagination = (
         {
           page: currentPage,
           results: results.data,
-          cursor: results.page_info.next_page_cursor,
+          cursor: results.cursor.start_cursor,
         },
       ]);
 
@@ -61,12 +62,12 @@ export const useSearchPagination = (
           selectedEntityTab,
           filterGroup,
           pageSize,
+          nextPageCursor,
           retriever === RetrieverType.Auto ? undefined : retriever,
         );
 
         const res = await triggerSearchPagination({
           ...searchParams,
-          cursor: nextPageCursor,
         }).unwrap();
 
         setResults({
@@ -79,6 +80,7 @@ export const useSearchPagination = (
             search_type: res.search_metadata.search_type,
             description: res.search_metadata.description,
           },
+          cursor: res.cursor,
         });
 
         setCurrentPage((prev) => prev + 1);
@@ -94,7 +96,6 @@ export const useSearchPagination = (
     [
       currentPage,
       results.data,
-      results.page_info.next_page_cursor,
       isLoadingMore,
       debouncedQuery,
       selectedEntityTab,
@@ -103,6 +104,7 @@ export const useSearchPagination = (
       retriever,
       setResults,
       triggerSearchPagination,
+      results.cursor,
     ],
   );
 
@@ -113,16 +115,17 @@ export const useSearchPagination = (
         data: previousPage.results,
         page_info: {
           has_next_page: true,
-          next_page_cursor: previousPage.cursor,
+          next_page_cursor: `'${previousPage.cursor}'`,
         },
         search_metadata: results.search_metadata,
+        cursor: results.cursor,
       });
 
       setCurrentPage((prev) => prev - 1);
 
       setPageHistory((prev) => prev.filter((p) => p.page < currentPage));
     }
-  }, [currentPage, pageHistory, results.search_metadata, setResults]);
+  }, [currentPage, pageHistory, results.search_metadata, setResults, results.cursor]);
 
   const resetPagination = useCallback(() => {
     setCurrentPage(1);

package/src/hooks/useUrlParams.ts

@@ -4,8 +4,6 @@ import { Query } from '@elastic/eui';
 
 import { EntityKind } from '@/types';
 
-import { DEFAULT_ENTITY_TAB, VALID_ENTITY_TYPES } from '../components/WfoSearchPage/constants';
-
 interface UseUrlParamsReturn {
   urlParams: URLSearchParams;
   query: Query | string;
@@ -34,8 +32,8 @@ export const useUrlParams = (): UseUrlParamsReturn => {
   });
 
   const [selectedEntityTab, setSelectedEntityTab] = useState<EntityKind>(() => {
-    const tabParam = urlParams.get('tab') as EntityKind;
-    return tabParam && VALID_ENTITY_TYPES.includes(tabParam) ? tabParam : DEFAULT_ENTITY_TAB;
+    const entityKind = urlParams.get('tab') as EntityKind;
+    return entityKind && Object.values(EntityKind).includes(entityKind) ? entityKind : EntityKind.SUBSCRIPTION;
   });
 
   const [showFilters, setShowFilters] = useState<boolean>(() => {
@@ -59,7 +57,7 @@ export const useUrlParams = (): UseUrlParamsReturn => {
       newParams.set('q', queryText);
     }
 
-    if (selectedEntityTab !== DEFAULT_ENTITY_TAB) {
+    if (selectedEntityTab !== EntityKind.SUBSCRIPTION) {
       newParams.set('tab', selectedEntityTab);
     }