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

package/src/pages/index.ts

@@ -5,3 +5,4 @@ export * from './startPage';
 export * from './subscriptions';
 export * from './tasks';
 export * from './workflows';
+export * from './WfoSearchPocPage';

package/src/pages/processes/WfoProcessDetail.tsx

@@ -11,7 +11,6 @@ import {
   TimelineItem,
   WfoIsAllowedToRender,
   WfoLoading,
-  WfoProcessListNoteEdit,
   WfoTimeline,
   WfoTitleWithWebsocketBadge,
 } from '@/components';
@@ -181,15 +180,16 @@ export const WfoProcessDetail = ({
   return (
     <>
       <WfoContentHeader
-        title={<WfoTitleWithWebsocketBadge title={pageTitle} />}
-        subtitle={
-          <>
-            <WfoProcessListNoteEdit processId={processDetail?.processId || ''} note={processDetail?.note || ''} />
-            <WfoProductInformationWithLink
-              productNames={productNames}
-              workflowName={processDetail?.workflowName ?? ''}
-            />
-          </>
+        title={
+          <WfoTitleWithWebsocketBadge
+            title={pageTitle}
+            extraElement={
+              <WfoProductInformationWithLink
+                productNames={productNames}
+                workflowName={processDetail?.workflowName ?? ''}
+              />
+            }
+          />
         }
       >
         <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -59,6 +59,7 @@ export const WfoProcessDetailPage = ({ processId }: WfoProcessDetailPageProps) =
             ref={stepListRef}
             lastStatus={processDetail.lastStatus}
             processId={processDetail.processId}
+            workflowName={processDetail.workflowName}
             steps={groupedSteps.flatMap((groupedStep) => groupedStep.steps)}
             traceBack={processDetail.traceback}
             userInputForm={processDetail.form}

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';
 
-import { WfoError, WfoLoading } from '@/components';
+import { WfoError, WfoPageWithUserGuide } from '@/components';
 import { WfoPydanticForm } from '@/components/WfoPydanticForm';
 import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
 import { getWorkflowStepsStyles } from '@/components/WfoWorkflowSteps/styles';
@@ -140,25 +140,21 @@ export const WfoStartProcessPage = ({ processName, isTask = false }: WfoStartPro
       timelineItems={timeLineItems}
       isLoading={isLoading}
     >
-      <EuiPanel
-        css={{
-          backgroundColor: theme.colors.backgroundBaseNeutral,
-          marginTop: theme.base * 3,
-        }}
-      >
-        <EuiFlexGroup css={getStepHeaderStyle(false)}>
-          <WfoStepStatusIcon stepStatus={StepStatus.FORM} />
-
-          <EuiFlexItem grow={0}>
-            <EuiText css={stepListContentBoldTextStyle}>{t('userInput')}</EuiText>
-            <EuiText>{t(isTask ? 'submitTaskFormLabel' : 'submitWorkflowFormLabel')}</EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiHorizontalRule />
-        {(hasError && <WfoError />) || (
+      <WfoPageWithUserGuide workflowName={processName}>
+        <EuiPanel css={{ backgroundColor: theme.colors.backgroundBaseNeutral }}>
+          <EuiFlexGroup gutterSize="none" css={getStepHeaderStyle(false)}>
+            <WfoStepStatusIcon stepStatus={StepStatus.FORM} />
+            <EuiFlexItem grow={0}>
+              <EuiText css={stepListContentBoldTextStyle}>{t('userInput')}</EuiText>
+              <EuiText>{t(isTask ? 'submitTaskFormLabel' : 'submitWorkflowFormLabel')}</EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiHorizontalRule />
+          {(hasError && <WfoError />) || (
             <WfoPydanticForm processName={processName} startProcessPayload={startProcessPayload} isTask={isTask} />
-          ) || <WfoLoading />}
-      </EuiPanel>
+          )}
+        </EuiPanel>
+      </WfoPageWithUserGuide>
     </WfoProcessDetail>
   );
 };

package/src/rtk/api.ts

@@ -22,6 +22,7 @@ export enum HttpStatus {
   FormNotComplete = 510,
   BadGateway = 502,
   BadRequest = 400,
+  PreconditionFailed = 412,
   ServiceUnavailable = 503,
   Unauthorized = 401,
   Forbidden = 403,

package/src/rtk/endpoints/index.ts

@@ -20,3 +20,4 @@ export * from './forms';
 export * from './fileUpload';
 export * from './search';
 export * from './availability';
+export * from './workflowGuides';

package/src/rtk/endpoints/search.ts

@@ -2,7 +2,7 @@ import { getEndpointPath } from '@/components/WfoSearchPage/utils';
 import { BaseQueryTypes, orchestratorApi } from '@/rtk';
 import {
   EntityKind,
-  Group,
+  Filter,
   PaginatedSearchResults,
   PathAutocompleteResponse,
   RetrieverType,
@@ -10,14 +10,20 @@ import {
 } from '@/types';
 
 export interface SearchPayload {
+  order_by?: {
+    element: string;
+    direction: string;
+  };
+  response_columns: string[];
   entity_type: EntityKind;
   query: string;
-  filters?: Group;
-  limit?: number;
+  filters?: Filter;
+  limit?: number | number[];
   retriever?: RetrieverType;
+  cursor?: string;
 }
 
-export interface SearchPaginationPayload extends SearchPayload {
+export interface SearchPaginationPayload extends Omit<SearchPayload, 'cursor'> {
   cursor: number;
 }
 
@@ -30,15 +36,39 @@ export interface SearchDefinitionsResponse {
 
 const searchApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
-    search: build.mutation<PaginatedSearchResults, SearchPayload>({
-      query: ({ entity_type, query, filters, limit, retriever }) => ({
-        url: `search/${getEndpointPath(entity_type)}`,
+    search: build.query<PaginatedSearchResults, SearchPayload>({
+      query: ({ entity_type, query, filters, limit, retriever, response_columns, order_by, cursor }) => ({
+        url: `search/${getEndpointPath(entity_type)}${cursor ? `?cursor=${cursor}` : ''}`,
         method: 'POST',
-        body: { query, filters, limit, retriever },
+        body: {
+          query,
+          filters,
+          limit: cursor ? undefined : limit,
+          retriever,
+          order_by: order_by && !query ? order_by : undefined,
+          response_columns,
+        },
         headers: {
           'Content-Type': 'application/json',
         },
       }),
+      serializeQueryArgs: ({ queryArgs, endpointName }) => {
+        // Strip cursor so every page of the same base search shares one cache entry.
+        const rest = { ...queryArgs };
+        delete rest.cursor;
+        return { endpointName, queryArgs: rest };
+      },
+      merge: (currentCache, newItems, { arg }) => {
+        if (!arg.cursor) {
+          Object.assign(currentCache, newItems);
+          return;
+        }
+        currentCache.data.push(...newItems.data);
+        currentCache.page_info = newItems.page_info;
+        currentCache.cursor = newItems.cursor;
+        currentCache.search_metadata = newItems.search_metadata;
+      },
+      forceRefetch: ({ currentArg, previousArg }) => currentArg?.cursor !== previousArg?.cursor,
       extraOptions: {
         baseQueryType: BaseQueryTypes.fetch,
       },
@@ -77,5 +107,10 @@ const searchApi = orchestratorApi.injectEndpoints({
   }),
 });
 
-export const { useSearchMutation, useSearchWithPaginationMutation, useSearchPathsQuery, useSearchDefinitionsQuery } =
-  searchApi;
+export const {
+  useSearchQuery,
+  useLazySearchQuery,
+  useSearchWithPaginationMutation,
+  useSearchPathsQuery,
+  useSearchDefinitionsQuery,
+} = searchApi;

package/src/rtk/endpoints/workflowGuides.ts

@@ -0,0 +1,25 @@
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+
+export interface WorkflowGuideResponse {
+  content: string;
+}
+
+const workflowGuidesApi = orchestratorApi.injectEndpoints({
+  endpoints: (build) => ({
+    getWorkflowGuide: build.query<WorkflowGuideResponse, { workflowName: string }>({
+      query: ({ workflowName }) => ({
+        url: `surf/workflow_user_guides/${workflowName}`,
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }),
+      transformResponse: (content: string): WorkflowGuideResponse => ({ content: content ?? '' }),
+      extraOptions: {
+        baseQueryType: BaseQueryTypes.fetch,
+      },
+    }),
+  }),
+});
+
+export const { useGetWorkflowGuideQuery } = workflowGuidesApi;

package/src/types/search.ts

@@ -1,4 +1,9 @@
-export type EntityKind = 'SUBSCRIPTION' | 'PRODUCT' | 'WORKFLOW' | 'PROCESS';
+export enum EntityKind {
+  SUBSCRIPTION = 'SUBSCRIPTION',
+  PRODUCT = 'PRODUCT',
+  WORKFLOW = 'WORKFLOW',
+  PROCESS = 'PROCESS',
+}
 
 export enum RetrieverType {
   Auto = 'auto',
@@ -20,14 +25,20 @@ export interface SearchResult {
   score: number;
   perfect_match: number;
   matching_field?: MatchingField | null;
+  response_columns: Record<string, string | number | null>;
 }
 
 /** Paginated search results */
 export type PaginatedSearchResults = {
   data: SearchResult[];
+  cursor: {
+    total_items: number;
+    start_cursor: number;
+    end_cursor: number;
+  };
   page_info: {
     has_next_page: boolean;
-    next_page_cursor: number | null;
+    next_page_cursor: string | null;
   };
   search_metadata: {
     search_type: string | null;
@@ -78,12 +89,17 @@ export type PathFilter = {
     | LtreeMatchesFilter;
 };
 
+export interface OperatorDisplay {
+  symbol: string;
+  description: string;
+}
+
 type ActionType = 'select';
 
 type BaseSearchParameters = {
   query?: string | null;
 
-  filters?: PathFilter[] | Group | null;
+  filters?: PathFilter[] | Filter | null;
 
   action: ActionType;
 };
@@ -116,9 +132,9 @@ export type Condition = {
   condition: { op: string; value?: unknown };
 };
 
-export type Group = {
+export type Filter = {
   op: 'AND' | 'OR';
-  children: Array<Group | Condition>;
+  children: Array<Filter | Condition>;
 };
 
 export type value_schema = {

package/src/types/types.ts

@@ -588,6 +588,7 @@ export type OrchestratorConfig = {
   useWebSockets: boolean;
   useThemeToggle: boolean;
   showWorkflowInformationLink: boolean;
+  showWorkflowUserGuide: boolean;
   enableSupportMenuItem: boolean;
   supportMenuItemUrl: string;
   enableAoStackStatus: boolean;
@@ -600,14 +601,21 @@ export enum ColorModes {
   DARK = 'DARK',
 }
 
+export interface SubscriptionRelation {
+  subscription_id: string;
+  subscription_description: string;
+}
+
+// TODO: remove locked_relations and unterminated_in_use_by_subscriptions (UUID-only fields) when orchestrator-core 6.0.0 is released and only use the _detail variants
 export interface SubscriptionAction {
   name: string;
   description: string;
   reason?: string;
   usable_when?: string[];
   locked_relations?: string[];
-  unterminated_parents?: string[];
+  locked_relations_detail?: SubscriptionRelation[];
   unterminated_in_use_by_subscriptions?: string[];
+  unterminated_in_use_by_subscriptions_detail?: SubscriptionRelation[];
   status?: string;
   action?: string;
 }
@@ -615,6 +623,7 @@ export interface SubscriptionAction {
 export type SubscriptionActions = {
   reason?: string;
   locked_relations?: string[];
+  locked_relations_detail?: SubscriptionRelation[];
   modify: SubscriptionAction[];
   terminate: SubscriptionAction[];
   system: SubscriptionAction[];