@backstage/plugin-scaffolder-react 0.0.0-nightly-20230111022819

package/dist/index.esm.js

@@ -0,0 +1,571 @@
+import { attachComponentData, createApiRef, useElementFilter, useApi, featureFlagsApiRef, useAnalytics, useApiHolder, useApp } from '@backstage/core-plugin-api';
+import { createVersionedContext, createVersionedValueMap, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
+import React, { useState, useContext, useCallback, useMemo } from 'react';
+import { makeStyles, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, Typography } from '@material-ui/core';
+import { withTheme } from '@rjsf/core-v5';
+import { Draft07 } from 'json-schema-library';
+import { StructuredMetadataTable, ItemCardHeader, Link, MarkdownContent, UserIcon, Content, ItemCardGrid, ContentHeader } from '@backstage/core-components';
+import validator from '@rjsf/validator-ajv6';
+import qs from 'qs';
+import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+import { FavoriteEntity, getEntityRelations, EntityRefLinks } from '@backstage/plugin-catalog-react';
+import LanguageIcon from '@material-ui/icons/Language';
+
+const FIELD_EXTENSION_WRAPPER_KEY = "scaffolder.extensions.wrapper.v1";
+const FIELD_EXTENSION_KEY = "scaffolder.extensions.field.v1";
+
+function createScaffolderFieldExtension(options) {
+  return {
+    expose() {
+      const FieldExtensionDataHolder = () => null;
+      attachComponentData(
+        FieldExtensionDataHolder,
+        FIELD_EXTENSION_KEY,
+        options
+      );
+      return FieldExtensionDataHolder;
+    }
+  };
+}
+const ScaffolderFieldExtensions = () => null;
+attachComponentData(
+  ScaffolderFieldExtensions,
+  FIELD_EXTENSION_WRAPPER_KEY,
+  true
+);
+
+const SecretsContext = createVersionedContext("secrets-context");
+const SecretsContextProvider = ({ children }) => {
+  const [secrets, setSecrets] = useState({});
+  return /* @__PURE__ */ React.createElement(
+    SecretsContext.Provider,
+    {
+      value: createVersionedValueMap({ 1: { secrets, setSecrets } })
+    },
+    children
+  );
+};
+const useTemplateSecrets = () => {
+  var _a;
+  const value = (_a = useContext(SecretsContext)) == null ? void 0 : _a.atVersion(1);
+  if (!value) {
+    throw new Error(
+      "useTemplateSecrets must be used within a SecretsContextProvider"
+    );
+  }
+  const { setSecrets: updateSecrets, secrets = {} } = value;
+  const setSecrets = useCallback(
+    (input) => {
+      updateSecrets((currentSecrets) => ({ ...currentSecrets, ...input }));
+    },
+    [updateSecrets]
+  );
+  return { setSecrets, secrets };
+};
+
+const scaffolderApiRef = getOrCreateGlobalSingleton(
+  "scaffolder:scaffolder-api-ref",
+  () => createApiRef({
+    id: "plugin.scaffolder.service"
+  })
+);
+
+const useCustomFieldExtensions = (outlet) => {
+  return useElementFilter(
+    outlet,
+    (elements) => elements.selectByComponentData({
+      key: FIELD_EXTENSION_WRAPPER_KEY
+    }).findComponentData({
+      key: FIELD_EXTENSION_KEY
+    })
+  );
+};
+
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function extractUiSchema(schema, uiSchema) {
+  if (!isObject(schema)) {
+    return;
+  }
+  const { properties, items, anyOf, oneOf, allOf, dependencies } = schema;
+  for (const propName in schema) {
+    if (!schema.hasOwnProperty(propName)) {
+      continue;
+    }
+    if (propName.startsWith("ui:")) {
+      uiSchema[propName] = schema[propName];
+      delete schema[propName];
+    }
+  }
+  if (isObject(properties)) {
+    for (const propName in properties) {
+      if (!properties.hasOwnProperty(propName)) {
+        continue;
+      }
+      const schemaNode = properties[propName];
+      if (!isObject(schemaNode)) {
+        continue;
+      }
+      const innerUiSchema = {};
+      uiSchema[propName] = innerUiSchema;
+      extractUiSchema(schemaNode, innerUiSchema);
+    }
+  }
+  if (isObject(items)) {
+    const innerUiSchema = {};
+    uiSchema.items = innerUiSchema;
+    extractUiSchema(items, innerUiSchema);
+  }
+  if (Array.isArray(anyOf)) {
+    for (const schemaNode of anyOf) {
+      if (!isObject(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+  if (Array.isArray(oneOf)) {
+    for (const schemaNode of oneOf) {
+      if (!isObject(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+  if (Array.isArray(allOf)) {
+    for (const schemaNode of allOf) {
+      if (!isObject(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+  if (isObject(dependencies)) {
+    for (const depName of Object.keys(dependencies)) {
+      const schemaNode = dependencies[depName];
+      if (!isObject(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+}
+const extractSchemaFromStep = (inputStep) => {
+  const uiSchema = {};
+  const returnSchema = JSON.parse(JSON.stringify(inputStep));
+  extractUiSchema(returnSchema, uiSchema);
+  return { uiSchema, schema: returnSchema };
+};
+const createFieldValidation = () => {
+  const fieldValidation = {
+    __errors: [],
+    addError: (message) => {
+      var _a;
+      (_a = fieldValidation.__errors) == null ? void 0 : _a.push(message);
+    }
+  };
+  return fieldValidation;
+};
+
+const createAsyncValidators = (rootSchema, validators, context) => {
+  async function validate(formData, pathPrefix = "#") {
+    const parsedSchema = new Draft07(rootSchema);
+    const formValidation = {};
+    for (const [key, value] of Object.entries(formData)) {
+      const definitionInSchema = parsedSchema.getSchema(
+        `${pathPrefix}/${key}`,
+        formData
+      );
+      if (definitionInSchema && "ui:field" in definitionInSchema) {
+        const validator = validators[definitionInSchema["ui:field"]];
+        if (validator) {
+          const fieldValidation = createFieldValidation();
+          try {
+            await validator(value, fieldValidation, { ...context, formData });
+          } catch (ex) {
+            fieldValidation.addError(ex.message);
+          }
+          formValidation[key] = fieldValidation;
+        }
+      }
+    }
+    return formValidation;
+  }
+  return async (formData) => {
+    return await validate(formData);
+  };
+};
+
+const useTemplateSchema = (manifest) => {
+  const featureFlags = useApi(featureFlagsApiRef);
+  const steps = manifest.steps.map(({ title, description, schema }) => ({
+    title,
+    description,
+    mergedSchema: schema,
+    ...extractSchemaFromStep(schema)
+  }));
+  const returningSteps = steps.filter((step) => {
+    var _a;
+    const stepFeatureFlag = (_a = step.uiSchema["ui:backstage"]) == null ? void 0 : _a.featureFlag;
+    return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
+  }).map((step) => ({
+    ...step,
+    schema: {
+      ...step.schema,
+      // Title is rendered at the top of the page, so let's ignore this from jsonschemaform
+      title: void 0,
+      properties: Object.fromEntries(
+        Object.entries(step.schema.properties).filter(
+          ([key]) => {
+            var _a, _b;
+            const stepFeatureFlag = (_b = (_a = step.uiSchema[key]) == null ? void 0 : _a["ui:backstage"]) == null ? void 0 : _b.featureFlag;
+            return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
+          }
+        )
+      )
+    }
+  }));
+  return {
+    steps: returningSteps
+  };
+};
+
+const ReviewState = (props) => {
+  const reviewData = Object.fromEntries(
+    Object.entries(props.formState).map(([key, value]) => {
+      var _a;
+      for (const step of props.schemas) {
+        const parsedSchema = new Draft07(step.mergedSchema);
+        const definitionInSchema = parsedSchema.getSchema(
+          `#/${key}`,
+          props.formState
+        );
+        if (definitionInSchema) {
+          const backstageReviewOptions = (_a = definitionInSchema["ui:backstage"]) == null ? void 0 : _a.review;
+          if (backstageReviewOptions) {
+            if (backstageReviewOptions.mask) {
+              return [key, backstageReviewOptions.mask];
+            }
+            if (backstageReviewOptions.show === false) {
+              return [];
+            }
+          }
+          if (definitionInSchema["ui:widget"] === "password") {
+            return [key, "******"];
+          }
+        }
+      }
+      return [key, value];
+    })
+  );
+  return /* @__PURE__ */ React.createElement(StructuredMetadataTable, { metadata: reviewData });
+};
+
+const useFormDataFromQuery = (initialState) => {
+  return useState(() => {
+    if (initialState) {
+      return initialState;
+    }
+    const query = qs.parse(window.location.search, {
+      ignoreQueryPrefix: true
+    });
+    try {
+      return JSON.parse(query.formData);
+    } catch (e) {
+      return {};
+    }
+  });
+};
+
+const useStyles$3 = makeStyles((theme) => ({
+  backButton: {
+    marginRight: theme.spacing(1)
+  },
+  footer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "right"
+  },
+  formWrapper: {
+    padding: theme.spacing(2)
+  }
+}));
+const Form = withTheme(require("@rjsf/material-ui-v5").Theme);
+const Stepper = (props) => {
+  var _a;
+  const analytics = useAnalytics();
+  const { steps } = useTemplateSchema(props.manifest);
+  const apiHolder = useApiHolder();
+  const [activeStep, setActiveStep] = useState(0);
+  const [formState, setFormState] = useFormDataFromQuery(props.initialState);
+  const [errors, setErrors] = useState();
+  const styles = useStyles$3();
+  const extensions = useMemo(() => {
+    return Object.fromEntries(
+      props.extensions.map(({ name, component }) => [name, component])
+    );
+  }, [props.extensions]);
+  const validators = useMemo(() => {
+    return Object.fromEntries(
+      props.extensions.map(({ name, validation: validation2 }) => [name, validation2])
+    );
+  }, [props.extensions]);
+  const validation = useMemo(() => {
+    var _a2;
+    return createAsyncValidators((_a2 = steps[activeStep]) == null ? void 0 : _a2.mergedSchema, validators, {
+      apiHolder
+    });
+  }, [steps, activeStep, validators, apiHolder]);
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+  const handleChange = useCallback(
+    (e) => setFormState((current) => ({ ...current, ...e.formData })),
+    [setFormState]
+  );
+  const handleNext = async ({
+    formData
+  }) => {
+    setErrors(void 0);
+    const returnedValidation = await validation(formData);
+    const hasErrors = Object.values(returnedValidation).some(
+      (i) => {
+        var _a2;
+        return (_a2 = i.__errors) == null ? void 0 : _a2.length;
+      }
+    );
+    if (hasErrors) {
+      setErrors(returnedValidation);
+    } else {
+      setErrors(void 0);
+      setActiveStep((prevActiveStep) => {
+        const stepNum = prevActiveStep + 1;
+        analytics.captureEvent("click", `Next Step (${stepNum})`);
+        return stepNum;
+      });
+    }
+    setFormState((current) => ({ ...current, ...formData }));
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper$1, { activeStep, alternativeLabel: true, variant: "elevation" }, steps.map((step, index) => /* @__PURE__ */ React.createElement(Step, { key: index }, /* @__PURE__ */ React.createElement(StepLabel, null, step.title))), /* @__PURE__ */ React.createElement(Step, null, /* @__PURE__ */ React.createElement(StepLabel, null, "Review"))), /* @__PURE__ */ React.createElement("div", { className: styles.formWrapper }, activeStep < steps.length ? /* @__PURE__ */ React.createElement(
+    Form,
+    {
+      validator,
+      extraErrors: errors,
+      formData: formState,
+      formContext: { formData: formState },
+      schema: steps[activeStep].schema,
+      uiSchema: steps[activeStep].uiSchema,
+      onSubmit: handleNext,
+      fields: extensions,
+      showErrorList: false,
+      onChange: handleChange,
+      ...(_a = props.FormProps) != null ? _a : {}
+    },
+    /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleBack,
+        className: styles.backButton,
+        disabled: activeStep < 1
+      },
+      "Back"
+    ), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", type: "submit" }, activeStep === steps.length - 1 ? "Review" : "Next"))
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ReviewState, { formState, schemas: steps }), /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: handleBack,
+      className: styles.backButton,
+      disabled: activeStep < 1
+    },
+    "Back"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      onClick: () => {
+        var _a2;
+        props.onComplete(formState);
+        const name = typeof formState.name === "string" ? formState.name : void 0;
+        analytics.captureEvent(
+          "create",
+          (_a2 = name != null ? name : props.templateName) != null ? _a2 : "unknown"
+        );
+      }
+    },
+    "Create"
+  )))));
+};
+
+const useStyles$2 = makeStyles(
+  () => ({
+    header: {
+      backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage
+    },
+    subtitleWrapper: {
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  })
+);
+const CardHeader = (props) => {
+  const {
+    template: {
+      metadata: { title, name },
+      spec: { type }
+    }
+  } = props;
+  const { getPageTheme } = useTheme();
+  const themeForType = getPageTheme({ themeId: type });
+  const styles = useStyles$2({
+    cardBackgroundImage: themeForType.backgroundImage
+  });
+  const SubtitleComponent = /* @__PURE__ */ React.createElement("div", { className: styles.subtitleWrapper }, /* @__PURE__ */ React.createElement("div", null, type), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FavoriteEntity, { entity: props.template, style: { padding: 0 } })));
+  return /* @__PURE__ */ React.createElement(
+    ItemCardHeader,
+    {
+      title: title != null ? title : name,
+      subtitle: SubtitleComponent,
+      classes: { root: styles.header }
+    }
+  );
+};
+
+const useStyles$1 = makeStyles(() => ({
+  linkText: {
+    display: "inline-flex",
+    alignItems: "center"
+  }
+}));
+const CardLink = ({ icon: Icon, text, url }) => {
+  const styles = useStyles$1();
+  return /* @__PURE__ */ React.createElement("div", { className: styles.linkText }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(Link, { style: { marginLeft: "8px" }, to: url }, text || url));
+};
+
+const useStyles = makeStyles((theme) => ({
+  box: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    "-webkit-line-clamp": 10,
+    "-webkit-box-orient": "vertical"
+  },
+  markdown: {
+    /** to make the styles for React Markdown not leak into the description */
+    "& :first-child": {
+      margin: 0
+    }
+  },
+  label: {
+    color: theme.palette.text.secondary,
+    textTransform: "uppercase",
+    fontWeight: "bold",
+    letterSpacing: 0.5,
+    lineHeight: 1,
+    fontSize: "0.75rem"
+  },
+  footer: {
+    display: "flex",
+    justifyContent: "space-between",
+    flex: 1,
+    alignItems: "center"
+  },
+  ownedBy: {
+    display: "flex",
+    alignItems: "center",
+    flex: 1,
+    color: theme.palette.link
+  }
+}));
+const TemplateCard = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { template } = props;
+  const styles = useStyles();
+  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
+  const app = useApp();
+  const iconResolver = (key) => {
+    var _a2;
+    return key ? (_a2 = app.getSystemIcon(key)) != null ? _a2 : LanguageIcon : LanguageIcon;
+  };
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { template }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Box, { className: styles.box }, /* @__PURE__ */ React.createElement(
+    MarkdownContent,
+    {
+      className: styles.markdown,
+      content: (_a = template.metadata.description) != null ? _a : "No description"
+    }
+  ))), ((_c = (_b = template.metadata.tags) == null ? void 0 : _b.length) != null ? _c : 0) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_d = template.metadata.tags) == null ? void 0 : _d.map((tag) => /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Chip,
+    {
+      style: { margin: 0 },
+      size: "small",
+      label: tag,
+      key: tag
+    }
+  )))))), (props.additionalLinks || ((_e = template.metadata.links) == null ? void 0 : _e.length)) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_f = props.additionalLinks) == null ? void 0 : _f.map(({ icon, text, url }) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6 }, /* @__PURE__ */ React.createElement(CardLink, { icon, text, url }))), (_g = template.metadata.links) == null ? void 0 : _g.map(({ url, icon, title }) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6 }, /* @__PURE__ */ React.createElement(
+    CardLink,
+    {
+      icon: iconResolver(icon),
+      text: title || url,
+      url
+    }
+  )))))))), /* @__PURE__ */ React.createElement(CardActions, { style: { padding: "16px" } }, /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement("div", { className: styles.ownedBy }, ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UserIcon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(
+    EntityRefLinks,
+    {
+      style: { marginLeft: "8px" },
+      entityRefs: ownedByRelations,
+      defaultKind: "Group"
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "small",
+      variant: "outlined",
+      color: "primary",
+      onClick: () => {
+        var _a2;
+        return (_a2 = props.onSelected) == null ? void 0 : _a2.call(props, template);
+      }
+    },
+    "Choose"
+  ))));
+};
+
+const TemplateGroup = (props) => {
+  const {
+    templates,
+    title,
+    components: { CardComponent } = {},
+    onSelected
+  } = props;
+  const titleComponent = typeof title === "string" ? /* @__PURE__ */ React.createElement(ContentHeader, { title }) : title;
+  if (templates.length === 0) {
+    return /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-templates/adding-templates" }, "adding templates"), "."));
+  }
+  const Card = CardComponent || TemplateCard;
+  return /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, templates.map(({ template, additionalLinks }) => /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      key: stringifyEntityRef(template),
+      additionalLinks,
+      template,
+      onSelected
+    }
+  ))));
+};
+
+function createNextScaffolderFieldExtension(options) {
+  return {
+    expose() {
+      const FieldExtensionDataHolder = () => null;
+      attachComponentData(
+        FieldExtensionDataHolder,
+        FIELD_EXTENSION_KEY,
+        options
+      );
+      return FieldExtensionDataHolder;
+    }
+  };
+}
+
+export { ReviewState, ScaffolderFieldExtensions, SecretsContextProvider, Stepper, TemplateCard, TemplateGroup, createFieldValidation, createNextScaffolderFieldExtension, createScaffolderFieldExtension, extractSchemaFromStep, scaffolderApiRef, useCustomFieldExtensions, useFormDataFromQuery, useTemplateSchema, useTemplateSecrets };
+//# sourceMappingURL=index.esm.js.map