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

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

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