Merge remote-tracking branch 'upstream/master' into feat/scaffolder-anyof

plugins/scaffolder/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @backstage/plugin-scaffolder
 
+## 0.9.1
+
+### Patch Changes
+
+- 99fbef232: Adding Headings for Accessibility on the Scaffolder Plugin
+- cb0206b2b: Respect top-level UI schema keys in scaffolder forms. Allows more advanced RJSF features such as explicit field ordering.
+- Updated dependencies [94da20976]
+- Updated dependencies [d8cc7e67a]
+- Updated dependencies [99fbef232]
+- Updated dependencies [ab07d77f6]
+- Updated dependencies [931b21a12]
+- Updated dependencies [937ed39ce]
+- Updated dependencies [9a9e7a42f]
+- Updated dependencies [50ce875a0]
+  - @backstage/core@0.7.6
+  - @backstage/theme@0.2.6
+
 ## 0.9.0
 
 ### Minor Changes

plugins/scaffolder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -33,11 +33,11 @@
     "@backstage/catalog-client": "^0.3.10",
     "@backstage/catalog-model": "^0.7.7",
     "@backstage/config": "^0.1.4",
-    "@backstage/core": "^0.7.5",
+    "@backstage/core": "^0.7.6",
     "@backstage/integration": "^0.5.1",
     "@backstage/integration-react": "^0.1.1",
     "@backstage/plugin-catalog-react": "^0.1.4",
-    "@backstage/theme": "^0.2.5",
+    "@backstage/theme": "^0.2.6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
@@ -55,12 +55,11 @@
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",
     "react-use": "^15.3.3",
-    "swr": "^0.3.0",
     "use-immer": "^0.5.1",
     "zen-observable": "^0.8.15"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.6.8",
+    "@backstage/cli": "^0.6.9",
     "@backstage/dev-utils": "^0.1.13",
     "@backstage/test-utils": "^0.1.10",
     "@testing-library/jest-dom": "^5.10.1",

plugins/scaffolder/src/components/FavouriteTemplate/FavouriteTemplate.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ComponentProps, useMemo } from 'react';
+import { useStarredEntities } from '@backstage/plugin-catalog-react';
+import { IconButton, makeStyles, Tooltip, withStyles } from '@material-ui/core';
+import StarBorder from '@material-ui/icons/StarBorder';
+import Star from '@material-ui/icons/Star';
+import { Entity } from '@backstage/catalog-model';
+
+type Props = ComponentProps<typeof IconButton> & { entity: Entity };
+
+const YellowStar = withStyles({
+  root: {
+    color: '#f3ba37',
+  },
+})(Star);
+
+const WhiteBorderStar = withStyles({
+  root: {
+    color: '#ffffff',
+  },
+})(StarBorder);
+
+const useStyles = makeStyles(theme => ({
+  starButton: {
+    position: 'absolute',
+    top: theme.spacing(0.5),
+    right: theme.spacing(0.5),
+    padding: '0.25rem',
+  },
+}));
+
+export const favouriteTemplateTooltip = (isStarred: boolean) =>
+  isStarred ? 'Remove from favorites' : 'Add to favorites';
+
+export const favouriteTemplateIcon = (isStarred: boolean) =>
+  isStarred ? <YellowStar /> : <WhiteBorderStar />;
+
+/**
+ * IconButton for showing if a current entity is starred and adding/removing it from the favourite entities
+ * @param props MaterialUI IconButton props extended by required `entity` prop
+ */
+export const FavouriteTemplate = (props: Props) => {
+  const classes = useStyles();
+  const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
+  const isStarred = useMemo(() => isStarredEntity(props.entity), [
+    isStarredEntity,
+    props.entity,
+  ]);
+  return (
+    <IconButton
+      color="inherit"
+      className={classes.starButton}
+      {...props}
+      onClick={() => toggleStarredEntity(props.entity)}
+    >
+      <Tooltip title={favouriteTemplateTooltip(isStarred)}>
+        {favouriteTemplateIcon(isStarred)}
+      </Tooltip>
+    </IconButton>
+  );
+};

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -39,7 +39,7 @@ import { ResultsFilter } from '../ResultsFilter/ResultsFilter';
 import { ScaffolderFilter } from '../ScaffolderFilter';
 import { ButtonGroup } from '../ScaffolderFilter/ScaffolderFilter';
 import SearchToolbar from '../SearchToolbar/SearchToolbar';
-import { TemplateCard, TemplateCardProps } from '../TemplateCard';
+import { TemplateCard } from '../TemplateCard';
 import { registerComponentRouteRef } from '../../routes';
 
 const useStyles = makeStyles(theme => ({
@@ -51,19 +51,6 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const getTemplateCardProps = (
-  template: TemplateEntityV1alpha1,
-): TemplateCardProps & { key: string } => {
-  return {
-    key: template.metadata.uid!,
-    name: template.metadata.name,
-    title: `${(template.metadata.title || template.metadata.name) ?? ''}`,
-    type: template.spec.type ?? '',
-    description: template.metadata.description ?? '-',
-    tags: (template.metadata?.tags as string[]) ?? [],
-  };
-};
-
 export const ScaffolderPageContents = () => {
   const styles = useStyles();
   const {
@@ -188,7 +175,7 @@ export const ScaffolderPageContents = () => {
               {matchingEntities &&
                 matchingEntities?.length > 0 &&
                 matchingEntities.map(template => (
-                  <TemplateCard {...getTemplateCardProps(template)} />
+                  <TemplateCard template={template} />
                 ))}
             </ItemCardGrid>
           </div>

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -28,8 +28,13 @@ import {
 import React from 'react';
 import { generatePath } from 'react-router';
 import { rootRouteRef } from '../../routes';
+import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
+import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate';
 
 const useStyles = makeStyles({
+  cardHeader: {
+    position: 'relative',
+  },
   title: {
     backgroundImage: ({ backgroundImage }: any) => backgroundImage,
   },
@@ -43,6 +48,10 @@ const useStyles = makeStyles({
 });
 
 export type TemplateCardProps = {
+  template: TemplateEntityV1alpha1;
+};
+
+type TemplateProps = {
   description: string;
   tags: string[];
   title: string;
@@ -50,42 +59,55 @@ export type TemplateCardProps = {
   name: string;
 };
 
-export const TemplateCard = ({
-  description,
-  tags,
-  title,
-  type,
-  name,
-}: TemplateCardProps) => {
+const getTemplateCardProps = (
+  template: TemplateEntityV1alpha1,
+): TemplateProps & { key: string } => {
+  return {
+    key: template.metadata.uid!,
+    name: template.metadata.name,
+    title: `${(template.metadata.title || template.metadata.name) ?? ''}`,
+    type: template.spec.type ?? '',
+    description: template.metadata.description ?? '-',
+    tags: (template.metadata?.tags as string[]) ?? [],
+  };
+};
+
+export const TemplateCard = ({ template }: TemplateCardProps) => {
   const backstageTheme = useTheme<BackstageTheme>();
   const rootLink = useRouteRef(rootRouteRef);
+  const templateProps = getTemplateCardProps(template);
 
-  const themeId = pageTheme[type] ? type : 'other';
+  const themeId = pageTheme[templateProps.type] ? templateProps.type : 'other';
   const theme = backstageTheme.getPageTheme({ themeId });
   const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(`${rootLink()}/templates/:templateName`, {
-    templateName: name,
+    templateName: templateProps.name,
   });
 
   return (
     <Card>
-      <CardMedia>
+      <CardMedia className={classes.cardHeader}>
+        <FavouriteTemplate entity={template} />
         <ItemCardHeader
-          title={title}
-          subtitle={type}
+          title={templateProps.title}
+          subtitle={templateProps.type}
           classes={{ root: classes.title }}
         />
       </CardMedia>
       <CardContent>
         <Box>
-          {tags?.map(tag => (
+          {templateProps.tags?.map(tag => (
             <Chip size="small" label={tag} key={tag} />
           ))}
         </Box>
-        <Box className={classes.description}>{description}</Box>
+        <Box className={classes.description}>{templateProps.description}</Box>
       </CardContent>
       <CardActions>
-        <Button color="primary" to={href} aria-label={`Choose ${title} `}>
+        <Button
+          color="primary"
+          to={href}
+          aria-label={`Choose ${templateProps.title} `}
+        >
           Choose
         </Button>
       </CardActions>