Initial deployment configuration (#3)

* Add ADR for initial deployment choices.

* Add cloud.gov pages build (I don't expect it to work with pnpm)

* Try to install pnpm in the container

* Install dependencies with pnpm after the cloud.gov pages initialization

* Use "pnpm i" instead of "pnpm ci" (which isn't implemented in pnpm) in the Pages build.

* Tweak pnpm / Cloud.gov Pages hack

* Try wiping out the Cloud.gov dependencies before manually installing.

* Update Vite config to handle a BASEURL.

* Remove unused script

* Turn off Cloud.gov Pages build container caching.

* Add a footer and links to the Github repository

* Remove unused "infra" package reference.

* Initial cloud.gov docassemble configuration. NOTE: This is failing to deploy, because the available space in the 10x sandbox account doesn't accomodate docassemble.

* Initial attempt at docassemble docker configuration, to be pared down.

* Pare down docker config

* Fill in Docassemble client API and corresponding CLI commands.
TODO: Determine why populating a docassemble package from a git repository is not working.

* In Github action, update pnpm version to 8.

* Tweak tests to get passing

* Label docassemble tests as integration tests, so they don't get run by CI (yet).

* Add scaffold for Terraform CDK project.

* Add ADR for Terraform usage.

* Add initial docassemble deploy to AWS Lightsail.

* Put userData script in root namespace

* Use recommended medium-sized instance.

* Add recreate.sh to force-rebuild the docassemble instance.

* Remove currently unused deps to save build container space

* Hack in skip cli build step

* Add Turborepo for more managable builds.

* Add ADR for pnpm and Turborepo.

* Add Turborepo to Cloud.gov pages build.

* Add turbo to project dependencies

.github/workflows/run-tests.yml

@@ -33,7 +33,7 @@ jobs:
         uses: pnpm/action-setup@v2
         id: pnpm-install
         with:
-          version: 7
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory

.gitignore

@@ -1,2 +1,7 @@
+.env
+*.code-workspace
+_site
+.turbo/
+.vscode/
 coverage/
 node_modules/

apps/cli/package.json

@@ -5,13 +5,14 @@
   "license": "CC0",
   "main": "src/index.ts",
   "scripts": {
-    "build": "tsc -p .",
+    "build": "echo 'skipping...' #tsc -p .",
     "cli": "ts-node src/index.ts",
     "test": "vitest run --coverage"
   },
   "dependencies": {
     "@atj/interviews": "workspace:*",
     "@atj/dependency-graph": "workspace:*",
-    "commander": "^9.4.1"
+    "@atj/docassemble": "workspace:*",
+    "commander": "^11.0.0"
   }
 }

apps/cli/src/cli-controller.test.ts

@@ -8,9 +8,14 @@ describe('cli controller', () => {
     const ctx = {
       console: mock<Console>({ log: vi.fn() }),
       workspaceRoot: '.',
+      docassemble: {
+        fetch: fetch,
+        apiUrl: '',
+        apiKey: '',
+      },
     };
     const app = CliController(ctx);
-    await app.parseAsync(['node', 'script-name', 'hello-world', 'aardvark']);
-    expect(ctx.console.log).toHaveBeenCalledWith('Hello, aardvark!');
+    await app.parseAsync(['node.js', 'dist/index.js', 'hello']);
+    expect(ctx.console.log).toHaveBeenCalledWith('Hello!');
   });
 });

apps/cli/src/cli-controller.ts

@@ -1,27 +1,61 @@
 import { Command } from 'commander';
 
 import { createDependencyGraph } from '@atj/dependency-graph';
+import { DocassembleClient, DocassembleClientContext } from '@atj/docassemble';
 
 type Context = {
   console: Console;
   workspaceRoot: string;
+  docassemble: DocassembleClientContext;
 };
 
 export const CliController = (ctx: Context) => {
-  const cli = new Command();
+  const cli = new Command().description(
+    'CLI to interact with the ATJ workspace'
+  );
+
   cli
-    .command('hello-world <echo-value>')
-    .description('hello world')
-    .action(async echoValue => {
-      await createDependencyGraph(ctx.workspaceRoot);
-      ctx.console.log(`Hello, ${echoValue}!`);
+    .command('hello')
+    .description('say hello')
+    .action(() => {
+      ctx.console.log('Hello!');
     });
+
   cli
     .command('create-workspace-graph')
     .description('create a dependency graph of projects in the workspace')
     .action(async () => {
       await createDependencyGraph(ctx.workspaceRoot);
       ctx.console.log('wrote workspace dependency graph');
     });
+
+  const docassemble = cli
+    .command('docassemble')
+    .description('docassemble commands');
+
+  docassemble
+    .command('populate')
+    .description('populate a docassemble instance with test data')
+    .option(
+      '-r, --repository',
+      'repository to populate from',
+      'https://github.com/SuffolkLITLab/docassemble-MassAccess'
+    )
+    .option('-b, --branch', 'branch of git repository to populate from', 'main')
+    .action(async ({ repository, branch }) => {
+      const client = new DocassembleClient(ctx.docassemble);
+      const result = await client.addPackage(repository, branch);
+      ctx.console.log('populated docassemble instance', result);
+    });
+
+  docassemble
+    .command('list-interviews')
+    .description('list docassemble interviews')
+    .action(async () => {
+      const client = new DocassembleClient(ctx.docassemble);
+      const interviews = await client.getInterviews();
+      ctx.console.log('populated docassemble instance');
+    });
+
   return cli;
 };

apps/cli/src/index.ts

@@ -1,10 +1,19 @@
 import { join } from 'path';
+import process from 'process';
 import { CliController } from './cli-controller';
 
 // This should map to the directory containing the package.json.
 // By convention, assume that the originating process was run from the root
 // directory.
 const workspaceRoot = join(process.cwd(), '../../');
 
-const app = CliController({ console, workspaceRoot });
+const app = CliController({
+  console,
+  workspaceRoot,
+  docassemble: {
+    fetch,
+    apiUrl: 'http://localhost:8011',
+    apiKey: process.env.VITE_DOCASSEMBLE_API_KEY || '',
+  },
+});
 app.parseAsync(process.argv).then(() => console.log('Done'));

apps/frontend/package.json

@@ -6,28 +6,22 @@
   "scripts": {
     "build": "tsc && vite build",
     "dev": "vite",
-    "preview": "vite preview",
-    "test": "vitest"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@atj/docassemble": "workspace:*",
     "@atj/documents": "workspace:*",
     "@atj/interviews": "workspace:*",
-    "@axe-core/playwright": "^4.7.3",
     "@uswds/uswds": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.37.1",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.15",
-    "playwright": "^1.37.1",
     "sass": "^1.66.1",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.4"
+    "vite": "^4.4.9"
   }
 }

apps/frontend/src/app.tsx

@@ -0,0 +1,17 @@
+import { Header } from './components/header';
+import { Footer } from './components/footer';
+import { UsaBanner } from './components/usa-banner';
+import { HomePage } from './routes';
+import { useAppContext } from './context';
+
+export const App = () => {
+  const context = useAppContext();
+  return (
+    <div className="App">
+      <UsaBanner />
+      <Header />
+      <HomePage />
+      <Footer github={context.github} />
+    </div>
+  );
+};

apps/frontend/src/components/footer.tsx

@@ -0,0 +1,53 @@
+import { type GithubRepository, getBranchTreeUrl } from '../lib/github';
+
+type FooterProps = {
+  github: GithubRepository;
+};
+
+export const Footer = (props: FooterProps) => {
+  return (
+    <footer className="usa-footer usa-footer--slim">
+      <div className="grid-container usa-footer__return-to-top">
+        <a href="#">Return to top</a>
+      </div>
+      <div className="usa-footer__primary-section">
+        <div className="usa-footer__primary-container grid-row">
+          <div className="mobile-lg:grid-col-8">
+            <nav className="usa-footer__nav" aria-label="Footer navigation,">
+              <ul className="grid-row grid-gap">
+                <li
+                  className="
+                mobile-lg:grid-col-6
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+                >
+                  <a
+                    className="usa-footer__primary-link"
+                    href="https://10x.gsa.gov/"
+                  >
+                    10x
+                  </a>
+                </li>
+                <li
+                  className="
+                mobile-lg:grid-col-6
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+                >
+                  <a
+                    className="usa-footer__primary-link"
+                    href={getBranchTreeUrl(props.github, true)}
+                  >
+                    Github repository
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

apps/frontend/src/views/context.tsx → apps/frontend/src/context.tsx

@@ -1,15 +1,18 @@
 import { createContext, useContext } from 'react';
+import { GithubRepository } from './lib/github';
 
 export interface Backend {
   helloWorld(echoValue: string): string;
 }
 
 export interface Context {
   backend: Backend;
+  github: GithubRepository;
 }
 
 export const AppContext = createContext<Context>({
   backend: {} as Backend,
+  github: {} as GithubRepository,
 });
 
 export const useAppContext = () => {

apps/frontend/src/index.ts

@@ -1,7 +1,8 @@
-import { createAppRoot } from './views/main';
+import { createAppRoot } from './main';
 
 createAppRoot(document.getElementById('root') as HTMLElement, {
   backend: {
     helloWorld: (str: string) => str,
   },
+  github: import.meta.env.GITHUB,
 });

apps/frontend/src/lib/github.ts

@@ -0,0 +1,27 @@
+export type GithubRepository = {
+  owner: string;
+  repository: string;
+  branch: string;
+  commit: string;
+};
+
+export const DEFAULT_REPOSITORY: GithubRepository = {
+  owner: 'gsa-tts',
+  repository: 'atj-platform',
+  branch: 'main',
+  commit: 'main',
+};
+
+export const getBranchTreeUrl = (
+  github: GithubRepository,
+  useDefaultShortForm = true
+) => {
+  if (useDefaultShortForm && github.branch === DEFAULT_REPOSITORY.branch) {
+    return `https://github.com/${github.owner}/${github.repository}`;
+  }
+  return `https://github.com/${github.owner}/${github.repository}/tree/${github.branch}`;
+};
+
+export const getNewIssueUrl = (github: GithubRepository) => {
+  return `https://github.com/${github.owner}/${github.repository}/issues/new/choose`;
+};