Merge pull request #2557 from backstage/mob/scaffolder-cra-fixes

feat(scaffolder): cra add gha integration, fix imports

.changeset/good-hairs-sniff.md

@@ -0,0 +1,8 @@
+---
+'@backstage/cli': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-scaffolder-backend': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Added Github Actions for Create React App, and allow better imports of files inside a module when they're exposed using `files` in `package.json`

packages/app/src/index.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-// eslint-disable-next-line monorepo/no-internal-import
 import '@backstage/cli/asset-types';
 import React from 'react';
 import ReactDOM from 'react-dom';

packages/cli/package.json

@@ -66,7 +66,7 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-monorepo": "^0.2.1",
+    "eslint-plugin-monorepo": "^0.3.2",
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^4.0.0",
     "fork-ts-checker-webpack-plugin": "^4.0.5",

plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx

@@ -30,13 +30,13 @@ import {
 
 import React, { Suspense } from 'react';
 import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs';
-import LinePart from 'react-lazylog/build/LinePart';
 import { useProjectName } from '../useProjectName';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import DescriptionIcon from '@material-ui/icons/Description';
 import { Entity } from '@backstage/catalog-model';
 
 const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
+const LinePart = React.lazy(() => import('react-lazylog/build/LinePart'));
 
 const useStyles = makeStyles<Theme>(() => ({
   button: {

plugins/scaffolder-backend/sample-templates/create-react-app/template.yaml

@@ -18,6 +18,7 @@ spec:
     required: 
       - component_id
       - use_typescript
+      - description
     properties:
       component_id:
         title: Name
@@ -33,3 +34,9 @@ spec:
         type: boolean
         description: Include TypeScript
         default: true
+      use_github_actions:
+        title:  Use Github Actions workflows to build this component
+        type: boolean
+        description: Use Github Actions
+        default: true
+

plugins/scaffolder-backend/src/scaffolder/stages/templater/cra/index.ts

@@ -14,17 +14,23 @@
  * limitations under the License.
  */
 import fs from 'fs-extra';
-import { runDockerContainer } from './helpers';
-import { TemplaterBase, TemplaterRunOptions } from '.';
+import { runDockerContainer } from '../helpers';
+import { TemplaterBase, TemplaterRunOptions } from '..';
 import path from 'path';
-import { TemplaterRunResult } from './types';
+import { TemplaterRunResult } from '../types';
 import * as yaml from 'yaml';
+import { resolvePackagePath } from '@backstage/backend-common';
+
+// TODO(blam): Replace with the universal import from github-actions after a release
+// As it will break the E2E without it
+const GITHUB_ACTIONS_ANNOTATION = 'github.com/project-slug';
 
 export class CreateReactAppTemplater implements TemplaterBase {
   public async run(options: TemplaterRunOptions): Promise<TemplaterRunResult> {
     const {
       component_id: componentName,
       use_typescript: withTypescript,
+      use_github_actions: withGithubActions,
       description,
       owner,
     } = options.values;
@@ -48,13 +54,34 @@ export class CreateReactAppTemplater implements TemplaterBase {
       },
     });
 
-    // Need to also make a catalog-info.yaml to store the data about the service.
+    const extraAnnotations: Record<string, string> = {};
+    const finalDir = path.resolve(
+      resultDir,
+      options.values.component_id as string,
+    );
+
+    if (withGithubActions) {
+      await fs.promises.mkdir(`${finalDir}/.github`);
+      await fs.promises.mkdir(`${finalDir}/.github/workflows`);
+      await fs.promises.copyFile(
+        `${resolvePackagePath(
+          '@backstage/plugin-scaffolder-backend',
+        )}/templates/.github/workflows/main.yml`,
+        `${finalDir}/.github/workflows/main.yml`,
+      );
+
+      extraAnnotations[GITHUB_ACTIONS_ANNOTATION] = options.values.storePath;
+    }
+
     const componentInfo = {
       apiVersion: 'backstage.io/v1alpha1',
       kind: 'Component',
       metadata: {
         name: componentName,
         description,
+        annotations: {
+          ...extraAnnotations,
+        },
       },
       spec: {
         type: 'website',
@@ -63,11 +90,6 @@ export class CreateReactAppTemplater implements TemplaterBase {
       },
     };
 
-    const finalDir = path.resolve(
-      resultDir,
-      options.values.component_id as string,
-    );
-
     await fs.promises.writeFile(
       `${finalDir}/catalog-info.yaml`,
       yaml.stringify(componentInfo),

plugins/scaffolder-backend/src/scaffolder/stages/templater/cra/templates/.github/workflows/main.yml

@@ -0,0 +1,41 @@
+name: CRA Build
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+        
+    steps:
+    - name: checkout code
+      uses: actions/checkout@v1
+    - name: get yarn cache
+      id: yarn-cache
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+    - uses: actions/cache@v2
+      with:
+        path: ${{ steps.yarn-cache.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+    - name: use node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: yarn install, build, and test
+      working-directory: .
+      run: |
+        yarn install
+        yarn build
+        yarn test
+      env:
+        CI: true

yarn.lock

@@ -11784,10 +11784,10 @@ eslint-plugin-jsx-a11y@^6.2.1:
     has "^1.0.3"
     jsx-ast-utils "^2.2.1"
 
-eslint-plugin-monorepo@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/eslint-plugin-monorepo/-/eslint-plugin-monorepo-0.2.1.tgz#96cfc4af241077675f40d7017377897fb8ea537b"
-  integrity sha512-82JaAjuajVAsDT+pMvdt275H6F55H3MEofaMZbJurGqfXpPDT4eayTgYyyjfd1XR8VD1S+ORbuHCULnSqNyD9g==
+eslint-plugin-monorepo@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/eslint-plugin-monorepo/-/eslint-plugin-monorepo-0.3.2.tgz#bc546cbe84b21ae6a7622f261bf9fe73b1524367"
+  integrity sha512-CypTAqHjTR05XxzqDj7x88oVu2GiqqQA/datD9kIwciHzpj0oE4YbTdyEFFKADgd7dbd21KliSlUpOvo626FBw==
   dependencies:
     eslint-module-utils "^2.1.1"
     get-monorepo-packages "^1.1.0"
@@ -13195,6 +13195,13 @@ git-url-parse@^11.4.3:
   dependencies:
     git-up "^4.0.0"
 
+git-url-parse@^11.4.3:
+  version "11.4.3"
+  resolved "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.4.3.tgz#1610284edf1f14964180f5b3399ec68b692cfd87"
+  integrity sha512-LZTTk0nqJnKN48YRtOpR8H5SEfp1oM2tls90NuZmBxN95PnCvmuXGzqQ4QmVirBgKx2KPYfPGteX3/raWjKenQ==
+  dependencies:
+    git-up "^4.0.0"
+
 gitconfiglocal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"