Add learning resources creator

fec.config.js

@@ -31,6 +31,7 @@ module.exports = {
         __dirname,
         './src/components/GlobalLearningResourcesPage/GlobalLearningResourcesPage'
       ),
+      './Creator': path.resolve(__dirname, './src/Creator.tsx'),
     },
     exclude: ['react-router-dom'],
     shared: [

package.json

@@ -20,7 +20,10 @@
     "postinstall": "ts-patch install"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "5.2.0-prerelease.3",
+    "@data-driven-forms/pf4-component-mapper": "^3.23.0",
+    "@data-driven-forms/react-form-renderer": "^3.23.0",
+    "@patternfly/quickstarts": "^5.4.0-prerelease.1",
+    "@patternfly/react-code-editor": "^5.1.2",
     "@patternfly/react-core": "^5.1.2",
     "@patternfly/react-table": "^5.1.1",
     "@redhat-cloud-services/frontend-components": "^4.2.9",
@@ -31,7 +34,8 @@
     "axios": "^1.6.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "yaml": "^2.4.5"
   },
   "devDependencies": {
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^2.0.3",

src/Creator.scss

@@ -0,0 +1,19 @@
+.rc-step-header {
+  color: var(--pf-v5-global--primary-color--100);
+}
+
+.rc-step-index {
+  display: inline-flex;
+  border-radius: 100%;
+  background: var(--pf-v5-global--primary-color--100);
+  color: var(--pf-v5-global--Color--light-100);
+  width: 1.5em;
+  height: 1.5em;
+  justify-content: center;
+  margin-inline-end: var(--pf-v5-global--spacer--sm);
+}
+
+.rc-tile-preview-wrapper {
+  width: 300px;
+  height: fit-content;
+}

src/Creator.tsx

@@ -0,0 +1,244 @@
+import React, { useMemo, useState } from 'react';
+import YAML, { YAMLError } from 'yaml';
+import {
+  Grid,
+  GridItem,
+  PageGroup,
+  PageSection,
+  Title,
+} from '@patternfly/react-core';
+import './Creator.scss';
+import './components/CatalogSection.scss';
+import {
+  QuickStart,
+  QuickStartSpec,
+  QuickStartTask,
+} from '@patternfly/quickstarts';
+import CreatorWizard, { EMPTY_TASK } from './components/creator/CreatorWizard';
+import { ItemKind, itemKindMeta } from './components/creator/meta';
+import CreatorPreview from './components/creator/CreatorPreview';
+
+export type CreatorErrors = {
+  taskErrors: Map<number, string>;
+};
+
+const BASE_METADATA = {
+  name: 'test-quickstart',
+};
+
+function makeDemoQuickStart(
+  type: ItemKind | null,
+  baseQuickStart: QuickStart,
+  taskContents: string[]
+): [QuickStart, CreatorErrors] {
+  const selectedTypeMeta = type !== null ? itemKindMeta[type] : null;
+
+  const [tasks, taskErrors] = (() => {
+    if (selectedTypeMeta?.hasTasks !== true) return [undefined, new Map()];
+
+    const out: QuickStartTask[] = [];
+    const errors: CreatorErrors['taskErrors'] = new Map();
+
+    if (baseQuickStart.spec.tasks !== undefined) {
+      for (let index = 0; index < baseQuickStart.spec.tasks.length; ++index) {
+        const task = baseQuickStart.spec.tasks[index];
+
+        try {
+          out.push({
+            ...YAML.parse(taskContents[index]),
+            title: task.title,
+          });
+        } catch (e) {
+          if (!(e instanceof YAMLError)) throw e;
+
+          out.push({ ...EMPTY_TASK, title: task.title });
+          errors.set(index, e.message);
+        }
+      }
+    }
+
+    return [out, errors];
+  })();
+
+  return [
+    {
+      ...baseQuickStart,
+      metadata: {
+        ...baseQuickStart.metadata,
+        name: 'test-quickstart',
+        ...(selectedTypeMeta?.extraMetadata ?? {}),
+      },
+      spec: {
+        ...baseQuickStart.spec,
+        tasks: tasks,
+      },
+    },
+    { taskErrors },
+  ];
+}
+
+const Creator = () => {
+  const [rawType, setRawType] = useState<ItemKind | null>(null);
+
+  const [rawQuickStart, setRawQuickStart] = useState<QuickStart>({
+    metadata: {
+      name: 'test-quickstart',
+    },
+    spec: {
+      displayName: '',
+      icon: null,
+      description: '',
+    },
+  });
+
+  const selectedType =
+    rawType !== null ? { id: rawType, meta: itemKindMeta[rawType] } : null;
+
+  const [bundles, setBundles] = useState<string[]>([]);
+  const [taskContents, setTaskContents] = useState<string[]>([]);
+
+  const [currentTask, setCurrentTask] = useState<number | null>(null);
+
+  const updateSpec = (
+    updater: (old: QuickStartSpec) => Partial<QuickStartSpec>
+  ) => {
+    setRawQuickStart((old) => ({
+      ...old,
+      spec: {
+        ...old.spec,
+        ...updater(old.spec),
+      },
+    }));
+  };
+
+  const setType = (newType: ItemKind | null) => {
+    if (newType !== null) {
+      const meta = itemKindMeta[newType];
+
+      setRawQuickStart((old) => {
+        const updates: Partial<QuickStart> = {};
+
+        updates.spec = { ...old.spec };
+
+        updates.spec.type = {
+          text: meta.displayName,
+          color: meta.tagColor,
+        };
+
+        if (
+          meta.hasTasks &&
+          (old.spec.tasks === undefined || old.spec.tasks.length === 0)
+        ) {
+          updates.spec.tasks = [EMPTY_TASK];
+        }
+
+        if (!meta.hasTasks) {
+          updates.spec.tasks = undefined;
+          updates.spec.introduction = undefined;
+          updates.spec.prerequisites = [];
+        }
+
+        if (!meta.fields.url) updates.spec.link = undefined;
+        if (!meta.fields.duration) updates.spec.durationMinutes = undefined;
+
+        updates.metadata = { ...BASE_METADATA, ...meta.extraMetadata };
+
+        return { ...old, ...updates };
+      });
+
+      if (meta.hasTasks) {
+        setTaskContents((old) => (old.length === 0 ? [''] : old));
+      } else if (!meta.hasTasks) {
+        setTaskContents([]);
+      }
+    }
+
+    setRawType(newType);
+  };
+
+  const [quickStart, errors] = useMemo(
+    () => makeDemoQuickStart(rawType, rawQuickStart, taskContents),
+    [rawType, rawQuickStart, taskContents]
+  );
+
+  const files = useMemo(() => {
+    const effectiveName = quickStart.spec.displayName
+      .toLowerCase()
+      .replaceAll(/\s/g, '-')
+      .replaceAll(/(^-+)|(-+$)/g, '');
+
+    const adjustedQuickstart = { ...quickStart };
+    adjustedQuickstart.spec = { ...adjustedQuickstart.spec };
+    adjustedQuickstart.metadata = {
+      ...adjustedQuickstart.metadata,
+      name: effectiveName,
+    };
+
+    delete adjustedQuickstart.spec['icon'];
+
+    return [
+      {
+        name: 'metadata.yaml',
+        content: YAML.stringify({
+          kind: 'QuickStarts',
+          name: effectiveName,
+          tags: [
+            bundles
+              .toSorted()
+              .map((bundle) => ({ kind: 'bundle', value: bundle })),
+          ],
+        }),
+      },
+      {
+        name: `${effectiveName}.yaml`,
+        content: YAML.stringify(adjustedQuickstart),
+      },
+    ];
+  }, [quickStart, bundles]);
+
+  if ((quickStart.spec.tasks?.length ?? 0) != taskContents.length) {
+    throw new Error(
+      `Mismatch between quickstart tasks and task contents: ${quickStart.spec.tasks?.length} vs ${taskContents.length}`
+    );
+  }
+
+  return (
+    <PageGroup>
+      <PageSection variant="darker">
+        <Title headingLevel="h1" size="2xl">
+          Add new learning resources
+        </Title>
+
+        <p>Description</p>
+      </PageSection>
+
+      <PageSection isFilled>
+        <Grid hasGutter className="pf-v5-u-h-100 pf-v5-u-w-100">
+          <GridItem span={12} lg={6}>
+            <CreatorWizard
+              onChangeType={setType}
+              onChangeQuickStartSpec={(spec) => {
+                updateSpec(() => spec);
+              }}
+              onChangeBundles={setBundles}
+              onChangeTaskContents={setTaskContents}
+              onChangeCurrentTask={setCurrentTask}
+              errors={errors}
+              files={files}
+            />
+          </GridItem>
+
+          <GridItem span={12} lg={6}>
+            <CreatorPreview
+              typeMeta={selectedType?.meta ?? null}
+              quickStart={quickStart}
+              currentTask={currentTask}
+            />
+          </GridItem>
+        </Grid>
+      </PageSection>
+    </PageGroup>
+  );
+};
+
+export default Creator;