(core) Improve API Console and link from Document Settings.

Summary:
Changes to building and serving:
- Remove unpkg dependencies, add npm module for swagger-ui-dist instead.
- Move apiconsole JS logic into core/app/client/apiconsole.ts, and use TypeScript.
- Add symlinks to swagger in static/ and core/static/.
- Refactor loadScript, and add loadCssFile; use these to load swagger-ui resources.

Changes to console itself:
- Support docId, workspaceId, orgId URL parameters. When present, the matching
  value in dropdowns is moved to the front and marked as "(Current)".
- Fix the ordering of example values, particularly for workspaces.
- Remove unwanted example values.
- Hide confusing "Authorize" button.
- Hide API keys, and rely consistently on cookies for executing API calls.

Integration into Grist:
- Added a button to Document Settings, just under document ID in "API".
- The button opens a separate page, passing in org, workspace, and doc info for the current doc.

Test Plan: Only tested manually, no automated tests yet.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D4173

app/client/ui/DocumentSettings.ts

@@ -8,6 +8,7 @@ import {ACSelectItem, buildACSelect} from 'app/client/lib/ACSelect';
 import {copyToClipboard} from 'app/client/lib/clipboardUtils';
 import {makeT} from 'app/client/lib/localization';
 import {reportError} from 'app/client/models/AppModel';
+import type {DocPageModel} from 'app/client/models/DocPageModel';
 import {urlState} from 'app/client/models/gristUrlState';
 import {KoSaveableObservable} from 'app/client/models/modelUtil';
 import {docListHeader} from 'app/client/ui/DocMenuCss';
@@ -85,6 +86,10 @@ export class DocSettingsPage extends Disposable {
           await copyToClipboard(docPageModel.currentDocId.get()!);
         }),
       )),
+      cssDataRow(primaryButtonLink(t('API Console'), {
+        target: '_blank',
+        href: getApiConsoleLink(docPageModel),
+      })),
       cssHeader(t('Webhooks'), cssBeta('Beta')),
       cssDataRow(primaryButtonLink(t('Manage Webhooks'), urlState().setLinkUrl({docPage: 'webhook'}))),
     );
@@ -103,6 +108,16 @@ export class DocSettingsPage extends Disposable {
   }
 }
 
+function getApiConsoleLink(docPageModel: DocPageModel) {
+  const url = new URL(location.href);
+  url.pathname = '/apiconsole';
+  url.searchParams.set('docId', docPageModel.currentDocId.get()!);
+  // Some extra question marks to placate a test fixture at test/fixtures/projects/DocumentSettings.ts
+  url.searchParams.set('workspaceId', String(docPageModel.currentWorkspace?.get()?.id || ''));
+  url.searchParams.set('orgId', String(docPageModel.appModel?.topAppModel.currentSubdomain.get()));
+  return url.href;
+}
+
 type LocaleItem = ACSelectItem & {locale?: string};
 
 function buildLocaleSelect(

app/client/ui/Tools.ts

@@ -100,17 +100,6 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
       testId('settings'),
     ),
     cssSpacer(),
-    // TODO make this look nice, then make it visible when the console is ready.
-    // For now let's keep it private, so this shouldn't be uncommented.
-    // cssPageEntry(
-    //   cssPageLink(
-    //     cssPageIcon('Code'),
-    //     cssPageIcon('FieldLink'),
-    //     cssLinkText(t("API Console")),
-    //     {href: window.origin + '/apiconsole', target: '_blank'}
-    //   ),
-    //   testId('api'),
-    // ),
     dom.maybe(docPageModel.currentDoc, (doc) => {
       const ex = buildExamples().find(e => e.urlId === doc.urlId);
       if (!ex || !ex.tutorialUrl) { return null; }