@backstage/plugin-scaffolder-react 1.8.6-next.0 → 1.8.7-next.1

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.8.6-next.0",
+  "version": "1.8.7-next.1",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/index.d.ts

@@ -20,7 +20,7 @@ interface ScaffolderRJSFFieldProps<T = any, S extends StrictRJSFSchema = RJSFSch
     /** The tree of unique ids for every child field */
     idSchema: IdSchema<T>;
     /** The data for this field */
-    formData: T;
+    formData?: T;
     /** The tree of errors for this field and its children */
     errorSchema?: ErrorSchema<T>;
     /** The field change event handler; called with the updated form data and an optional `ErrorSchema` */

package/dist/next/components/Stepper/Stepper.esm.js

@@ -127,7 +127,7 @@ const Stepper = (stepperProps) => {
         step.title
       ));
     }),
-    /* @__PURE__ */ React.createElement(MuiStep, null, /* @__PURE__ */ React.createElement(MuiStepLabel, null, "$", reviewLabel))
+    /* @__PURE__ */ React.createElement(MuiStep, null, /* @__PURE__ */ React.createElement(MuiStepLabel, null, reviewLabel))
   ), /* @__PURE__ */ React.createElement("div", { className: styles.formWrapper }, activeStep < steps.length ? /* @__PURE__ */ React.createElement(
     Form,
     {

package/dist/next/components/Stepper/Stepper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.esm.js","sources":["../../../../src/next/components/Stepper/Stepper.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useAnalytics, useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonValue } from '@backstage/types';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { type IChangeEvent } from '@rjsf/core';\nimport { ErrorSchema } from '@rjsf/utils';\nimport React, {\n  useCallback,\n  useMemo,\n  useState,\n  type ReactNode,\n  ComponentType,\n} from 'react';\nimport {\n  createAsyncValidators,\n  type FormValidation,\n} from './createAsyncValidators';\nimport { ReviewState, type ReviewStateProps } from '../ReviewState';\nimport { useTemplateSchema, useFormDataFromQuery } from '../../hooks';\nimport validator from '@rjsf/validator-ajv8';\nimport { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';\nimport { hasErrors } from './utils';\nimport * as FieldOverrides from './FieldOverrides';\nimport { Form } from '../Form';\nimport {\n  TemplateParameterSchema,\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { ReviewStepProps } from '@backstage/plugin-scaffolder-react';\nimport { ErrorListTemplate } from './ErrorListTemplate';\n\nconst useStyles = makeStyles(theme => ({\n  backButton: {\n    marginRight: theme.spacing(1),\n  },\n  footer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'right',\n    marginTop: theme.spacing(2),\n  },\n  formWrapper: {\n    padding: theme.spacing(2),\n  },\n}));\n\n/**\n * The Props for {@link Stepper} component\n * @alpha\n */\nexport type StepperProps = {\n  manifest: TemplateParameterSchema;\n  extensions: FieldExtensionOptions<any, any>[];\n  /**\n   * @deprecated This was only ever used for analytics tracking purposes, which\n   * is now handled in the `<Workflow />` component. Passing it in will have no\n   * effect.\n   */\n  templateName?: string;\n  formProps?: FormProps;\n  initialState?: Record<string, JsonValue>;\n  onCreate: (values: Record<string, JsonValue>) => Promise<void>;\n  components?: {\n    ReviewStepComponent?: ComponentType<ReviewStepProps>;\n    ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;\n    backButtonText?: ReactNode;\n    createButtonText?: ReactNode;\n    reviewButtonText?: ReactNode;\n  };\n  layouts?: LayoutOptions[];\n};\n\n/**\n * The `Stepper` component is the Wizard that is rendered when a user selects a template\n * @alpha\n */\nexport const Stepper = (stepperProps: StepperProps) => {\n  const { layouts = [], components = {}, ...props } = stepperProps;\n  const {\n    ReviewStateComponent = ReviewState,\n    ReviewStepComponent,\n    backButtonText = 'Back',\n    createButtonText = 'Create',\n    reviewButtonText = 'Review',\n  } = components;\n  const analytics = useAnalytics();\n  const { presentation, steps } = useTemplateSchema(props.manifest);\n  const apiHolder = useApiHolder();\n  const [activeStep, setActiveStep] = useState(0);\n  const [isValidating, setIsValidating] = useState(false);\n  const [formState, setFormState] = useFormDataFromQuery(props.initialState);\n\n  const [errors, setErrors] = useState<undefined | FormValidation>();\n  const styles = useStyles();\n\n  const backLabel =\n    presentation?.buttonLabels?.backButtonText ?? backButtonText;\n  const createLabel =\n    presentation?.buttonLabels?.createButtonText ?? createButtonText;\n  const reviewLabel =\n    presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText;\n\n  const extensions = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, component }) => [name, component]),\n    );\n  }, [props.extensions]);\n\n  const fields = useMemo(\n    () => ({ ...FieldOverrides, ...extensions }),\n    [extensions],\n  );\n\n  const validators = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, validation }) => [name, validation]),\n    );\n  }, [props.extensions]);\n\n  const validation = useMemo(() => {\n    return createAsyncValidators(steps[activeStep]?.mergedSchema, validators, {\n      apiHolder,\n    });\n  }, [steps, activeStep, validators, apiHolder]);\n\n  const handleBack = () => {\n    setActiveStep(prevActiveStep => prevActiveStep - 1);\n  };\n\n  const handleChange = useCallback(\n    (e: IChangeEvent) =>\n      setFormState(current => ({ ...current, ...e.formData })),\n    [setFormState],\n  );\n\n  const handleCreate = useCallback(() => {\n    props.onCreate(formState);\n    analytics.captureEvent('click', `${createLabel}`);\n  }, [props, formState, analytics, createLabel]);\n\n  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });\n\n  const handleNext = async ({\n    formData = {},\n  }: {\n    formData?: Record<string, JsonValue>;\n  }) => {\n    // The validation should never throw, as the validators are wrapped in a try/catch.\n    // This makes it fine to set and unset state without try/catch.\n    setErrors(undefined);\n    setIsValidating(true);\n\n    const returnedValidation = await validation(formData);\n\n    setIsValidating(false);\n\n    if (hasErrors(returnedValidation)) {\n      setErrors(returnedValidation);\n    } else {\n      setErrors(undefined);\n      setActiveStep(prevActiveStep => {\n        const stepNum = prevActiveStep + 1;\n        analytics.captureEvent('click', `Next Step (${stepNum})`);\n        return stepNum;\n      });\n    }\n    setFormState(current => ({ ...current, ...formData }));\n  };\n\n  return (\n    <>\n      {isValidating && <LinearProgress variant=\"indeterminate\" />}\n      <MuiStepper\n        activeStep={activeStep}\n        alternativeLabel\n        variant=\"elevation\"\n        style={{ overflowX: 'auto' }}\n      >\n        {steps.map((step, index) => {\n          const isAllowedLabelClick = activeStep > index;\n          return (\n            <MuiStep key={index}>\n              <MuiStepLabel\n                aria-label={`Step ${index + 1}`}\n                style={{ cursor: isAllowedLabelClick ? 'pointer' : 'default' }}\n                onClick={() => {\n                  if (isAllowedLabelClick) setActiveStep(index);\n                }}\n              >\n                {step.title}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n        <MuiStep>\n          <MuiStepLabel>${reviewLabel}</MuiStepLabel>\n        </MuiStep>\n      </MuiStepper>\n      <div className={styles.formWrapper}>\n        {/* eslint-disable-next-line no-nested-ternary */}\n        {activeStep < steps.length ? (\n          <Form\n            validator={validator}\n            extraErrors={errors as unknown as ErrorSchema}\n            formData={formState}\n            formContext={{ formData: formState }}\n            schema={currentStep.schema}\n            uiSchema={currentStep.uiSchema}\n            onSubmit={handleNext}\n            fields={fields}\n            showErrorList=\"top\"\n            templates={{ ErrorListTemplate }}\n            onChange={handleChange}\n            experimental_defaultFormStateBehavior={{\n              allOf: 'populateDefaults',\n            }}\n            {...(props.formProps ?? {})}\n          >\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1 || isValidating}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={isValidating}\n              >\n                {activeStep === steps.length - 1 ? reviewLabel : 'Next'}\n              </Button>\n            </div>\n          </Form>\n        ) : // TODO: potentially move away from this pattern, deprecate?\n        ReviewStepComponent ? (\n          <ReviewStepComponent\n            disableButtons={isValidating}\n            formData={formState}\n            handleBack={handleBack}\n            handleReset={() => {}}\n            steps={steps}\n            handleCreate={handleCreate}\n          />\n        ) : (\n          <>\n            <ReviewStateComponent formState={formState} schemas={steps} />\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                onClick={handleCreate}\n              >\n                {createLabel}\n              </Button>\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["FieldOverrides","validation"],"mappings":"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"}
+{"version":3,"file":"Stepper.esm.js","sources":["../../../../src/next/components/Stepper/Stepper.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useAnalytics, useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonValue } from '@backstage/types';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { type IChangeEvent } from '@rjsf/core';\nimport { ErrorSchema } from '@rjsf/utils';\nimport React, {\n  useCallback,\n  useMemo,\n  useState,\n  type ReactNode,\n  ComponentType,\n} from 'react';\nimport {\n  createAsyncValidators,\n  type FormValidation,\n} from './createAsyncValidators';\nimport { ReviewState, type ReviewStateProps } from '../ReviewState';\nimport { useTemplateSchema, useFormDataFromQuery } from '../../hooks';\nimport validator from '@rjsf/validator-ajv8';\nimport { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';\nimport { hasErrors } from './utils';\nimport * as FieldOverrides from './FieldOverrides';\nimport { Form } from '../Form';\nimport {\n  TemplateParameterSchema,\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { ReviewStepProps } from '@backstage/plugin-scaffolder-react';\nimport { ErrorListTemplate } from './ErrorListTemplate';\n\nconst useStyles = makeStyles(theme => ({\n  backButton: {\n    marginRight: theme.spacing(1),\n  },\n  footer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'right',\n    marginTop: theme.spacing(2),\n  },\n  formWrapper: {\n    padding: theme.spacing(2),\n  },\n}));\n\n/**\n * The Props for {@link Stepper} component\n * @alpha\n */\nexport type StepperProps = {\n  manifest: TemplateParameterSchema;\n  extensions: FieldExtensionOptions<any, any>[];\n  /**\n   * @deprecated This was only ever used for analytics tracking purposes, which\n   * is now handled in the `<Workflow />` component. Passing it in will have no\n   * effect.\n   */\n  templateName?: string;\n  formProps?: FormProps;\n  initialState?: Record<string, JsonValue>;\n  onCreate: (values: Record<string, JsonValue>) => Promise<void>;\n  components?: {\n    ReviewStepComponent?: ComponentType<ReviewStepProps>;\n    ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;\n    backButtonText?: ReactNode;\n    createButtonText?: ReactNode;\n    reviewButtonText?: ReactNode;\n  };\n  layouts?: LayoutOptions[];\n};\n\n/**\n * The `Stepper` component is the Wizard that is rendered when a user selects a template\n * @alpha\n */\nexport const Stepper = (stepperProps: StepperProps) => {\n  const { layouts = [], components = {}, ...props } = stepperProps;\n  const {\n    ReviewStateComponent = ReviewState,\n    ReviewStepComponent,\n    backButtonText = 'Back',\n    createButtonText = 'Create',\n    reviewButtonText = 'Review',\n  } = components;\n  const analytics = useAnalytics();\n  const { presentation, steps } = useTemplateSchema(props.manifest);\n  const apiHolder = useApiHolder();\n  const [activeStep, setActiveStep] = useState(0);\n  const [isValidating, setIsValidating] = useState(false);\n  const [formState, setFormState] = useFormDataFromQuery(props.initialState);\n\n  const [errors, setErrors] = useState<undefined | FormValidation>();\n  const styles = useStyles();\n\n  const backLabel =\n    presentation?.buttonLabels?.backButtonText ?? backButtonText;\n  const createLabel =\n    presentation?.buttonLabels?.createButtonText ?? createButtonText;\n  const reviewLabel =\n    presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText;\n\n  const extensions = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, component }) => [name, component]),\n    );\n  }, [props.extensions]);\n\n  const fields = useMemo(\n    () => ({ ...FieldOverrides, ...extensions }),\n    [extensions],\n  );\n\n  const validators = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, validation }) => [name, validation]),\n    );\n  }, [props.extensions]);\n\n  const validation = useMemo(() => {\n    return createAsyncValidators(steps[activeStep]?.mergedSchema, validators, {\n      apiHolder,\n    });\n  }, [steps, activeStep, validators, apiHolder]);\n\n  const handleBack = () => {\n    setActiveStep(prevActiveStep => prevActiveStep - 1);\n  };\n\n  const handleChange = useCallback(\n    (e: IChangeEvent) =>\n      setFormState(current => ({ ...current, ...e.formData })),\n    [setFormState],\n  );\n\n  const handleCreate = useCallback(() => {\n    props.onCreate(formState);\n    analytics.captureEvent('click', `${createLabel}`);\n  }, [props, formState, analytics, createLabel]);\n\n  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });\n\n  const handleNext = async ({\n    formData = {},\n  }: {\n    formData?: Record<string, JsonValue>;\n  }) => {\n    // The validation should never throw, as the validators are wrapped in a try/catch.\n    // This makes it fine to set and unset state without try/catch.\n    setErrors(undefined);\n    setIsValidating(true);\n\n    const returnedValidation = await validation(formData);\n\n    setIsValidating(false);\n\n    if (hasErrors(returnedValidation)) {\n      setErrors(returnedValidation);\n    } else {\n      setErrors(undefined);\n      setActiveStep(prevActiveStep => {\n        const stepNum = prevActiveStep + 1;\n        analytics.captureEvent('click', `Next Step (${stepNum})`);\n        return stepNum;\n      });\n    }\n    setFormState(current => ({ ...current, ...formData }));\n  };\n\n  return (\n    <>\n      {isValidating && <LinearProgress variant=\"indeterminate\" />}\n      <MuiStepper\n        activeStep={activeStep}\n        alternativeLabel\n        variant=\"elevation\"\n        style={{ overflowX: 'auto' }}\n      >\n        {steps.map((step, index) => {\n          const isAllowedLabelClick = activeStep > index;\n          return (\n            <MuiStep key={index}>\n              <MuiStepLabel\n                aria-label={`Step ${index + 1}`}\n                style={{ cursor: isAllowedLabelClick ? 'pointer' : 'default' }}\n                onClick={() => {\n                  if (isAllowedLabelClick) setActiveStep(index);\n                }}\n              >\n                {step.title}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n        <MuiStep>\n          <MuiStepLabel>{reviewLabel}</MuiStepLabel>\n        </MuiStep>\n      </MuiStepper>\n      <div className={styles.formWrapper}>\n        {/* eslint-disable-next-line no-nested-ternary */}\n        {activeStep < steps.length ? (\n          <Form\n            validator={validator}\n            extraErrors={errors as unknown as ErrorSchema}\n            formData={formState}\n            formContext={{ formData: formState }}\n            schema={currentStep.schema}\n            uiSchema={currentStep.uiSchema}\n            onSubmit={handleNext}\n            fields={fields}\n            showErrorList=\"top\"\n            templates={{ ErrorListTemplate }}\n            onChange={handleChange}\n            experimental_defaultFormStateBehavior={{\n              allOf: 'populateDefaults',\n            }}\n            {...(props.formProps ?? {})}\n          >\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1 || isValidating}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={isValidating}\n              >\n                {activeStep === steps.length - 1 ? reviewLabel : 'Next'}\n              </Button>\n            </div>\n          </Form>\n        ) : // TODO: potentially move away from this pattern, deprecate?\n        ReviewStepComponent ? (\n          <ReviewStepComponent\n            disableButtons={isValidating}\n            formData={formState}\n            handleBack={handleBack}\n            handleReset={() => {}}\n            steps={steps}\n            handleCreate={handleCreate}\n          />\n        ) : (\n          <>\n            <ReviewStateComponent formState={formState} schemas={steps} />\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                onClick={handleCreate}\n              >\n                {createLabel}\n              </Button>\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["FieldOverrides","validation"],"mappings":"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"}

package/dist/next/components/TemplateCard/TemplateCard.esm.js

@@ -15,6 +15,8 @@ import LanguageIcon from '@material-ui/icons/Language';
 import React, { useCallback } from 'react';
 import { CardHeader } from './CardHeader.esm.js';
 import { CardLink } from './CardLink.esm.js';
+import { usePermission } from '@backstage/plugin-permission-react';
+import { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';
 
 const useStyles = makeStyles((theme) => ({
   box: {
@@ -61,6 +63,9 @@ const TemplateCard = (props) => {
   const hasTags = !!template.metadata.tags?.length;
   const hasLinks = !!props.additionalLinks?.length || !!template.metadata.links?.length;
   const displayDefaultDivider = !hasTags && !hasLinks;
+  const { allowed: canCreateTask } = usePermission({
+    permission: taskCreatePermission
+  });
   const handleChoose = useCallback(() => {
     analytics.captureEvent("click", `Template has been opened`);
     onSelected?.(template);
@@ -96,7 +101,7 @@ const TemplateCard = (props) => {
       defaultKind: "Group",
       hideIcons: true
     }
-  ))), /* @__PURE__ */ React.createElement(
+  ))), canCreateTask ? /* @__PURE__ */ React.createElement(
     Button,
     {
       size: "small",
@@ -105,7 +110,7 @@ const TemplateCard = (props) => {
       onClick: handleChoose
     },
     "Choose"
-  ))));
+  ) : null)));
 };
 
 export { TemplateCard };

package/dist/next/components/TemplateCard/TemplateCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateCard.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCard.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport { MarkdownContent, UserIcon } from '@backstage/core-components';\nimport {\n  IconComponent,\n  useAnalytics,\n  useApp,\n} from '@backstage/core-plugin-api';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Box from '@material-ui/core/Box';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Chip from '@material-ui/core/Chip';\nimport Divider from '@material-ui/core/Divider';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport LanguageIcon from '@material-ui/icons/Language';\nimport React, { useCallback } from 'react';\nimport { CardHeader } from './CardHeader';\nimport { CardLink } from './CardLink';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  box: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: '-webkit-box',\n    '-webkit-line-clamp': 10,\n    '-webkit-box-orient': 'vertical',\n  },\n  markdown: {\n    /** to make the styles for React Markdown not leak into the description */\n    '& :first-child': {\n      margin: 0,\n    },\n  },\n  label: {\n    color: theme.palette.text.secondary,\n    textTransform: 'uppercase',\n    fontWeight: 'bold',\n    letterSpacing: 0.5,\n    lineHeight: 1,\n    fontSize: '0.75rem',\n  },\n  footer: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    flex: 1,\n    alignItems: 'center',\n  },\n  ownedBy: {\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    color: theme.palette.link,\n  },\n}));\n\n/**\n * The Props for the {@link TemplateCard} component\n * @alpha\n */\nexport interface TemplateCardProps {\n  template: TemplateEntityV1beta3;\n  additionalLinks?: {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n\n  onSelected?: (template: TemplateEntityV1beta3) => void;\n}\n\n/**\n * The `TemplateCard` component that is rendered in a list for each template\n * @alpha\n */\nexport const TemplateCard = (props: TemplateCardProps) => {\n  const { onSelected, template } = props;\n  const styles = useStyles();\n  const analytics = useAnalytics();\n  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);\n  const app = useApp();\n  const iconResolver = (key?: string): IconComponent =>\n    key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;\n  const hasTags = !!template.metadata.tags?.length;\n  const hasLinks =\n    !!props.additionalLinks?.length || !!template.metadata.links?.length;\n  const displayDefaultDivider = !hasTags && !hasLinks;\n\n  const handleChoose = useCallback(() => {\n    analytics.captureEvent('click', `Template has been opened`);\n    onSelected?.(template);\n  }, [analytics, onSelected, template]);\n\n  return (\n    <Card>\n      <CardHeader template={template} />\n      <CardContent>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <Box className={styles.box}>\n              <MarkdownContent\n                className={styles.markdown}\n                content={template.metadata.description ?? 'No description'}\n              />\n            </Box>\n          </Grid>\n          {displayDefaultDivider && (\n            <Grid item xs={12}>\n              <Divider data-testid=\"template-card-separator\" />\n            </Grid>\n          )}\n          {hasTags && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--tags\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {template.metadata.tags?.map(tag => (\n                    <Grid key={`grid-${tag}`} item>\n                      <Chip\n                        style={{ margin: 0 }}\n                        size=\"small\"\n                        label={tag}\n                        key={tag}\n                      />\n                    </Grid>\n                  ))}\n                </Grid>\n              </Grid>\n            </>\n          )}\n          {hasLinks && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--links\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {props.additionalLinks?.map(({ icon, text, url }, index) => (\n                    <Grid className={styles.linkText} item xs={6} key={index}>\n                      <CardLink icon={icon} text={text} url={url} />\n                    </Grid>\n                  ))}\n                  {template.metadata.links?.map(\n                    ({ url, icon, title }, index) => (\n                      <Grid className={styles.linkText} item xs={6} key={index}>\n                        <CardLink\n                          icon={iconResolver(icon)}\n                          text={title || url}\n                          url={url}\n                        />\n                      </Grid>\n                    ),\n                  )}\n                </Grid>\n              </Grid>\n            </>\n          )}\n        </Grid>\n      </CardContent>\n      <CardActions style={{ padding: '16px', flex: 1, alignItems: 'flex-end' }}>\n        <div className={styles.footer}>\n          <div className={styles.ownedBy}>\n            {ownedByRelations.length > 0 && (\n              <>\n                <UserIcon fontSize=\"small\" />\n                <EntityRefLinks\n                  style={{ marginLeft: '8px' }}\n                  entityRefs={ownedByRelations}\n                  defaultKind=\"Group\"\n                  hideIcons\n                />\n              </>\n            )}\n          </div>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={handleChoose}\n          >\n            Choose\n          </Button>\n        </div>\n      </CardActions>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateCard.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCard.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport { MarkdownContent, UserIcon } from '@backstage/core-components';\nimport {\n  IconComponent,\n  useAnalytics,\n  useApp,\n} from '@backstage/core-plugin-api';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Box from '@material-ui/core/Box';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Chip from '@material-ui/core/Chip';\nimport Divider from '@material-ui/core/Divider';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport LanguageIcon from '@material-ui/icons/Language';\nimport React, { useCallback } from 'react';\nimport { CardHeader } from './CardHeader';\nimport { CardLink } from './CardLink';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  box: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: '-webkit-box',\n    '-webkit-line-clamp': 10,\n    '-webkit-box-orient': 'vertical',\n  },\n  markdown: {\n    /** to make the styles for React Markdown not leak into the description */\n    '& :first-child': {\n      margin: 0,\n    },\n  },\n  label: {\n    color: theme.palette.text.secondary,\n    textTransform: 'uppercase',\n    fontWeight: 'bold',\n    letterSpacing: 0.5,\n    lineHeight: 1,\n    fontSize: '0.75rem',\n  },\n  footer: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    flex: 1,\n    alignItems: 'center',\n  },\n  ownedBy: {\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    color: theme.palette.link,\n  },\n}));\n\n/**\n * The Props for the {@link TemplateCard} component\n * @alpha\n */\nexport interface TemplateCardProps {\n  template: TemplateEntityV1beta3;\n  additionalLinks?: {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n\n  onSelected?: (template: TemplateEntityV1beta3) => void;\n}\n\n/**\n * The `TemplateCard` component that is rendered in a list for each template\n * @alpha\n */\nexport const TemplateCard = (props: TemplateCardProps) => {\n  const { onSelected, template } = props;\n  const styles = useStyles();\n  const analytics = useAnalytics();\n  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);\n  const app = useApp();\n  const iconResolver = (key?: string): IconComponent =>\n    key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;\n  const hasTags = !!template.metadata.tags?.length;\n  const hasLinks =\n    !!props.additionalLinks?.length || !!template.metadata.links?.length;\n  const displayDefaultDivider = !hasTags && !hasLinks;\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n  const handleChoose = useCallback(() => {\n    analytics.captureEvent('click', `Template has been opened`);\n    onSelected?.(template);\n  }, [analytics, onSelected, template]);\n\n  return (\n    <Card>\n      <CardHeader template={template} />\n      <CardContent>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <Box className={styles.box}>\n              <MarkdownContent\n                className={styles.markdown}\n                content={template.metadata.description ?? 'No description'}\n              />\n            </Box>\n          </Grid>\n          {displayDefaultDivider && (\n            <Grid item xs={12}>\n              <Divider data-testid=\"template-card-separator\" />\n            </Grid>\n          )}\n          {hasTags && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--tags\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {template.metadata.tags?.map(tag => (\n                    <Grid key={`grid-${tag}`} item>\n                      <Chip\n                        style={{ margin: 0 }}\n                        size=\"small\"\n                        label={tag}\n                        key={tag}\n                      />\n                    </Grid>\n                  ))}\n                </Grid>\n              </Grid>\n            </>\n          )}\n          {hasLinks && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--links\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {props.additionalLinks?.map(({ icon, text, url }, index) => (\n                    <Grid className={styles.linkText} item xs={6} key={index}>\n                      <CardLink icon={icon} text={text} url={url} />\n                    </Grid>\n                  ))}\n                  {template.metadata.links?.map(\n                    ({ url, icon, title }, index) => (\n                      <Grid className={styles.linkText} item xs={6} key={index}>\n                        <CardLink\n                          icon={iconResolver(icon)}\n                          text={title || url}\n                          url={url}\n                        />\n                      </Grid>\n                    ),\n                  )}\n                </Grid>\n              </Grid>\n            </>\n          )}\n        </Grid>\n      </CardContent>\n      <CardActions style={{ padding: '16px', flex: 1, alignItems: 'flex-end' }}>\n        <div className={styles.footer}>\n          <div className={styles.ownedBy}>\n            {ownedByRelations.length > 0 && (\n              <>\n                <UserIcon fontSize=\"small\" />\n                <EntityRefLinks\n                  style={{ marginLeft: '8px' }}\n                  entityRefs={ownedByRelations}\n                  defaultKind=\"Group\"\n                  hideIcons\n                />\n              </>\n            )}\n          </div>\n          {canCreateTask ? (\n            <Button\n              size=\"small\"\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={handleChoose}\n            >\n              Choose\n            </Button>\n          ) : null}\n        </div>\n      </CardActions>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.8.6-next.0",
+  "version": "1.8.7-next.1",
   "description": "A frontend library that helps other Backstage plugins interact with the Scaffolder",
   "backstage": {
     "role": "web-library"
@@ -53,7 +53,8 @@
     "@backstage/core-components": "^0.14.8-next.0",
     "@backstage/core-plugin-api": "^1.9.2",
     "@backstage/plugin-catalog-react": "^1.12.1-next.0",
-    "@backstage/plugin-scaffolder-common": "^1.5.2",
+    "@backstage/plugin-permission-react": "^0.4.22",
+    "@backstage/plugin-scaffolder-common": "^1.5.3-next.0",
     "@backstage/theme": "^0.5.6-next.0",
     "@backstage/types": "^1.1.1",
     "@backstage/version-bridge": "^1.0.8",
@@ -82,17 +83,19 @@
     "zod-to-json-schema": "^3.20.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.26.6-next.0",
+    "@backstage/cli": "^0.26.7-next.1",
     "@backstage/core-app-api": "^1.12.5",
-    "@backstage/plugin-catalog": "^1.20.1-next.0",
+    "@backstage/plugin-catalog": "^1.20.1-next.1",
     "@backstage/plugin-catalog-common": "^1.0.23",
+    "@backstage/plugin-permission-common": "^0.7.13",
     "@backstage/test-utils": "^1.5.6-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/humanize-duration": "^3.18.1",
-    "@types/luxon": "^3.0.0"
+    "@types/luxon": "^3.0.0",
+    "swr": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",