@backstage/plugin-scaffolder-react 1.15.0-next.1 → 1.15.0

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 { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport {\n  FieldExtensionOptions,\n  FormProps,\n  LayoutOptions,\n  ReviewStepProps,\n  TemplateParameterSchema,\n} from '@backstage/plugin-scaffolder-react';\nimport { JsonValue } from '@backstage/types';\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { type IChangeEvent } from '@rjsf/core';\nimport { ErrorSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvErrors from 'ajv-errors';\nimport { merge } from 'lodash';\nimport React, {\n  ComponentType,\n  useCallback,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\nimport { useFormDataFromQuery, useTemplateSchema } from '../../hooks';\nimport { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';\nimport { Form } from '../Form';\nimport { PasswordWidget } from '../PasswordWidget/PasswordWidget';\nimport { ReviewState, type ReviewStateProps } from '../ReviewState';\nimport {\n  createAsyncValidators,\n  type FormValidation,\n} from './createAsyncValidators';\nimport { ErrorListTemplate } from './ErrorListTemplate';\nimport * as FieldOverrides from './FieldOverrides';\nimport { hasErrors } from './utils';\n\nconst validator = customizeValidator();\najvErrors(validator.ajv);\n\n/** @alpha */\nexport type BackstageTemplateStepperClassKey =\n  | 'backButton'\n  | 'footer'\n  | 'formWrapper';\n\nconst useStyles = makeStyles(\n  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  { name: 'BackstageTemplateStepper' },\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 { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const { layouts = [], components = {}, onCreate, ...props } = stepperProps;\n  const {\n    ReviewStateComponent = ReviewState,\n    ReviewStepComponent,\n    backButtonText = t('stepper.backButtonText'),\n    createButtonText = t('stepper.createButtonText'),\n    reviewButtonText = t('stepper.reviewButtonText'),\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 [initialState] = useFormDataFromQuery(props.initialState);\n  const [stepsState, setStepsState] =\n    useState<Record<string, JsonValue>>(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 = useCallback(() => {\n    setActiveStep(prevActiveStep => prevActiveStep - 1);\n  }, [setActiveStep]);\n\n  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });\n\n  const {\n    formContext: propFormContext,\n    uiSchema: propUiSchema,\n    liveOmit: _shouldLiveOmit,\n    omitExtraData: _shouldOmitExtraData,\n    ...restFormProps\n  } = props.formProps ?? {};\n\n  const handleChange = useCallback(\n    (e: IChangeEvent) => {\n      setStepsState(current => {\n        return { ...current, ...e.formData };\n      });\n    },\n    [setStepsState],\n  );\n\n  const handleNext = useCallback(\n    async ({ formData = {} }: { formData?: Record<string, JsonValue> }) => {\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      setStepsState(current => ({\n        ...current,\n        ...formData,\n      }));\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    },\n    [validation, analytics],\n  );\n\n  const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);\n\n  const [isCreating, setIsCreating] = useState(false);\n\n  const handleCreate = useCallback(async () => {\n    setIsCreating(true);\n    analytics.captureEvent('click', `${createLabel}`);\n    try {\n      await onCreate(stepsState);\n    } finally {\n      setIsCreating(false);\n    }\n  }, [analytics, createLabel, onCreate, stepsState]);\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={t('stepper.stepIndexLabel', { index: 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            key={activeStep}\n            validator={validator}\n            extraErrors={errors as unknown as ErrorSchema}\n            formData={stepsState}\n            formContext={{ ...propFormContext, formData: stepsState }}\n            schema={currentStep.schema}\n            uiSchema={mergedUiSchema}\n            onSubmit={handleNext}\n            fields={fields}\n            showErrorList=\"top\"\n            templates={{ ErrorListTemplate }}\n            onChange={handleChange}\n            widgets={{ password: PasswordWidget }}\n            experimental_defaultFormStateBehavior={{\n              allOf: 'populateDefaults',\n            }}\n            {...restFormProps}\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\n                  ? reviewLabel\n                  : t('stepper.nextButtonText')}\n              </Button>\n            </div>\n          </Form>\n        ) : // TODO: potentially move away from this pattern, deprecate?\n        ReviewStepComponent ? (\n          <ReviewStepComponent\n            disableButtons={isValidating}\n            formData={stepsState}\n            handleBack={handleBack}\n            handleReset={() => {}}\n            steps={steps}\n            handleCreate={handleCreate}\n          />\n        ) : (\n          <>\n            <ReviewStateComponent formState={stepsState} 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                disabled={isCreating}\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 { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport {\n  FieldExtensionOptions,\n  FormProps,\n  LayoutOptions,\n  ReviewStepProps,\n  TemplateParameterSchema,\n} from '@backstage/plugin-scaffolder-react';\nimport { JsonValue } from '@backstage/types';\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { type IChangeEvent } from '@rjsf/core';\nimport { ErrorSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvErrors from 'ajv-errors';\nimport { merge } from 'lodash';\nimport {\n  ComponentType,\n  useCallback,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\nimport { useFormDataFromQuery, useTemplateSchema } from '../../hooks';\nimport { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';\nimport { Form } from '../Form';\nimport { PasswordWidget } from '../PasswordWidget/PasswordWidget';\nimport { ReviewState, type ReviewStateProps } from '../ReviewState';\nimport {\n  createAsyncValidators,\n  type FormValidation,\n} from './createAsyncValidators';\nimport { ErrorListTemplate } from './ErrorListTemplate';\nimport * as FieldOverrides from './FieldOverrides';\nimport { hasErrors } from './utils';\n\nconst validator = customizeValidator();\najvErrors(validator.ajv);\n\n/** @alpha */\nexport type BackstageTemplateStepperClassKey =\n  | 'backButton'\n  | 'footer'\n  | 'formWrapper';\n\nconst useStyles = makeStyles(\n  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  { name: 'BackstageTemplateStepper' },\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 { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const { layouts = [], components = {}, onCreate, ...props } = stepperProps;\n  const {\n    ReviewStateComponent = ReviewState,\n    ReviewStepComponent,\n    backButtonText = t('stepper.backButtonText'),\n    createButtonText = t('stepper.createButtonText'),\n    reviewButtonText = t('stepper.reviewButtonText'),\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 [initialState] = useFormDataFromQuery(props.initialState);\n  const [stepsState, setStepsState] =\n    useState<Record<string, JsonValue>>(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 = useCallback(() => {\n    setActiveStep(prevActiveStep => prevActiveStep - 1);\n  }, [setActiveStep]);\n\n  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });\n\n  const {\n    formContext: propFormContext,\n    uiSchema: propUiSchema,\n    liveOmit: _shouldLiveOmit,\n    omitExtraData: _shouldOmitExtraData,\n    ...restFormProps\n  } = props.formProps ?? {};\n\n  const handleChange = useCallback(\n    (e: IChangeEvent) => {\n      setStepsState(current => {\n        return { ...current, ...e.formData };\n      });\n    },\n    [setStepsState],\n  );\n\n  const handleNext = useCallback(\n    async ({ formData = {} }: { formData?: Record<string, JsonValue> }) => {\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      setStepsState(current => ({\n        ...current,\n        ...formData,\n      }));\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    },\n    [validation, analytics],\n  );\n\n  const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);\n\n  const [isCreating, setIsCreating] = useState(false);\n\n  const handleCreate = useCallback(async () => {\n    setIsCreating(true);\n    analytics.captureEvent('click', `${createLabel}`);\n    try {\n      await onCreate(stepsState);\n    } finally {\n      setIsCreating(false);\n    }\n  }, [analytics, createLabel, onCreate, stepsState]);\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={t('stepper.stepIndexLabel', { index: 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            key={activeStep}\n            validator={validator}\n            extraErrors={errors as unknown as ErrorSchema}\n            formData={stepsState}\n            formContext={{ ...propFormContext, formData: stepsState }}\n            schema={currentStep.schema}\n            uiSchema={mergedUiSchema}\n            onSubmit={handleNext}\n            fields={fields}\n            showErrorList=\"top\"\n            templates={{ ErrorListTemplate }}\n            onChange={handleChange}\n            widgets={{ password: PasswordWidget }}\n            experimental_defaultFormStateBehavior={{\n              allOf: 'populateDefaults',\n            }}\n            {...restFormProps}\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\n                  ? reviewLabel\n                  : t('stepper.nextButtonText')}\n              </Button>\n            </div>\n          </Form>\n        ) : // TODO: potentially move away from this pattern, deprecate?\n        ReviewStepComponent ? (\n          <ReviewStepComponent\n            disableButtons={isValidating}\n            formData={stepsState}\n            handleBack={handleBack}\n            handleReset={() => {}}\n            steps={steps}\n            handleCreate={handleCreate}\n          />\n        ) : (\n          <>\n            <ReviewStateComponent formState={stepsState} 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                disabled={isCreating}\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/TaskLogStream/TaskLogStream.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { LogViewer } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -11,12 +11,12 @@ const useStyles = makeStyles({
 });
 const TaskLogStream = (props) => {
   const styles = useStyles();
-  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: styles.root, children: /* @__PURE__ */ jsx(
     LogViewer,
     {
       text: Object.values(props.logs).map((l) => l.join("\n")).filter(Boolean).join("\n")
     }
-  ));
+  ) });
 };
 
 export { TaskLogStream };

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

@@ -1 +1 @@
-{"version":3,"file":"TaskLogStream.esm.js","sources":["../../../../src/next/components/TaskLogStream/TaskLogStream.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 React from 'react';\nimport { LogViewer } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n    position: 'relative',\n  },\n});\n\n/**\n * The text of the event stream\n *\n * @alpha\n */\nexport const TaskLogStream = (props: { logs: { [k: string]: string[] } }) => {\n  const styles = useStyles();\n  return (\n    <div className={styles.root}>\n      <LogViewer\n        text={Object.values(props.logs)\n          .map(l => l.join('\\n'))\n          .filter(Boolean)\n          .join('\\n')}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAmBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAOY,MAAA,aAAA,GAAgB,CAAC,KAA+C,KAAA;AAC3E,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,IACrB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAM,MAAO,CAAA,MAAA,CAAO,KAAM,CAAA,IAAI,EAC3B,GAAI,CAAA,CAAA,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CACrB,OAAO,OAAO,CAAA,CACd,KAAK,IAAI;AAAA;AAAA,GAEhB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TaskLogStream.esm.js","sources":["../../../../src/next/components/TaskLogStream/TaskLogStream.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 { LogViewer } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n    position: 'relative',\n  },\n});\n\n/**\n * The text of the event stream\n *\n * @alpha\n */\nexport const TaskLogStream = (props: { logs: { [k: string]: string[] } }) => {\n  const styles = useStyles();\n  return (\n    <div className={styles.root}>\n      <LogViewer\n        text={Object.values(props.logs)\n          .map(l => l.join('\\n'))\n          .filter(Boolean)\n          .join('\\n')}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAkBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAOY,MAAA,aAAA,GAAgB,CAAC,KAA+C,KAAA;AAC3E,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,IACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAM,MAAO,CAAA,MAAA,CAAO,KAAM,CAAA,IAAI,EAC3B,GAAI,CAAA,CAAA,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CACrB,OAAO,OAAO,CAAA,CACd,KAAK,IAAI;AAAA;AAAA,GAEhB,EAAA,CAAA;AAEJ;;;;"}

package/dist/next/components/TaskSteps/StepIcon.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
@@ -23,28 +23,28 @@ const StepIcon = (props) => {
   const { active, completed, error, skipped } = props;
   const getMiddle = () => {
     if (active) {
-      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "20px" });
+      return /* @__PURE__ */ jsx(CircularProgress, { size: "20px" });
     }
     if (completed) {
-      return /* @__PURE__ */ React.createElement(CheckCircleOutline, null);
+      return /* @__PURE__ */ jsx(CheckCircleOutline, {});
     }
     if (error) {
-      return /* @__PURE__ */ React.createElement(ErrorOutline, null);
+      return /* @__PURE__ */ jsx(ErrorOutline, {});
     }
     if (skipped) {
-      return /* @__PURE__ */ React.createElement(RemoveCircleOutline, null);
+      return /* @__PURE__ */ jsx(RemoveCircleOutline, {});
     }
-    return /* @__PURE__ */ React.createElement(PanoramaFishEyeIcon, null);
+    return /* @__PURE__ */ jsx(PanoramaFishEyeIcon, {});
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: classNames(classes.root, {
         [classes.completed]: completed,
         [classes.error]: error
-      })
-    },
-    getMiddle()
+      }),
+      children: getMiddle()
+    }
   );
 };
 

package/dist/next/components/TaskSteps/StepIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIcon.esm.js","sources":["../../../../src/next/components/TaskSteps/StepIcon.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 React from 'react';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';\nimport PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';\nimport classNames from 'classnames';\nimport CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';\nimport ErrorOutline from '@material-ui/icons/ErrorOutline';\n\nconst useStepIconStyles = makeStyles(theme => ({\n  root: {\n    color: theme.palette.text.disabled,\n  },\n  completed: {\n    color: theme.palette.status.ok,\n  },\n  error: {\n    color: theme.palette.status.error,\n  },\n}));\n\nexport const StepIcon = (props: StepIconProps & { skipped: boolean }) => {\n  const classes = useStepIconStyles();\n  const { active, completed, error, skipped } = props;\n\n  const getMiddle = () => {\n    if (active) {\n      return <CircularProgress size=\"20px\" />;\n    }\n    if (completed) {\n      return <CheckCircleOutline />;\n    }\n\n    if (error) {\n      return <ErrorOutline />;\n    }\n\n    if (skipped) {\n      return <RemoveCircleOutline />;\n    }\n\n    return <PanoramaFishEyeIcon />;\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.completed]: completed,\n        [classes.error]: error,\n      })}\n    >\n      {getMiddle()}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0BA,MAAM,iBAAA,GAAoB,WAAW,CAAU,KAAA,MAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,GAC5B;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA,GAC9B;AAAA,EACA,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA;AAEhC,CAAE,CAAA,CAAA;AAEW,MAAA,QAAA,GAAW,CAAC,KAAgD,KAAA;AACvE,EAAA,MAAM,UAAU,iBAAkB,EAAA;AAClC,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAO,SAAY,GAAA,KAAA;AAE9C,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,IAAA,EAAK,MAAO,EAAA,CAAA;AAAA;AAEvC,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,2CAAQ,kBAAmB,EAAA,IAAA,CAAA;AAAA;AAG7B,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,2CAAQ,YAAa,EAAA,IAAA,CAAA;AAAA;AAGvB,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,2CAAQ,mBAAoB,EAAA,IAAA,CAAA;AAAA;AAG9B,IAAA,2CAAQ,mBAAoB,EAAA,IAAA,CAAA;AAAA,GAC9B;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,QAClC,CAAC,OAAQ,CAAA,SAAS,GAAG,SAAA;AAAA,QACrB,CAAC,OAAQ,CAAA,KAAK,GAAG;AAAA,OAClB;AAAA,KAAA;AAAA,IAEA,SAAU;AAAA,GACb;AAEJ;;;;"}
+{"version":3,"file":"StepIcon.esm.js","sources":["../../../../src/next/components/TaskSteps/StepIcon.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 CircularProgress from '@material-ui/core/CircularProgress';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';\nimport PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';\nimport classNames from 'classnames';\nimport CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';\nimport ErrorOutline from '@material-ui/icons/ErrorOutline';\n\nconst useStepIconStyles = makeStyles(theme => ({\n  root: {\n    color: theme.palette.text.disabled,\n  },\n  completed: {\n    color: theme.palette.status.ok,\n  },\n  error: {\n    color: theme.palette.status.error,\n  },\n}));\n\nexport const StepIcon = (props: StepIconProps & { skipped: boolean }) => {\n  const classes = useStepIconStyles();\n  const { active, completed, error, skipped } = props;\n\n  const getMiddle = () => {\n    if (active) {\n      return <CircularProgress size=\"20px\" />;\n    }\n    if (completed) {\n      return <CheckCircleOutline />;\n    }\n\n    if (error) {\n      return <ErrorOutline />;\n    }\n\n    if (skipped) {\n      return <RemoveCircleOutline />;\n    }\n\n    return <PanoramaFishEyeIcon />;\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.completed]: completed,\n        [classes.error]: error,\n      })}\n    >\n      {getMiddle()}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,iBAAA,GAAoB,WAAW,CAAU,KAAA,MAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,GAC5B;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA,GAC9B;AAAA,EACA,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA;AAEhC,CAAE,CAAA,CAAA;AAEW,MAAA,QAAA,GAAW,CAAC,KAAgD,KAAA;AACvE,EAAA,MAAM,UAAU,iBAAkB,EAAA;AAClC,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAO,SAAY,GAAA,KAAA;AAE9C,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,IAAA,EAAK,MAAO,EAAA,CAAA;AAAA;AAEvC,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,2BAAQ,kBAAmB,EAAA,EAAA,CAAA;AAAA;AAG7B,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,2BAAQ,YAAa,EAAA,EAAA,CAAA;AAAA;AAGvB,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,2BAAQ,mBAAoB,EAAA,EAAA,CAAA;AAAA;AAG9B,IAAA,2BAAQ,mBAAoB,EAAA,EAAA,CAAA;AAAA,GAC9B;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,QAClC,CAAC,OAAQ,CAAA,SAAS,GAAG,SAAA;AAAA,QACrB,CAAC,OAAQ,CAAA,KAAK,GAAG;AAAA,OAClB,CAAA;AAAA,MAEA,QAAU,EAAA,SAAA;AAAA;AAAA,GACb;AAEJ;;;;"}

package/dist/next/components/TaskSteps/StepTime.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import useInterval from 'react-use/esm/useInterval';
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
@@ -29,7 +30,7 @@ const StepTime = (props) => {
   }, [step.endedAt, step.startedAt]);
   useMountEffect(calculate);
   useInterval(calculate, getDelay());
-  return /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, time);
+  return /* @__PURE__ */ jsx(Typography, { variant: "caption", children: time });
 };
 
 export { StepTime };

package/dist/next/components/TaskSteps/StepTime.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepTime.esm.js","sources":["../../../../src/next/components/TaskSteps/StepTime.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 React, { useCallback, useState } from 'react';\nimport useInterval from 'react-use/esm/useInterval';\nimport { DateTime, Interval } from 'luxon';\nimport humanizeDuration from 'humanize-duration';\nimport Typography from '@material-ui/core/Typography';\nimport { useMountEffect } from '@react-hookz/web';\n\nexport const StepTime = (props: {\n  step: {\n    id: string;\n    name: string;\n    startedAt?: string;\n    endedAt?: string;\n  };\n}) => {\n  const [time, setTime] = useState('');\n  const { step } = props;\n\n  const getDelay = () => {\n    if (step.startedAt && step.endedAt && time) {\n      return null;\n    }\n    if (step.startedAt && step.endedAt) {\n      return 1;\n    }\n    return 1000;\n  };\n\n  const calculate = useCallback(() => {\n    if (!step.startedAt) {\n      setTime('');\n      return;\n    }\n\n    const end = step.endedAt\n      ? DateTime.fromISO(step.endedAt)\n      : DateTime.local();\n\n    const startedAt = DateTime.fromISO(step.startedAt);\n    const formatted = Interval.fromDateTimes(startedAt, end)\n      .toDuration()\n      .valueOf();\n\n    setTime(humanizeDuration(formatted, { round: true }));\n  }, [step.endedAt, step.startedAt]);\n\n  useMountEffect(calculate);\n  useInterval(calculate, getDelay());\n\n  return <Typography variant=\"caption\">{time}</Typography>;\n};\n"],"names":[],"mappings":";;;;;;;AAsBa,MAAA,QAAA,GAAW,CAAC,KAOnB,KAAA;AACJ,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,EAAE,CAAA;AACnC,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,IAAK,CAAA,SAAA,IAAa,IAAK,CAAA,OAAA,IAAW,IAAM,EAAA;AAC1C,MAAO,OAAA,IAAA;AAAA;AAET,IAAI,IAAA,IAAA,CAAK,SAAa,IAAA,IAAA,CAAK,OAAS,EAAA;AAClC,MAAO,OAAA,CAAA;AAAA;AAET,IAAO,OAAA,GAAA;AAAA,GACT;AAEA,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAI,IAAA,CAAC,KAAK,SAAW,EAAA;AACnB,MAAA,OAAA,CAAQ,EAAE,CAAA;AACV,MAAA;AAAA;AAGF,IAAM,MAAA,GAAA,GAAM,KAAK,OACb,GAAA,QAAA,CAAS,QAAQ,IAAK,CAAA,OAAO,CAC7B,GAAA,QAAA,CAAS,KAAM,EAAA;AAEnB,IAAA,MAAM,SAAY,GAAA,QAAA,CAAS,OAAQ,CAAA,IAAA,CAAK,SAAS,CAAA;AACjD,IAAM,MAAA,SAAA,GAAY,SAAS,aAAc,CAAA,SAAA,EAAW,GAAG,CACpD,CAAA,UAAA,GACA,OAAQ,EAAA;AAEX,IAAA,OAAA,CAAQ,iBAAiB,SAAW,EAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAC,CAAA;AAAA,KACnD,CAAC,IAAA,CAAK,OAAS,EAAA,IAAA,CAAK,SAAS,CAAC,CAAA;AAEjC,EAAA,cAAA,CAAe,SAAS,CAAA;AACxB,EAAY,WAAA,CAAA,SAAA,EAAW,UAAU,CAAA;AAEjC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,SAAA,EAAA,EAAW,IAAK,CAAA;AAC7C;;;;"}
+{"version":3,"file":"StepTime.esm.js","sources":["../../../../src/next/components/TaskSteps/StepTime.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 { useCallback, useState } from 'react';\nimport useInterval from 'react-use/esm/useInterval';\nimport { DateTime, Interval } from 'luxon';\nimport humanizeDuration from 'humanize-duration';\nimport Typography from '@material-ui/core/Typography';\nimport { useMountEffect } from '@react-hookz/web';\n\nexport const StepTime = (props: {\n  step: {\n    id: string;\n    name: string;\n    startedAt?: string;\n    endedAt?: string;\n  };\n}) => {\n  const [time, setTime] = useState('');\n  const { step } = props;\n\n  const getDelay = () => {\n    if (step.startedAt && step.endedAt && time) {\n      return null;\n    }\n    if (step.startedAt && step.endedAt) {\n      return 1;\n    }\n    return 1000;\n  };\n\n  const calculate = useCallback(() => {\n    if (!step.startedAt) {\n      setTime('');\n      return;\n    }\n\n    const end = step.endedAt\n      ? DateTime.fromISO(step.endedAt)\n      : DateTime.local();\n\n    const startedAt = DateTime.fromISO(step.startedAt);\n    const formatted = Interval.fromDateTimes(startedAt, end)\n      .toDuration()\n      .valueOf();\n\n    setTime(humanizeDuration(formatted, { round: true }));\n  }, [step.endedAt, step.startedAt]);\n\n  useMountEffect(calculate);\n  useInterval(calculate, getDelay());\n\n  return <Typography variant=\"caption\">{time}</Typography>;\n};\n"],"names":[],"mappings":";;;;;;;;AAsBa,MAAA,QAAA,GAAW,CAAC,KAOnB,KAAA;AACJ,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,EAAE,CAAA;AACnC,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,IAAK,CAAA,SAAA,IAAa,IAAK,CAAA,OAAA,IAAW,IAAM,EAAA;AAC1C,MAAO,OAAA,IAAA;AAAA;AAET,IAAI,IAAA,IAAA,CAAK,SAAa,IAAA,IAAA,CAAK,OAAS,EAAA;AAClC,MAAO,OAAA,CAAA;AAAA;AAET,IAAO,OAAA,GAAA;AAAA,GACT;AAEA,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAI,IAAA,CAAC,KAAK,SAAW,EAAA;AACnB,MAAA,OAAA,CAAQ,EAAE,CAAA;AACV,MAAA;AAAA;AAGF,IAAM,MAAA,GAAA,GAAM,KAAK,OACb,GAAA,QAAA,CAAS,QAAQ,IAAK,CAAA,OAAO,CAC7B,GAAA,QAAA,CAAS,KAAM,EAAA;AAEnB,IAAA,MAAM,SAAY,GAAA,QAAA,CAAS,OAAQ,CAAA,IAAA,CAAK,SAAS,CAAA;AACjD,IAAM,MAAA,SAAA,GAAY,SAAS,aAAc,CAAA,SAAA,EAAW,GAAG,CACpD,CAAA,UAAA,GACA,OAAQ,EAAA;AAEX,IAAA,OAAA,CAAQ,iBAAiB,SAAW,EAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAC,CAAA;AAAA,KACnD,CAAC,IAAA,CAAK,OAAS,EAAA,IAAA,CAAK,SAAS,CAAC,CAAA;AAEjC,EAAA,cAAA,CAAe,SAAS,CAAA;AACxB,EAAY,WAAA,CAAA,SAAA,EAAW,UAAU,CAAA;AAEjC,EAAA,uBAAQ,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,SAAA,EAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAC7C;;;;"}

package/dist/next/components/TaskSteps/TaskBorder.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -13,9 +13,9 @@ const useStyles = makeStyles((theme) => ({
 const TaskBorder = (props) => {
   const styles = useStyles();
   if (!props.isComplete) {
-    return /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" });
+    return /* @__PURE__ */ jsx(LinearProgress, { variant: "indeterminate" });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     LinearProgress,
     {
       variant: "determinate",

package/dist/next/components/TaskSteps/TaskBorder.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskBorder.esm.js","sources":["../../../../src/next/components/TaskSteps/TaskBorder.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 React from 'react';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(theme => ({\n  failed: {\n    backgroundColor: theme.palette.error.main,\n  },\n  success: {\n    backgroundColor: theme.palette.success.main,\n  },\n}));\n\n/**\n * The visual progress of the task event stream\n */\nexport const TaskBorder = (props: {\n  isComplete: boolean;\n  isError: boolean;\n}) => {\n  const styles = useStyles();\n\n  if (!props.isComplete) {\n    return <LinearProgress variant=\"indeterminate\" />;\n  }\n\n  return (\n    <LinearProgress\n      variant=\"determinate\"\n      classes={{ bar: props.isError ? styles.failed : styles.success }}\n      value={100}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAoBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA;AAAA,GACvC;AAAA,EACA,OAAS,EAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA;AAE3C,CAAE,CAAA,CAAA;AAKW,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAQ,eAAgB,EAAA,CAAA;AAAA;AAGjD,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,aAAA;AAAA,MACR,OAAA,EAAS,EAAE,GAAK,EAAA,KAAA,CAAM,UAAU,MAAO,CAAA,MAAA,GAAS,OAAO,OAAQ,EAAA;AAAA,MAC/D,KAAO,EAAA;AAAA;AAAA,GACT;AAEJ;;;;"}
+{"version":3,"file":"TaskBorder.esm.js","sources":["../../../../src/next/components/TaskSteps/TaskBorder.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 LinearProgress from '@material-ui/core/LinearProgress';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(theme => ({\n  failed: {\n    backgroundColor: theme.palette.error.main,\n  },\n  success: {\n    backgroundColor: theme.palette.success.main,\n  },\n}));\n\n/**\n * The visual progress of the task event stream\n */\nexport const TaskBorder = (props: {\n  isComplete: boolean;\n  isError: boolean;\n}) => {\n  const styles = useStyles();\n\n  if (!props.isComplete) {\n    return <LinearProgress variant=\"indeterminate\" />;\n  }\n\n  return (\n    <LinearProgress\n      variant=\"determinate\"\n      classes={{ bar: props.isError ? styles.failed : styles.success }}\n      value={100}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAmBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA;AAAA,GACvC;AAAA,EACA,OAAS,EAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA;AAE3C,CAAE,CAAA,CAAA;AAKW,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,IAAO,uBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAQ,eAAgB,EAAA,CAAA;AAAA;AAGjD,EACE,uBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,aAAA;AAAA,MACR,OAAA,EAAS,EAAE,GAAK,EAAA,KAAA,CAAM,UAAU,MAAO,CAAA,MAAA,GAAS,OAAO,OAAQ,EAAA;AAAA,MAC/D,KAAO,EAAA;AAAA;AAAA,GACT;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import MuiStepper from '@material-ui/core/Stepper';
 import MuiStep from '@material-ui/core/Step';
 import MuiStepButton from '@material-ui/core/StepButton';
@@ -10,43 +10,48 @@ import { StepTime } from './StepTime.esm.js';
 import { TaskBorder } from './TaskBorder.esm.js';
 
 const TaskSteps = (props) => {
-  return /* @__PURE__ */ React.createElement(Paper, { style: { position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
-    TaskBorder,
-    {
-      isComplete: props.isComplete ?? false,
-      isError: props.isError ?? false
-    }
-  ), /* @__PURE__ */ React.createElement(Box, { padding: 2 }, /* @__PURE__ */ React.createElement(
-    MuiStepper,
-    {
-      activeStep: props.activeStep,
-      alternativeLabel: true,
-      variant: "elevation",
-      style: { overflowX: "auto" }
-    },
-    props.steps.map((step) => {
-      const isCompleted = step.status === "completed";
-      const isFailed = step.status === "failed";
-      const isActive = step.status === "processing";
-      const isSkipped = step.status === "skipped";
-      const stepIconProps = {
-        completed: isCompleted,
-        error: isFailed,
-        active: isActive,
-        skipped: isSkipped
-      };
-      return /* @__PURE__ */ React.createElement(MuiStep, { key: step.id }, /* @__PURE__ */ React.createElement(MuiStepButton, null, /* @__PURE__ */ React.createElement(
-        MuiStepLabel,
-        {
-          StepIconProps: stepIconProps,
-          StepIconComponent: StepIcon,
-          "data-testid": "step-label"
-        },
-        /* @__PURE__ */ React.createElement(Box, null, step.name),
-        !isSkipped && /* @__PURE__ */ React.createElement(StepTime, { step })
-      )));
-    })
-  )));
+  return /* @__PURE__ */ jsxs(Paper, { style: { position: "relative", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(
+      TaskBorder,
+      {
+        isComplete: props.isComplete ?? false,
+        isError: props.isError ?? false
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(
+      MuiStepper,
+      {
+        activeStep: props.activeStep,
+        alternativeLabel: true,
+        variant: "elevation",
+        style: { overflowX: "auto" },
+        children: props.steps.map((step) => {
+          const isCompleted = step.status === "completed";
+          const isFailed = step.status === "failed";
+          const isActive = step.status === "processing";
+          const isSkipped = step.status === "skipped";
+          const stepIconProps = {
+            completed: isCompleted,
+            error: isFailed,
+            active: isActive,
+            skipped: isSkipped
+          };
+          return /* @__PURE__ */ jsx(MuiStep, { children: /* @__PURE__ */ jsx(MuiStepButton, { children: /* @__PURE__ */ jsxs(
+            MuiStepLabel,
+            {
+              StepIconProps: stepIconProps,
+              StepIconComponent: StepIcon,
+              "data-testid": "step-label",
+              children: [
+                /* @__PURE__ */ jsx(Box, { children: step.name }),
+                !isSkipped && /* @__PURE__ */ jsx(StepTime, { step })
+              ]
+            }
+          ) }) }, step.id);
+        })
+      }
+    ) })
+  ] });
 };
 
 export { TaskSteps };

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

@@ -1 +1 @@
-{"version":3,"file":"TaskSteps.esm.js","sources":["../../../../src/next/components/TaskSteps/TaskSteps.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 React from 'react';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepButton from '@material-ui/core/StepButton';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport { TaskStep } from '@backstage/plugin-scaffolder-common';\nimport { StepIcon } from './StepIcon';\nimport { StepTime } from './StepTime';\nimport { TaskBorder } from './TaskBorder';\nimport { ScaffolderStep } from '@backstage/plugin-scaffolder-react';\n\n/**\n * Props for the TaskSteps component\n *\n * @alpha\n */\nexport interface TaskStepsProps {\n  steps: (TaskStep & ScaffolderStep)[];\n  activeStep?: number;\n  isComplete?: boolean;\n  isError?: boolean;\n}\n\n/**\n * The visual stepper of the task event stream\n *\n * @alpha\n */\nexport const TaskSteps = (props: TaskStepsProps) => {\n  return (\n    <Paper style={{ position: 'relative', overflow: 'hidden' }}>\n      <TaskBorder\n        isComplete={props.isComplete ?? false}\n        isError={props.isError ?? false}\n      />\n      <Box padding={2}>\n        <MuiStepper\n          activeStep={props.activeStep}\n          alternativeLabel\n          variant=\"elevation\"\n          style={{ overflowX: 'auto' }}\n        >\n          {props.steps.map(step => {\n            const isCompleted = step.status === 'completed';\n            const isFailed = step.status === 'failed';\n            const isActive = step.status === 'processing';\n            const isSkipped = step.status === 'skipped';\n            const stepIconProps: Partial<StepIconProps & { skipped: boolean }> =\n              {\n                completed: isCompleted,\n                error: isFailed,\n                active: isActive,\n                skipped: isSkipped,\n              };\n\n            return (\n              <MuiStep key={step.id}>\n                <MuiStepButton>\n                  <MuiStepLabel\n                    StepIconProps={stepIconProps}\n                    StepIconComponent={StepIcon}\n                    data-testid=\"step-label\"\n                  >\n                    <Box>{step.name}</Box>\n                    {!isSkipped && <StepTime step={step} />}\n                  </MuiStepLabel>\n                </MuiStepButton>\n              </MuiStep>\n            );\n          })}\n        </MuiStepper>\n      </Box>\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA8Ca,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,KAAO,EAAA,EAAE,UAAU,UAAY,EAAA,QAAA,EAAU,UAC9C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,MAAM,UAAc,IAAA,KAAA;AAAA,MAChC,OAAA,EAAS,MAAM,OAAW,IAAA;AAAA;AAAA,GAE5B,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAS,CACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,gBAAgB,EAAA,IAAA;AAAA,MAChB,OAAQ,EAAA,WAAA;AAAA,MACR,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO;AAAA,KAAA;AAAA,IAE1B,KAAA,CAAM,KAAM,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA;AACvB,MAAM,MAAA,WAAA,GAAc,KAAK,MAAW,KAAA,WAAA;AACpC,MAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,QAAA;AACjC,MAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,YAAA;AACjC,MAAM,MAAA,SAAA,GAAY,KAAK,MAAW,KAAA,SAAA;AAClC,MAAA,MAAM,aACJ,GAAA;AAAA,QACE,SAAW,EAAA,WAAA;AAAA,QACX,KAAO,EAAA,QAAA;AAAA,QACP,MAAQ,EAAA,QAAA;AAAA,QACR,OAAS,EAAA;AAAA,OACX;AAEF,MAAA,2CACG,OAAQ,EAAA,EAAA,GAAA,EAAK,IAAK,CAAA,EAAA,EAAA,sCAChB,aACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,aAAe,EAAA,aAAA;AAAA,UACf,iBAAmB,EAAA,QAAA;AAAA,UACnB,aAAY,EAAA;AAAA,SAAA;AAAA,wBAEZ,KAAA,CAAA,aAAA,CAAC,GAAK,EAAA,IAAA,EAAA,IAAA,CAAK,IAAK,CAAA;AAAA,QACf,CAAC,SAAA,oBAAc,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,IAAY,EAAA;AAAA,OAEzC,CACF,CAAA;AAAA,KAEH;AAAA,GAEL,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TaskSteps.esm.js","sources":["../../../../src/next/components/TaskSteps/TaskSteps.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 MuiStepper from '@material-ui/core/Stepper';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepButton from '@material-ui/core/StepButton';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport { TaskStep } from '@backstage/plugin-scaffolder-common';\nimport { StepIcon } from './StepIcon';\nimport { StepTime } from './StepTime';\nimport { TaskBorder } from './TaskBorder';\nimport { ScaffolderStep } from '@backstage/plugin-scaffolder-react';\n\n/**\n * Props for the TaskSteps component\n *\n * @alpha\n */\nexport interface TaskStepsProps {\n  steps: (TaskStep & ScaffolderStep)[];\n  activeStep?: number;\n  isComplete?: boolean;\n  isError?: boolean;\n}\n\n/**\n * The visual stepper of the task event stream\n *\n * @alpha\n */\nexport const TaskSteps = (props: TaskStepsProps) => {\n  return (\n    <Paper style={{ position: 'relative', overflow: 'hidden' }}>\n      <TaskBorder\n        isComplete={props.isComplete ?? false}\n        isError={props.isError ?? false}\n      />\n      <Box padding={2}>\n        <MuiStepper\n          activeStep={props.activeStep}\n          alternativeLabel\n          variant=\"elevation\"\n          style={{ overflowX: 'auto' }}\n        >\n          {props.steps.map(step => {\n            const isCompleted = step.status === 'completed';\n            const isFailed = step.status === 'failed';\n            const isActive = step.status === 'processing';\n            const isSkipped = step.status === 'skipped';\n            const stepIconProps: Partial<StepIconProps & { skipped: boolean }> =\n              {\n                completed: isCompleted,\n                error: isFailed,\n                active: isActive,\n                skipped: isSkipped,\n              };\n\n            return (\n              <MuiStep key={step.id}>\n                <MuiStepButton>\n                  <MuiStepLabel\n                    StepIconProps={stepIconProps}\n                    StepIconComponent={StepIcon}\n                    data-testid=\"step-label\"\n                  >\n                    <Box>{step.name}</Box>\n                    {!isSkipped && <StepTime step={step} />}\n                  </MuiStepLabel>\n                </MuiStepButton>\n              </MuiStep>\n            );\n          })}\n        </MuiStepper>\n      </Box>\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA6Ca,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,EACE,uBAAA,IAAA,CAAC,SAAM,KAAO,EAAA,EAAE,UAAU,UAAY,EAAA,QAAA,EAAU,UAC9C,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,MAAM,UAAc,IAAA,KAAA;AAAA,QAChC,OAAA,EAAS,MAAM,OAAW,IAAA;AAAA;AAAA,KAC5B;AAAA,oBACA,GAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAS,CACZ,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,YAAY,KAAM,CAAA,UAAA;AAAA,QAClB,gBAAgB,EAAA,IAAA;AAAA,QAChB,OAAQ,EAAA,WAAA;AAAA,QACR,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,QAE1B,QAAA,EAAA,KAAA,CAAM,KAAM,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA;AACvB,UAAM,MAAA,WAAA,GAAc,KAAK,MAAW,KAAA,WAAA;AACpC,UAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,QAAA;AACjC,UAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,YAAA;AACjC,UAAM,MAAA,SAAA,GAAY,KAAK,MAAW,KAAA,SAAA;AAClC,UAAA,MAAM,aACJ,GAAA;AAAA,YACE,SAAW,EAAA,WAAA;AAAA,YACX,KAAO,EAAA,QAAA;AAAA,YACP,MAAQ,EAAA,QAAA;AAAA,YACR,OAAS,EAAA;AAAA,WACX;AAEF,UACE,uBAAA,GAAA,CAAC,OACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,aACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,aAAe,EAAA,aAAA;AAAA,cACf,iBAAmB,EAAA,QAAA;AAAA,cACnB,aAAY,EAAA,YAAA;AAAA,cAEZ,QAAA,EAAA;AAAA,gCAAC,GAAA,CAAA,GAAA,EAAA,EAAK,eAAK,IAAK,EAAA,CAAA;AAAA,gBACf,CAAC,SAAA,oBAAc,GAAA,CAAA,QAAA,EAAA,EAAS,IAAY,EAAA;AAAA;AAAA;AAAA,WACvC,EACF,CAVY,EAAA,EAAA,IAAA,CAAK,EAWnB,CAAA;AAAA,SAEH;AAAA;AAAA,KAEL,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { ItemCardHeader } from '@backstage/core-components';
 import { FavoriteEntity } from '@backstage/plugin-catalog-react';
@@ -12,6 +12,9 @@ const useStyles = makeStyles(() => ({
   subtitleWrapper: {
     display: "flex",
     justifyContent: "space-between"
+  },
+  detailIcon: {
+    color: ({ cardFontColor }) => cardFontColor
   }
 }));
 const CardHeader = (props) => {
@@ -27,14 +30,26 @@ const CardHeader = (props) => {
     cardFontColor: themeForType.fontColor,
     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(TemplateDetailButton, { template: props.template }), /* @__PURE__ */ React.createElement(
-    FavoriteEntity,
-    {
-      entity: props.template,
-      style: { padding: 0, marginLeft: 6 }
-    }
-  )));
-  return /* @__PURE__ */ React.createElement(
+  const SubtitleComponent = /* @__PURE__ */ jsxs("div", { className: styles.subtitleWrapper, children: [
+    /* @__PURE__ */ jsx("div", { children: type }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        TemplateDetailButton,
+        {
+          className: styles.detailIcon,
+          template: props.template
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FavoriteEntity,
+        {
+          entity: props.template,
+          style: { padding: 0, marginLeft: 6 }
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
     ItemCardHeader,
     {
       title: title ?? name,

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

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.esm.js","sources":["../../../../src/next/components/TemplateCard/CardHeader.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 React from 'react';\nimport { makeStyles, Theme, useTheme } from '@material-ui/core/styles';\nimport { ItemCardHeader } from '@backstage/core-components';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { FavoriteEntity } from '@backstage/plugin-catalog-react';\nimport { TemplateDetailButton } from './TemplateDetailButton.tsx';\n\nconst useStyles = makeStyles<\n  Theme,\n  {\n    cardFontColor: string;\n    cardBackgroundImage: string;\n  }\n>(() => ({\n  header: {\n    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,\n    color: ({ cardFontColor }) => cardFontColor,\n  },\n  subtitleWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n}));\n\n/**\n * Props for the CardHeader component\n */\nexport interface CardHeaderProps {\n  template: TemplateEntityV1beta3;\n}\n\n/**\n * The Card Header with the background for the TemplateCard.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const {\n    template: {\n      metadata: { title, name },\n      spec: { type },\n    },\n  } = props;\n  const { getPageTheme } = useTheme();\n  const themeForType = getPageTheme({ themeId: type });\n\n  const styles = useStyles({\n    cardFontColor: themeForType.fontColor,\n    cardBackgroundImage: themeForType.backgroundImage,\n  });\n\n  const SubtitleComponent = (\n    <div className={styles.subtitleWrapper}>\n      <div>{type}</div>\n      <div>\n        <TemplateDetailButton template={props.template} />\n        <FavoriteEntity\n          entity={props.template}\n          style={{ padding: 0, marginLeft: 6 }}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <ItemCardHeader\n      title={title ?? name}\n      subtitle={SubtitleComponent}\n      classes={{ root: styles.header }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,SAAA,GAAY,WAMhB,OAAO;AAAA,EACP,MAAQ,EAAA;AAAA,IACN,eAAiB,EAAA,CAAC,EAAE,mBAAA,EAA0B,KAAA,mBAAA;AAAA,IAC9C,KAAO,EAAA,CAAC,EAAE,aAAA,EAAoB,KAAA;AAAA,GAChC;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA;AAAA;AAEpB,CAAE,CAAA,CAAA;AAYW,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA;AAAA,MACR,QAAA,EAAU,EAAE,KAAA,EAAO,IAAK,EAAA;AAAA,MACxB,IAAA,EAAM,EAAE,IAAK;AAAA;AACf,GACE,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,QAAS,EAAA;AAClC,EAAA,MAAM,YAAe,GAAA,YAAA,CAAa,EAAE,OAAA,EAAS,MAAM,CAAA;AAEnD,EAAA,MAAM,SAAS,SAAU,CAAA;AAAA,IACvB,eAAe,YAAa,CAAA,SAAA;AAAA,IAC5B,qBAAqB,YAAa,CAAA;AAAA,GACnC,CAAA;AAED,EAAA,MAAM,oCACH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,mCACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAK,IAAK,CAAA,sCACV,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,wBAAqB,QAAU,EAAA,KAAA,CAAM,UAAU,CAChD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,QAAQ,KAAM,CAAA,QAAA;AAAA,MACd,KAAO,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,YAAY,CAAE;AAAA;AAAA,GAEvC,CACF,CAAA;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAO,KAAS,IAAA,IAAA;AAAA,MAChB,QAAU,EAAA,iBAAA;AAAA,MACV,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAO;AAAA;AAAA,GACjC;AAEJ;;;;"}
+{"version":3,"file":"CardHeader.esm.js","sources":["../../../../src/next/components/TemplateCard/CardHeader.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 { makeStyles, Theme, useTheme } from '@material-ui/core/styles';\nimport { ItemCardHeader } from '@backstage/core-components';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { FavoriteEntity } from '@backstage/plugin-catalog-react';\nimport { TemplateDetailButton } from './TemplateDetailButton.tsx';\n\nconst useStyles = makeStyles<\n  Theme,\n  {\n    cardFontColor: string;\n    cardBackgroundImage: string;\n  }\n>(() => ({\n  header: {\n    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,\n    color: ({ cardFontColor }) => cardFontColor,\n  },\n  subtitleWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  detailIcon: {\n    color: ({ cardFontColor }) => cardFontColor,\n  },\n}));\n\n/**\n * Props for the CardHeader component\n */\nexport interface CardHeaderProps {\n  template: TemplateEntityV1beta3;\n}\n\n/**\n * The Card Header with the background for the TemplateCard.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const {\n    template: {\n      metadata: { title, name },\n      spec: { type },\n    },\n  } = props;\n  const { getPageTheme } = useTheme();\n  const themeForType = getPageTheme({ themeId: type });\n\n  const styles = useStyles({\n    cardFontColor: themeForType.fontColor,\n    cardBackgroundImage: themeForType.backgroundImage,\n  });\n\n  const SubtitleComponent = (\n    <div className={styles.subtitleWrapper}>\n      <div>{type}</div>\n      <div>\n        <TemplateDetailButton\n          className={styles.detailIcon}\n          template={props.template}\n        />\n        <FavoriteEntity\n          entity={props.template}\n          style={{ padding: 0, marginLeft: 6 }}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <ItemCardHeader\n      title={title ?? name}\n      subtitle={SubtitleComponent}\n      classes={{ root: styles.header }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,SAAA,GAAY,WAMhB,OAAO;AAAA,EACP,MAAQ,EAAA;AAAA,IACN,eAAiB,EAAA,CAAC,EAAE,mBAAA,EAA0B,KAAA,mBAAA;AAAA,IAC9C,KAAO,EAAA,CAAC,EAAE,aAAA,EAAoB,KAAA;AAAA,GAChC;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,UAAY,EAAA;AAAA,IACV,KAAO,EAAA,CAAC,EAAE,aAAA,EAAoB,KAAA;AAAA;AAElC,CAAE,CAAA,CAAA;AAYW,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA;AAAA,MACR,QAAA,EAAU,EAAE,KAAA,EAAO,IAAK,EAAA;AAAA,MACxB,IAAA,EAAM,EAAE,IAAK;AAAA;AACf,GACE,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,QAAS,EAAA;AAClC,EAAA,MAAM,YAAe,GAAA,YAAA,CAAa,EAAE,OAAA,EAAS,MAAM,CAAA;AAEnD,EAAA,MAAM,SAAS,SAAU,CAAA;AAAA,IACvB,eAAe,YAAa,CAAA,SAAA;AAAA,IAC5B,qBAAqB,YAAa,CAAA;AAAA,GACnC,CAAA;AAED,EAAA,MAAM,iBACJ,mBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,eACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAK,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,yBACV,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,oBAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,UAAA;AAAA,UAClB,UAAU,KAAM,CAAA;AAAA;AAAA,OAClB;AAAA,sBACA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,QAAQ,KAAM,CAAA,QAAA;AAAA,UACd,KAAO,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,YAAY,CAAE;AAAA;AAAA;AACrC,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAGF,EACE,uBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAO,KAAS,IAAA,IAAA;AAAA,MAChB,QAAU,EAAA,iBAAA;AAAA,MACV,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAO;AAAA;AAAA,GACjC;AAEJ;;;;"}

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

@@ -1,6 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Link } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
 
 const useStyles = makeStyles(() => ({
   linkText: {
@@ -10,7 +10,10 @@ const useStyles = makeStyles(() => ({
 }));
 const CardLink = ({ icon: Icon, text, url }) => {
   const styles = useStyles();
-  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));
+  return /* @__PURE__ */ jsxs("div", { className: styles.linkText, children: [
+    /* @__PURE__ */ jsx(Icon, { fontSize: "small" }),
+    /* @__PURE__ */ jsx(Link, { style: { marginLeft: "8px" }, to: url, children: text || url })
+  ] });
 };
 
 export { CardLink };

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

@@ -1 +1 @@
-{"version":3,"file":"CardLink.esm.js","sources":["../../../../src/next/components/TemplateCard/CardLink.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 { IconComponent } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React from 'react';\n\nexport interface CardLinkProps {\n  icon: IconComponent;\n  text: string;\n  url: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  linkText: {\n    display: 'inline-flex',\n    alignItems: 'center',\n  },\n}));\n\nexport const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => {\n  const styles = useStyles();\n\n  return (\n    <div className={styles.linkText}>\n      <Icon fontSize=\"small\" />\n      <Link style={{ marginLeft: '8px' }} to={url}>\n        {text || url}\n      </Link>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA2BA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,aAAA;AAAA,IACT,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,WAAW,CAAC,EAAE,MAAM,IAAM,EAAA,IAAA,EAAM,KAAyB,KAAA;AACpE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,4BACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,UAAS,OAAQ,EAAA,CAAA,sCACtB,IAAK,EAAA,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,KAAA,IAAS,EAAI,EAAA,GAAA,EAAA,EACrC,IAAQ,IAAA,GACX,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CardLink.esm.js","sources":["../../../../src/next/components/TemplateCard/CardLink.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 { IconComponent } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport interface CardLinkProps {\n  icon: IconComponent;\n  text: string;\n  url: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  linkText: {\n    display: 'inline-flex',\n    alignItems: 'center',\n  },\n}));\n\nexport const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => {\n  const styles = useStyles();\n\n  return (\n    <div className={styles.linkText}>\n      <Icon fontSize=\"small\" />\n      <Link style={{ marginLeft: '8px' }} to={url}>\n        {text || url}\n      </Link>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA0BA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,aAAA;AAAA,IACT,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,WAAW,CAAC,EAAE,MAAM,IAAM,EAAA,IAAA,EAAM,KAAyB,KAAA;AACpE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QACrB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,UAAS,OAAQ,EAAA,CAAA;AAAA,oBACvB,GAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,OAAS,EAAA,EAAA,EAAI,GACrC,EAAA,QAAA,EAAA,IAAA,IAAQ,GACX,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { useAnalytics } from '@backstage/core-plugin-api';
 import { getEntityRelations } from '@backstage/plugin-catalog-react';
@@ -7,7 +8,7 @@ import CardContent from '@material-ui/core/CardContent';
 import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { CardHeader } from './CardHeader.esm.js';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';
@@ -34,27 +35,36 @@ const TemplateCard = (props) => {
     analytics.captureEvent("click", `Template has been opened`);
     onSelected?.(template);
   }, [analytics, onSelected, template]);
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { template, "data-testid": "template-card-header" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2, "data-testid": "template-card-content" }, /* @__PURE__ */ React.createElement(TemplateCardContent, { template }), displayDefaultDivider && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator" })), hasTags && /* @__PURE__ */ React.createElement(TemplateCardTags, { template }), hasLinks && /* @__PURE__ */ React.createElement(
-    TemplateCardLinks,
-    {
-      template,
-      additionalLinks
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    CardActions,
-    {
-      className: styles.actionContainer,
-      "data-testid": "template-card-actions"
-    },
-    /* @__PURE__ */ React.createElement(
-      TemplateCardActions,
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { template, "data-testid": "template-card-header" }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, "data-testid": "template-card-content", children: [
+      /* @__PURE__ */ jsx(TemplateCardContent, { template }),
+      displayDefaultDivider && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Divider, { "data-testid": "template-card-separator" }) }),
+      hasTags && /* @__PURE__ */ jsx(TemplateCardTags, { template }),
+      hasLinks && /* @__PURE__ */ jsx(
+        TemplateCardLinks,
+        {
+          template,
+          additionalLinks
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      CardActions,
       {
-        canCreateTask,
-        handleChoose,
-        ownedByRelations
+        className: styles.actionContainer,
+        "data-testid": "template-card-actions",
+        children: /* @__PURE__ */ jsx(
+          TemplateCardActions,
+          {
+            canCreateTask,
+            handleChoose,
+            ownedByRelations
+          }
+        )
       }
     )
-  ));
+  ] });
 };
 
 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 { IconComponent, useAnalytics } from '@backstage/core-plugin-api';\nimport { getEntityRelations } from '@backstage/plugin-catalog-react';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport React, { useCallback } from 'react';\nimport { CardHeader } from './CardHeader';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';\nimport { TemplateCardContent } from './TemplateCardContent';\nimport { TemplateCardTags } from './TemplateCardTags';\nimport { TemplateCardLinks } from './TemplateCardLinks';\nimport { TemplateCardActions } from './TemplateCardActions';\n\nconst useStyles = makeStyles<Theme>(() => ({\n  actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' },\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  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 { additionalLinks, onSelected, template } = props;\n  const styles = useStyles();\n  const analytics = useAnalytics();\n  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);\n  const hasTags = !!template.metadata.tags?.length;\n  const hasLinks =\n    !!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} data-testid=\"template-card-header\" />\n      <CardContent>\n        <Grid container spacing={2} data-testid=\"template-card-content\">\n          <TemplateCardContent template={template} />\n          {displayDefaultDivider && (\n            <Grid item xs={12}>\n              <Divider data-testid=\"template-card-separator\" />\n            </Grid>\n          )}\n          {hasTags && <TemplateCardTags template={template} />}\n          {hasLinks && (\n            <TemplateCardLinks\n              template={template}\n              additionalLinks={additionalLinks}\n            />\n          )}\n        </Grid>\n      </CardContent>\n      <CardActions\n        className={styles.actionContainer}\n        data-testid=\"template-card-actions\"\n      >\n        <TemplateCardActions\n          canCreateTask={canCreateTask}\n          handleChoose={handleChoose}\n          ownedByRelations={ownedByRelations}\n        />\n      </CardActions>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmCA,MAAM,SAAA,GAAY,WAAkB,OAAO;AAAA,EACzC,iBAAiB,EAAE,OAAA,EAAS,QAAQ,IAAM,EAAA,CAAA,EAAG,YAAY,UAAW;AACtE,CAAE,CAAA,CAAA;AAoBW,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,eAAA,EAAiB,UAAY,EAAA,QAAA,EAAa,GAAA,KAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,gBAAA,GAAmB,kBAAmB,CAAA,QAAA,EAAU,iBAAiB,CAAA;AACvE,EAAA,MAAM,OAAU,GAAA,CAAC,CAAC,QAAA,CAAS,SAAS,IAAM,EAAA,MAAA;AAC1C,EAAM,MAAA,QAAA,GACJ,CAAC,CAAC,eAAA,EAAiB,UAAU,CAAC,CAAC,QAAS,CAAA,QAAA,CAAS,KAAO,EAAA,MAAA;AAC1D,EAAM,MAAA,qBAAA,GAAwB,CAAC,OAAA,IAAW,CAAC,QAAA;AAE3C,EAAA,MAAM,EAAE,OAAA,EAAS,aAAc,EAAA,GAAI,aAAc,CAAA;AAAA,IAC/C,UAAY,EAAA;AAAA,GACb,CAAA;AACD,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAU,SAAA,CAAA,YAAA,CAAa,SAAS,CAA0B,wBAAA,CAAA,CAAA;AAC1D,IAAA,UAAA,GAAa,QAAQ,CAAA;AAAA,GACpB,EAAA,CAAC,SAAW,EAAA,UAAA,EAAY,QAAQ,CAAC,CAAA;AAEpC,EAAA,2CACG,IACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,QAAoB,EAAA,aAAA,EAAY,wBAAuB,CACnE,kBAAA,KAAA,CAAA,aAAA,CAAC,WACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CAAG,EAAA,aAAA,EAAY,2CACrC,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,QAAoB,EAAA,CAAA,EACxC,yCACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,sBACZ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,aAAY,EAAA,yBAAA,EAA0B,CACjD,CAED,EAAA,OAAA,wCAAY,gBAAiB,EAAA,EAAA,QAAA,EAAoB,GACjD,QACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA;AAAA;AAAA,GAGN,CACF,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,eAAA;AAAA,MAClB,aAAY,EAAA;AAAA,KAAA;AAAA,oBAEZ,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA;AAAA;AACF,GAEJ,CAAA;AAEJ;;;;"}
+{"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 { IconComponent, useAnalytics } from '@backstage/core-plugin-api';\nimport { getEntityRelations } from '@backstage/plugin-catalog-react';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport { useCallback } from 'react';\nimport { CardHeader } from './CardHeader';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';\nimport { TemplateCardContent } from './TemplateCardContent';\nimport { TemplateCardTags } from './TemplateCardTags';\nimport { TemplateCardLinks } from './TemplateCardLinks';\nimport { TemplateCardActions } from './TemplateCardActions';\n\nconst useStyles = makeStyles<Theme>(() => ({\n  actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' },\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  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 { additionalLinks, onSelected, template } = props;\n  const styles = useStyles();\n  const analytics = useAnalytics();\n  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);\n  const hasTags = !!template.metadata.tags?.length;\n  const hasLinks =\n    !!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} data-testid=\"template-card-header\" />\n      <CardContent>\n        <Grid container spacing={2} data-testid=\"template-card-content\">\n          <TemplateCardContent template={template} />\n          {displayDefaultDivider && (\n            <Grid item xs={12}>\n              <Divider data-testid=\"template-card-separator\" />\n            </Grid>\n          )}\n          {hasTags && <TemplateCardTags template={template} />}\n          {hasLinks && (\n            <TemplateCardLinks\n              template={template}\n              additionalLinks={additionalLinks}\n            />\n          )}\n        </Grid>\n      </CardContent>\n      <CardActions\n        className={styles.actionContainer}\n        data-testid=\"template-card-actions\"\n      >\n        <TemplateCardActions\n          canCreateTask={canCreateTask}\n          handleChoose={handleChoose}\n          ownedByRelations={ownedByRelations}\n        />\n      </CardActions>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,MAAM,SAAA,GAAY,WAAkB,OAAO;AAAA,EACzC,iBAAiB,EAAE,OAAA,EAAS,QAAQ,IAAM,EAAA,CAAA,EAAG,YAAY,UAAW;AACtE,CAAE,CAAA,CAAA;AAoBW,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,eAAA,EAAiB,UAAY,EAAA,QAAA,EAAa,GAAA,KAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,gBAAA,GAAmB,kBAAmB,CAAA,QAAA,EAAU,iBAAiB,CAAA;AACvE,EAAA,MAAM,OAAU,GAAA,CAAC,CAAC,QAAA,CAAS,SAAS,IAAM,EAAA,MAAA;AAC1C,EAAM,MAAA,QAAA,GACJ,CAAC,CAAC,eAAA,EAAiB,UAAU,CAAC,CAAC,QAAS,CAAA,QAAA,CAAS,KAAO,EAAA,MAAA;AAC1D,EAAM,MAAA,qBAAA,GAAwB,CAAC,OAAA,IAAW,CAAC,QAAA;AAE3C,EAAA,MAAM,EAAE,OAAA,EAAS,aAAc,EAAA,GAAI,aAAc,CAAA;AAAA,IAC/C,UAAY,EAAA;AAAA,GACb,CAAA;AACD,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAU,SAAA,CAAA,YAAA,CAAa,SAAS,CAA0B,wBAAA,CAAA,CAAA;AAC1D,IAAA,UAAA,GAAa,QAAQ,CAAA;AAAA,GACpB,EAAA,CAAC,SAAW,EAAA,UAAA,EAAY,QAAQ,CAAC,CAAA;AAEpC,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,QAAoB,EAAA,aAAA,EAAY,sBAAuB,EAAA,CAAA;AAAA,oBACnE,GAAA,CAAC,eACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,OAAA,EAAS,CAAG,EAAA,aAAA,EAAY,uBACtC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,uBAAoB,QAAoB,EAAA,CAAA;AAAA,MACxC,qBAAA,oBACE,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EACb,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAY,EAAA,yBAAA,EAA0B,CACjD,EAAA,CAAA;AAAA,MAED,OAAA,oBAAY,GAAA,CAAA,gBAAA,EAAA,EAAiB,QAAoB,EAAA,CAAA;AAAA,MACjD,QACC,oBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA;AAAA;AAAA;AACF,KAAA,EAEJ,CACF,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,eAAA;AAAA,QAClB,aAAY,EAAA,uBAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,YAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}