fix(orchestrator): clarify ActiveText retrigger loading

Author: lokanandaprabhu

workspaces/orchestrator/.changeset/activetext-retrigger-loading-indicator.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets': patch
+---
+
+Clarify ActiveText retrigger loading by showing a spinner with a wait message while dependencies resolve.

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/useFetchAndEvaluate.ts

@@ -34,11 +34,23 @@ export const useFetchAndEvaluate = (
   handleFetchEnded?: () => void,
 ) => {
   const unitEvaluator = useTemplateUnitEvaluator();
+  const hasFetchUrl = !!uiProps['fetch:url'];
+  const hasRetrigger =
+    Array.isArray(uiProps['fetch:retrigger']) &&
+    uiProps['fetch:retrigger'].length > 0;
   const retrigger = useRetriggerEvaluate(
     unitEvaluator,
     formData,
     uiProps['fetch:retrigger'] as string[],
   );
+  const retriggerSatisfied =
+    !hasRetrigger ||
+    (!!retrigger &&
+      retrigger.every(
+        value => value !== undefined && value !== null && value !== '',
+      ));
+  const waitingForRetrigger =
+    hasFetchUrl && hasRetrigger && !retriggerSatisfied;
   const {
     data,
     error: fetchError,
@@ -50,7 +62,7 @@ export const useFetchAndEvaluate = (
   useDebounce(
     () => {
       const evaluate = async () => {
-        if (!retrigger || fetchLoading || fetchError) {
+        if (!retrigger || fetchLoading || fetchError || waitingForRetrigger) {
           return;
         }
         try {
@@ -82,6 +94,7 @@ export const useFetchAndEvaluate = (
       retrigger,
       fetchError,
       fetchLoading,
+      waitingForRetrigger,
       fieldId,
       data,
       formData,
@@ -108,6 +121,7 @@ export const useFetchAndEvaluate = (
   return {
     text: resultText,
     loading: completeLoading,
+    waitingForRetrigger,
     error: error ?? fetchError,
   };
 };

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveText.tsx

@@ -21,6 +21,7 @@ import type { JSONSchema7 } from 'json-schema';
 import { UiProps } from '../uiPropTypes';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { ErrorText } from './ErrorText';
 import { OrchestratorFormContextProps } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-api';
 import { useFetchAndEvaluate } from '../utils';
@@ -37,7 +38,7 @@ export const ActiveText: Widget<
   const handleFetchStarted = formContext?.handleFetchStarted;
   const handleFetchEnded = formContext?.handleFetchEnded;
 
-  const { text, error, loading } = useFetchAndEvaluate(
+  const { text, error, loading, waitingForRetrigger } = useFetchAndEvaluate(
     uiProps['ui:text'] ?? '',
     formData ?? {},
     uiProps,
@@ -59,13 +60,21 @@ export const ActiveText: Widget<
     return <ErrorText id={id} text={error} />;
   }
 
-  return (
-    <Box data-testid={id}>
-      {loading ? (
-        <CircularProgress size={20} />
-      ) : (
-        <MarkdownContent content={text || ''} />
-      )}
-    </Box>
-  );
+  let content: React.ReactNode;
+  if (waitingForRetrigger) {
+    content = (
+      <Box display="flex" alignItems="center" gap={1}>
+        <CircularProgress size={16} />
+        <Typography variant="body2" color="textSecondary">
+          Waiting for dependency values to resolve.
+        </Typography>
+      </Box>
+    );
+  } else if (loading) {
+    content = <CircularProgress size={20} />;
+  } else {
+    content = <MarkdownContent content={text || ''} />;
+  }
+
+  return <Box data-testid={id}>{content}</Box>;
 };