@tduniec/plugin-template-designer-foundation 0.1.1

package/dist/state/useTemplateState.esm.js

@@ -0,0 +1,627 @@
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { convertJsonToYaml, convertYamlToJson } from '../utils/yamlJsonConversion.esm.js';
+import { SAMPLE_TEMPLATE_BLUEPRINT } from '../utils/sampleTemplate.esm.js';
+import { cloneDeep, FILE_PICKER_TYPES, asRecord, isTaskStep, cloneSteps, downloadString, DEFAULT_FILE_NAME } from './templateUtils.esm.js';
+import { useApi } from '@backstage/core-plugin-api';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+
+const parseTemplateYaml = (value) => {
+  const parsed = JSON.parse(convertYamlToJson(value));
+  if (!parsed || typeof parsed !== "object") {
+    throw new Error("Template YAML must describe an object");
+  }
+  return parsed;
+};
+const useTemplateState = () => {
+  const [templateObject, setTemplateObject] = useState(null);
+  const [templateYaml, setTemplateYaml] = useState("");
+  const [yamlError, setYamlError] = useState();
+  const [loadError, setLoadError] = useState();
+  const [isDirty, setIsDirty] = useState(false);
+  const [templateSource, setTemplateSource] = useState();
+  const [isReloading, setIsReloading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const templateObjectRef = useRef(null);
+  const yamlParseTimeoutRef = useRef(
+    null
+  );
+  const yamlSerializeTimeoutRef = useRef(
+    null
+  );
+  const yamlParseIdleCancelRef = useRef(null);
+  const yamlSerializeIdleCancelRef = useRef(null);
+  const yamlParseCompletionRef = useRef(null);
+  const yamlSerializeCompletionRef = useRef(null);
+  const syncingCounterRef = useRef(0);
+  const catalogApi = useApi(catalogApiRef);
+  const [selectedTemplate, setSelectedTemplate] = useState(void 0);
+  const [availableTemplates, setAvailableTemplates] = useState([]);
+  const fileInputRef = useRef(null);
+  const ensureHandlePermission = useCallback(
+    async (handle, mode) => {
+      if (!handle || !handle.queryPermission || !handle.requestPermission) {
+        return true;
+      }
+      const options = { mode };
+      const current = await handle.queryPermission(options);
+      if (current === "granted") {
+        return true;
+      }
+      const request = await handle.requestPermission(options);
+      return request === "granted";
+    },
+    []
+  );
+  const applyTemplate = useCallback(
+    (template, source) => {
+      const nextTemplate = cloneDeep(template);
+      const nextYaml = convertJsonToYaml(nextTemplate);
+      templateObjectRef.current = nextTemplate;
+      setTemplateObject(nextTemplate);
+      setTemplateYaml(nextYaml);
+      setYamlError(void 0);
+      setLoadError(void 0);
+      setTemplateSource(source);
+      setIsDirty(false);
+    },
+    []
+  );
+  const confirmDiscardChanges = useCallback(() => {
+    if (!templateObject || !isDirty) {
+      return true;
+    }
+    if (typeof window === "undefined") {
+      return true;
+    }
+    return window.confirm(
+      "This will discard the changes you have made. Continue?"
+    );
+  }, [isDirty, templateObject]);
+  const startSyncTask = useCallback(() => {
+    syncingCounterRef.current += 1;
+    if (syncingCounterRef.current === 1) {
+      setIsSyncing(true);
+    }
+    return () => {
+      syncingCounterRef.current = Math.max(syncingCounterRef.current - 1, 0);
+      if (syncingCounterRef.current === 0) {
+        setIsSyncing(false);
+      }
+    };
+  }, []);
+  const scheduleYamlParse = useCallback(
+    (nextYaml) => {
+      if (yamlParseTimeoutRef.current) {
+        clearTimeout(yamlParseTimeoutRef.current);
+      }
+      if (yamlParseIdleCancelRef.current) {
+        yamlParseIdleCancelRef.current();
+        yamlParseIdleCancelRef.current = null;
+      }
+      if (yamlParseCompletionRef.current) {
+        yamlParseCompletionRef.current();
+        yamlParseCompletionRef.current = null;
+      }
+      yamlParseCompletionRef.current = startSyncTask();
+      yamlParseTimeoutRef.current = setTimeout(() => {
+        yamlParseTimeoutRef.current = null;
+        const runParse = () => {
+          try {
+            const parsed = parseTemplateYaml(nextYaml);
+            templateObjectRef.current = parsed;
+            setTemplateObject(parsed);
+            setYamlError(void 0);
+          } catch (error) {
+            const message = error instanceof Error ? error.message : "Unknown error parsing YAML";
+            setYamlError(message);
+          }
+          if (yamlParseCompletionRef.current) {
+            yamlParseCompletionRef.current();
+            yamlParseCompletionRef.current = null;
+          }
+        };
+        const idle = typeof window !== "undefined" && typeof window.requestIdleCallback === "function";
+        if (idle) {
+          const handle = window.requestIdleCallback(runParse, {
+            timeout: 800
+          });
+          yamlParseIdleCancelRef.current = () => {
+            window.cancelIdleCallback?.(handle);
+            if (yamlParseCompletionRef.current) {
+              yamlParseCompletionRef.current();
+              yamlParseCompletionRef.current = null;
+            }
+          };
+          return;
+        }
+        runParse();
+      }, 450);
+    },
+    [startSyncTask]
+  );
+  const scheduleYamlSerialization = useCallback(
+    (nextTemplate) => {
+      if (yamlSerializeTimeoutRef.current) {
+        clearTimeout(yamlSerializeTimeoutRef.current);
+      }
+      if (yamlSerializeIdleCancelRef.current) {
+        yamlSerializeIdleCancelRef.current();
+        yamlSerializeIdleCancelRef.current = null;
+      }
+      if (yamlSerializeCompletionRef.current) {
+        yamlSerializeCompletionRef.current();
+        yamlSerializeCompletionRef.current = null;
+      }
+      yamlSerializeCompletionRef.current = startSyncTask();
+      yamlSerializeTimeoutRef.current = setTimeout(() => {
+        yamlSerializeTimeoutRef.current = null;
+        if (!nextTemplate) {
+          setTemplateYaml("");
+          if (yamlSerializeCompletionRef.current) {
+            yamlSerializeCompletionRef.current();
+            yamlSerializeCompletionRef.current = null;
+          }
+          return;
+        }
+        const runSerialize = () => {
+          try {
+            setTemplateYaml(convertJsonToYaml(nextTemplate));
+          } catch (error) {
+            const message = error instanceof Error ? error.message : "Unknown error updating YAML";
+            setLoadError(message);
+          }
+          if (yamlSerializeCompletionRef.current) {
+            yamlSerializeCompletionRef.current();
+            yamlSerializeCompletionRef.current = null;
+          }
+        };
+        const idle = typeof window !== "undefined" && typeof window.requestIdleCallback === "function";
+        if (idle) {
+          const handle = window.requestIdleCallback(runSerialize, {
+            timeout: 800
+          });
+          yamlSerializeIdleCancelRef.current = () => {
+            window.cancelIdleCallback?.(handle);
+            if (yamlSerializeCompletionRef.current) {
+              yamlSerializeCompletionRef.current();
+              yamlSerializeCompletionRef.current = null;
+            }
+          };
+          return;
+        }
+        runSerialize();
+      }, 250);
+    },
+    [startSyncTask]
+  );
+  const flushPendingYamlSerialization = useCallback(() => {
+    if (yamlSerializeTimeoutRef.current) {
+      clearTimeout(yamlSerializeTimeoutRef.current);
+      yamlSerializeTimeoutRef.current = null;
+    }
+    if (yamlSerializeIdleCancelRef.current) {
+      yamlSerializeIdleCancelRef.current();
+      yamlSerializeIdleCancelRef.current = null;
+    }
+    if (yamlSerializeCompletionRef.current) {
+      yamlSerializeCompletionRef.current();
+      yamlSerializeCompletionRef.current = null;
+    }
+    const latest = templateObjectRef.current;
+    if (!latest) {
+      setTemplateYaml("");
+      return "";
+    }
+    try {
+      const serialized = convertJsonToYaml(latest);
+      setTemplateYaml(serialized);
+      return serialized;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error updating YAML";
+      setLoadError(message);
+      return templateYaml;
+    }
+  }, [templateYaml]);
+  useEffect(() => {
+    return () => {
+      if (yamlParseTimeoutRef.current) {
+        clearTimeout(yamlParseTimeoutRef.current);
+      }
+      if (yamlParseIdleCancelRef.current) {
+        yamlParseIdleCancelRef.current();
+      }
+      if (yamlParseCompletionRef.current) {
+        yamlParseCompletionRef.current();
+        yamlParseCompletionRef.current = null;
+      }
+      if (yamlSerializeTimeoutRef.current) {
+        clearTimeout(yamlSerializeTimeoutRef.current);
+      }
+      if (yamlSerializeIdleCancelRef.current) {
+        yamlSerializeIdleCancelRef.current();
+      }
+      if (yamlSerializeCompletionRef.current) {
+        yamlSerializeCompletionRef.current();
+        yamlSerializeCompletionRef.current = null;
+      }
+      syncingCounterRef.current = 0;
+      setIsSyncing(false);
+    };
+  }, []);
+  useEffect(() => {
+    templateObjectRef.current = templateObject;
+  }, [templateObject]);
+  const handleStartSampleTemplate = useCallback(() => {
+    if (!confirmDiscardChanges()) {
+      return;
+    }
+    applyTemplate(SAMPLE_TEMPLATE_BLUEPRINT, {
+      type: "sample",
+      label: "Sample template"
+    });
+  }, [applyTemplate, confirmDiscardChanges]);
+  const handleTemplateFileSelected = useCallback(
+    async (event) => {
+      const file = event.target.files?.[0];
+      event.target.value = "";
+      if (!file) {
+        return;
+      }
+      if (!confirmDiscardChanges()) {
+        return;
+      }
+      try {
+        const fileContents = await file.text();
+        const parsed = parseTemplateYaml(fileContents);
+        applyTemplate(parsed, {
+          type: "file",
+          label: file.name
+        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Unknown error loading template";
+        setLoadError(`Could not load template: ${message}`);
+      }
+    },
+    [applyTemplate, confirmDiscardChanges]
+  );
+  const handleOpenTemplatePicker = useCallback(async () => {
+    if (!confirmDiscardChanges()) {
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+    const fsWindow = window;
+    if (fsWindow.showOpenFilePicker) {
+      try {
+        const handles = await fsWindow.showOpenFilePicker({
+          multiple: false,
+          types: FILE_PICKER_TYPES
+        });
+        const [handle] = handles ?? [];
+        if (!handle) {
+          return;
+        }
+        const granted = await ensureHandlePermission(handle, "read");
+        if (!granted) {
+          setLoadError("Permission to read the selected file was denied.");
+          return;
+        }
+        const file = await handle.getFile();
+        const text = await file.text();
+        const parsed = parseTemplateYaml(text);
+        applyTemplate(parsed, {
+          type: "file",
+          label: handle.name ?? file.name,
+          handle
+        });
+      } catch (error) {
+        if (error instanceof DOMException && error.name === "AbortError") {
+          return;
+        }
+        const message = error instanceof Error ? error.message : "Unknown error loading template";
+        setLoadError(`Could not load template: ${message}`);
+      }
+      return;
+    }
+    fileInputRef.current?.click();
+  }, [applyTemplate, confirmDiscardChanges, ensureHandlePermission]);
+  const templateSteps = useMemo(() => {
+    if (!templateObject) {
+      return [];
+    }
+    const template = asRecord(templateObject);
+    if (!template) {
+      return [];
+    }
+    const spec = asRecord(template.spec);
+    if (!spec) {
+      return [];
+    }
+    const maybeSteps = spec.steps;
+    if (!Array.isArray(maybeSteps)) {
+      return [];
+    }
+    const validSteps = maybeSteps.filter(isTaskStep);
+    return cloneSteps(validSteps);
+  }, [templateObject]);
+  const templateParameters = useMemo(() => {
+    if (!templateObject) {
+      return void 0;
+    }
+    const template = asRecord(templateObject);
+    if (!template) {
+      return void 0;
+    }
+    const spec = asRecord(template.spec);
+    if (!spec) {
+      return void 0;
+    }
+    if (!Object.prototype.hasOwnProperty.call(spec, "parameters")) {
+      return void 0;
+    }
+    const rawParameters = spec.parameters;
+    if (rawParameters === void 0) {
+      return void 0;
+    }
+    return cloneDeep(rawParameters);
+  }, [templateObject]);
+  const templateOutput = useMemo(() => {
+    if (!templateObject) {
+      return void 0;
+    }
+    const template = asRecord(templateObject);
+    if (!template) {
+      return void 0;
+    }
+    const spec = asRecord(template.spec);
+    if (!spec) {
+      return void 0;
+    }
+    const rawOutput = spec.output;
+    if (!rawOutput || typeof rawOutput !== "object") {
+      return void 0;
+    }
+    return cloneDeep(rawOutput);
+  }, [templateObject]);
+  const handleYamlChange = useCallback(
+    (value) => {
+      setTemplateYaml(value);
+      setIsDirty(true);
+      scheduleYamlParse(value);
+    },
+    [scheduleYamlParse]
+  );
+  const handleStepsChange = useCallback(
+    (steps) => {
+      setIsDirty(true);
+      setTemplateObject((prevTemplate) => {
+        const base = prevTemplate && typeof prevTemplate === "object" ? cloneDeep(prevTemplate) : {};
+        const spec = asRecord(base.spec) ?? {};
+        const nextSteps = cloneSteps(steps);
+        const nextTemplate = {
+          ...base,
+          spec: {
+            ...spec,
+            steps: nextSteps
+          }
+        };
+        templateObjectRef.current = nextTemplate;
+        scheduleYamlSerialization(nextTemplate);
+        return nextTemplate;
+      });
+    },
+    [scheduleYamlSerialization]
+  );
+  const handleParametersChange = useCallback(
+    (parameters) => {
+      setIsDirty(true);
+      setTemplateObject((prevTemplate) => {
+        const base = prevTemplate && typeof prevTemplate === "object" ? cloneDeep(prevTemplate) : {};
+        const spec = asRecord(base.spec) ?? {};
+        const nextTemplate = {
+          ...base,
+          spec: {
+            ...spec,
+            parameters: cloneDeep(parameters)
+          }
+        };
+        templateObjectRef.current = nextTemplate;
+        scheduleYamlSerialization(nextTemplate);
+        return nextTemplate;
+      });
+    },
+    [scheduleYamlSerialization]
+  );
+  const handleOutputChange = useCallback(
+    (output) => {
+      setIsDirty(true);
+      setTemplateObject((prevTemplate) => {
+        const base = prevTemplate && typeof prevTemplate === "object" ? cloneDeep(prevTemplate) : {};
+        const spec = asRecord(base.spec) ?? {};
+        const nextTemplate = {
+          ...base,
+          spec: {
+            ...spec,
+            output: cloneDeep(output)
+          }
+        };
+        templateObjectRef.current = nextTemplate;
+        scheduleYamlSerialization(nextTemplate);
+        return nextTemplate;
+      });
+    },
+    [scheduleYamlSerialization]
+  );
+  const handleReloadFromFile = useCallback(async () => {
+    if (!templateSource) {
+      return;
+    }
+    if (templateSource.type === "catalog") {
+      if (selectedTemplate) {
+        applyTemplate(selectedTemplate, {
+          type: "catalog",
+          label: selectedTemplate.metadata.title ?? selectedTemplate.metadata.name
+        });
+      }
+      return;
+    }
+    if (templateSource.type !== "file") {
+      handleStartSampleTemplate();
+      return;
+    }
+    if (!templateSource.handle) {
+      handleOpenTemplatePicker();
+      return;
+    }
+    if (!confirmDiscardChanges()) {
+      return;
+    }
+    try {
+      setIsReloading(true);
+      const granted = await ensureHandlePermission(
+        templateSource.handle,
+        "read"
+      );
+      if (!granted) {
+        setLoadError("Permission to read the selected file was denied.");
+        return;
+      }
+      const file = await templateSource.handle.getFile();
+      const text = await file.text();
+      const parsed = parseTemplateYaml(text);
+      applyTemplate(parsed, {
+        type: "file",
+        label: templateSource.handle.name ?? file.name ?? templateSource.label,
+        handle: templateSource.handle
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error reloading template";
+      setLoadError(`Could not reload template: ${message}`);
+    } finally {
+      setIsReloading(false);
+    }
+  }, [
+    applyTemplate,
+    confirmDiscardChanges,
+    ensureHandlePermission,
+    handleOpenTemplatePicker,
+    handleStartSampleTemplate,
+    selectedTemplate,
+    templateSource
+  ]);
+  const handleSaveTemplate = useCallback(async () => {
+    if (!templateObject) {
+      return;
+    }
+    const yamlToPersist = flushPendingYamlSerialization();
+    if (typeof window === "undefined") {
+      downloadString(yamlToPersist, DEFAULT_FILE_NAME);
+      setIsDirty(false);
+      return;
+    }
+    try {
+      setIsSaving(true);
+      setLoadError(void 0);
+      const fsWindow = window;
+      if (templateSource?.type === "file" && templateSource.handle) {
+        const granted = await ensureHandlePermission(
+          templateSource.handle,
+          "readwrite"
+        );
+        if (!granted) {
+          setLoadError("Permission to save to the selected file was denied.");
+          return;
+        }
+        const writable = await templateSource.handle.createWritable?.();
+        if (!writable) {
+          throw new Error("Unable to open file for writing.");
+        }
+        await writable.write(yamlToPersist);
+        await writable.close();
+        setIsDirty(false);
+        return;
+      }
+      if (fsWindow.showSaveFilePicker) {
+        const handle = await fsWindow.showSaveFilePicker({
+          suggestedName: templateSource?.label ?? DEFAULT_FILE_NAME,
+          types: FILE_PICKER_TYPES
+        });
+        const writable = await handle.createWritable?.();
+        if (!writable) {
+          throw new Error("Unable to open file for writing.");
+        }
+        await writable.write(yamlToPersist);
+        await writable.close();
+        setTemplateSource({
+          type: "file",
+          label: handle.name ?? templateSource?.label ?? DEFAULT_FILE_NAME,
+          handle
+        });
+        setIsDirty(false);
+        return;
+      }
+      downloadString(yamlToPersist, templateSource?.label ?? DEFAULT_FILE_NAME);
+      setIsDirty(false);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error saving template";
+      setLoadError(`Failed to save template: ${message}`);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    ensureHandlePermission,
+    flushPendingYamlSerialization,
+    templateObject,
+    templateSource
+  ]);
+  useEffect(() => {
+    catalogApi.getEntities({
+      filter: {
+        kind: "Template"
+      }
+    }).then((data) => {
+      setAvailableTemplates(data.items);
+    }).catch(() => setAvailableTemplates([]));
+  }, [catalogApi]);
+  const selectCatalogTemplate = useCallback(
+    (selected) => {
+      setSelectedTemplate(selected);
+      applyTemplate(selected, {
+        type: "catalog",
+        label: selected.metadata.title ?? selected.metadata.name
+      });
+    },
+    [applyTemplate]
+  );
+  return {
+    templateObject,
+    templateYaml,
+    yamlError,
+    loadError,
+    isDirty,
+    templateSource,
+    isReloading,
+    isSaving,
+    isSyncing,
+    templateSteps,
+    templateParameters,
+    templateOutput,
+    fileInputRef,
+    handleStartSampleTemplate,
+    handleTemplateFileSelected,
+    handleOpenTemplatePicker,
+    handleYamlChange,
+    handleStepsChange,
+    handleParametersChange,
+    handleOutputChange,
+    handleReloadFromFile,
+    handleSaveTemplate,
+    availableTemplates,
+    selectCatalogTemplate
+  };
+};
+
+export { useTemplateState };
+//# sourceMappingURL=useTemplateState.esm.js.map