Add Import Package page to catalog

packages/site-client/package.json

@@ -86,6 +86,7 @@
     }
   },
   "dependencies": {
+    "@lit-labs/task": "^2.0.0",
     "@webcomponents/catalog-api": "^0.0.0",
     "lit": "^2.6.0",
     "lit-analyzer": "^1.2.1"

packages/site-client/src/pages/import/boot.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import 'lit/experimental-hydrate-support.js';
+import './wco-catalog-import-page.js';

packages/site-client/src/pages/import/wco-catalog-import-page.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {WCOPage} from '../../shared/wco-page.js';
+import {Task} from '@lit-labs/task';
+
+@customElement('wco-catalog-import-page')
+export class WCOCatalogImportPage extends WCOPage {
+  private _importTask = new Task(this, {
+    task: async ([packageName]: [packageName: string | undefined]) => {
+      console.log('_importTask', packageName);
+
+      if (packageName !== undefined && packageName.trim().length > 0) {
+        const response = await fetch(`/catalog/import`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            packageName,
+          }),
+        });
+        const result = await response.json();
+        return result;
+      }
+    },
+    args: () => [this._packageName] as [string],
+  });
+
+  @state()
+  private _packageName?: string;
+
+  renderContent() {
+    return html`
+      <h1>Import a Package</h1>
+      <label>Package: <input @change=${this._onPackageNameChange} /></label>
+      ${this._importTask.render({
+        complete: (value) => html` <h2>Imported</h2>
+          <pre>${JSON.stringify(value, undefined, 2)}</pre>`,
+        pending: () => html`<p>Importing package...</p>`,
+      })}
+    `;
+  }
+
+  private _onPackageNameChange(e: Event) {
+    this._packageName = (e.target as HTMLInputElement).value;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wco-catalog-import-page': WCOCatalogImportPage;
+  }
+}

packages/site-server/package.json

@@ -120,12 +120,14 @@
     "@webcomponents/internal-site-templates": "^0.0.0",
     "google-auth-library": "^8.7.0",
     "koa": "^2.13.4",
+    "koa-bodyparser": "^4.3.0",
     "koa-conditional-get": "^3.0.0",
     "koa-etag": "^4.0.0",
     "koa-static": "^5.0.0",
     "marked": "^4.2.5"
   },
   "devDependencies": {
+    "@types/koa-bodyparser": "^4.3.10",
     "uvu": "^0.5.6"
   }
 }

packages/site-server/src/lib/catalog/router.ts

@@ -5,17 +5,23 @@
  */
 
 import Router from '@koa/router';
-import {handleCatalogRoute} from './routes/catalog/catalog-route.js';
-import {handleCatalogSearchRoute} from './routes/catalog/search-route.js';
-import {handleElementRoute} from './routes/element/element-route.js';
-// import cors from '@koa/cors';
+import {handleCatalogRoute} from './routes/catalog-page.js';
+import {handleCatalogImportRoute} from './routes/import-page.js';
+import {handleCatalogImportApiRoute} from './routes/import-api.js';
+import {handleElementRoute} from './routes/element-page.js';
+import {handleCatalogSearchRoute} from './routes/search-api.js';
+import bodyParser from 'koa-bodyparser';
 
 export const catalogRouter = new Router();
 
-// catalogRouter.use(cors());
+// Needed for /import
+catalogRouter.use(bodyParser());
 
 catalogRouter.get('/', handleCatalogRoute);
 
 catalogRouter.get('/search', handleCatalogSearchRoute);
 
+catalogRouter.get('/import', handleCatalogImportRoute);
+catalogRouter.post('/import', handleCatalogImportApiRoute);
+
 catalogRouter.get('/element/:path+', handleElementRoute);

packages/site-server/src/lib/catalog/routes/element/element-route.ts → packages/site-server/src/lib/catalog/routes/element-page.ts

@@ -14,7 +14,7 @@ import Router from '@koa/router';
 import {marked} from 'marked';
 
 import {renderElementPage} from '@webcomponents/internal-site-client/lib/pages/element/shell.js';
-import {client} from '../../graphql.js';
+import {client} from '../graphql.js';
 
 import type {ElementData} from '@webcomponents/internal-site-client/lib/pages/element/wco-element-page.js';
 

packages/site-server/src/lib/catalog/routes/import-api.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {DefaultContext, DefaultState, ParameterizedContext} from 'koa';
+import Router from '@koa/router';
+import {client} from '../graphql.js';
+import {gql} from '@apollo/client/core/index.js';
+
+const importMutation = gql`
+  mutation ImportPackage($packageName: String!) {
+    importPackage(packageName: $packageName) {
+      ... on ReadablePackageInfo {
+        version {
+          ... on ReadablePackageVersion {
+            version
+            problems {
+              code
+              severity
+              message
+              filePath
+            }
+            customElements {
+              tagName
+              declaration
+              className
+              jsExport
+            }
+          }
+          ... on UnreadablePackageVersion {
+            version
+            status
+            problems {
+              code
+              severity
+              message
+              filePath
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const handleCatalogImportApiRoute = async (
+  context: ParameterizedContext<
+    DefaultState,
+    DefaultContext & Router.RouterParamContext<DefaultState, DefaultContext>,
+    unknown
+  >
+) => {
+  console.log('context.request.body', context.request.body);
+  const packageName = (context.request.body as Record<string, string>)[
+    'packageName'
+  ];
+  context.type = 'json';
+
+  if (typeof packageName !== 'string') {
+    context.status = 400;
+    context.body = {
+      message: 'Body parmeter `packageName` must be a string',
+    };
+    return;
+  }
+
+  const result = await client.mutate({
+    mutation: importMutation,
+    variables: {packageName},
+  });
+
+  if (result.errors) {
+    context.status = 500;
+    context.body = {
+      message: result.errors,
+    };
+    return;
+  }
+
+  context.status = 200;
+  context.body = result.data;
+};

packages/site-server/src/lib/catalog/routes/import-page.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// This must be imported before lit
+import {renderPage} from '@webcomponents/internal-site-templates/lib/base.js';
+import {DefaultContext, DefaultState, ParameterizedContext} from 'koa';
+import {html} from 'lit';
+import {Readable} from 'stream';
+import Router from '@koa/router';
+
+import '@webcomponents/internal-site-client/lib/pages/import/wco-catalog-import-page.js';
+
+export const handleCatalogImportRoute = async (
+  context: ParameterizedContext<
+    DefaultState,
+    DefaultContext & Router.RouterParamContext<DefaultState, DefaultContext>,
+    unknown
+  >
+) => {
+  // Set location because wco-nav-bar reads pathname from it. URL isn't
+  // exactly a Location, but it's close enough for read-only uses
+  globalThis.location = new URL(context.URL.href) as unknown as Location;
+
+  context.body = Readable.from(
+    renderPage({
+      title: `Web Components Catalog - Import Package`,
+      initScript: '/js/import/boot.js',
+      content: html`<wco-catalog-import-page></wco-catalog-import-page>`,
+    })
+  );
+  context.type = 'html';
+  context.status = 200;
+};

packages/site-server/src/lib/catalog/routes/catalog/search-route.ts → packages/site-server/src/lib/catalog/routes/search-api.ts

@@ -6,7 +6,7 @@
 
 import {DefaultContext, DefaultState, ParameterizedContext} from 'koa';
 import Router from '@koa/router';
-import {client} from '../../graphql.js';
+import {client} from '../graphql.js';
 import {gql} from '@apollo/client/core/index.js';
 
 const elementsQuery = gql`