report: save to trace-cafe storage for auth-less permalinks

flow-report/src/topbar.tsx

@@ -52,7 +52,7 @@ const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonEl
   const flowResult = useFlowResult();
   const strings = useLocalizedStrings();
   const [showHelpDialog, setShowHelpDialog] = useState(false);
-  const {getReportHtml, saveAsGist} = useOptions();
+  const {getReportHtml, uploadForPermalink} = useOptions();
 
   return (
     <div className="Topbar">
@@ -74,11 +74,11 @@ const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonEl
           >{strings.save}</TopbarButton>
       }
       {
-        saveAsGist &&
+        uploadForPermalink &&
           <TopbarButton
-            onClick={() => saveAsGist(flowResult)}
+            onClick={() => uploadForPermalink(flowResult)}
             label="Button that saves the report to a gist"
-          >{strings.dropdownSaveGist}</TopbarButton>
+          >{strings.dropdownUploadForPermalink}</TopbarButton>
       }
       <div style={{flexGrow: 1}} />
       <TopbarButton

flow-report/test/topbar-test.tsx

@@ -59,15 +59,15 @@ it('save button opens save dialog for HTML file', async () => {
   );
 });
 
-it('provides save as gist option if defined', async () => {
-  const saveAsGist = jestMock.fn();
-  options = {saveAsGist};
+it('provides permalink option if defined', async () => {
+  const uploadForPermalink = jestMock.fn();
+  options = {uploadForPermalink};
   const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
 
-  const saveButton = root.getByText('Save as Gist');
+  const saveButton = root.getByText('Get Permalink');
   saveButton.click();
 
-  expect(saveAsGist).toHaveBeenCalledWith(flowResult);
+  expect(uploadForPermalink).toHaveBeenCalledWith(flowResult);
 });
 
 it('toggles help dialog', async () => {

flow-report/types/flow-report.d.ts

@@ -23,7 +23,7 @@ declare global {
 
     export interface FlowReportOptions {
       getReportHtml?: (flowResult: FlowResult_) => string;
-      saveAsGist?: (flowResult: FlowResult_) => void;
+      uploadForPermalink?: (flowResult: FlowResult_) => void;
     }
 
     export interface HashState {

report/assets/templates.html

@@ -265,8 +265,8 @@
       background-color: var(--color-gray-200);
       outline: none;
     }
-    /* save-gist option hidden in report. */
-    .lh-tools__dropdown a[data-action='save-gist'] {
+    /* upload-for-permalink option hidden in report. */
+    .lh-tools__dropdown a[data-action='upload-for-permalink'] {
       display: none;
     }
 
@@ -350,7 +350,7 @@
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download lh-hidden" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
+        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownUploadForPermalink" data-action="upload-for-permalink"></a>
         <!-- Only enabled if Options.onViewTrace is set and we are on simulated throttling. -->
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open lh-hidden" data-i18n="dropdownViewUnthrottledTrace" data-action="view-unthrottled-trace"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>

report/renderer/report-ui-features.js

@@ -173,8 +173,9 @@ export class ReportUIFeatures {
 
   /**
    * Save json as a gist. Unimplemented in base UI features.
+   * TODO: i think it can be in base now..
    */
-  saveAsGist() {
+  uploadForPermalink() {
     // TODO ?
     throw new Error('Cannot save as gist from base report');
   }

report/renderer/report-utils.js

@@ -411,8 +411,8 @@ const UIStrings = {
   dropdownSaveJSON: 'Save as JSON',
   /** Option in a dropdown menu that opens the current report in the Lighthouse Viewer Application. */
   dropdownViewer: 'Open in Viewer',
-  /** Option in a dropdown menu that saves the current report as a new GitHub Gist. */
-  dropdownSaveGist: 'Save as Gist',
+  /** Option in a dropdown menu that gets a permalink URL for the current report. */
+  dropdownUploadForPermalink: 'Get Permalink',
   /** Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. */
   dropdownDarkTheme: 'Toggle Dark Theme',
   /** Option in a dropdown menu that opens the trace of the page without throttling. "Unthrottled" can be replaced with "Original". */

report/renderer/topbar-features.js

@@ -106,8 +106,8 @@
         }
         break;
       }
-      case 'save-gist': {
-        this._reportUIFeatures.saveAsGist();
+      case 'upload-for-permalink': {
+        this._reportUIFeatures.uploadForPermalink();
         break;
       }
       case 'toggle-dark': {

viewer/app/src/github-api.js

@@ -11,9 +11,6 @@
 import idbKeyval from 'idb-keyval';
 
 import {FirebaseAuth} from './firebase-auth.js';
-// eslint-disable-next-line max-len
-import {getLhrFilenamePrefix, getFlowResultFilenamePrefix} from '../../../report/generator/file-namer.js';
-import {Util} from '../../../shared/util.js';
 
 /**
  * Wrapper around the GitHub API for reading/writing gists.
@@ -32,58 +29,6 @@ export class GithubApi {
     return this._auth;
   }
 
-  /**
-   * Creates a gist under the users account.
-   * @param {LH.Result|LH.FlowResult} jsonFile The gist file body.
-   * @return {Promise<string>} id of the created gist.
-   */
-  async createGist(jsonFile) {
-    if (this._saving) {
-      throw new Error('Save already in progress');
-    }
-
-    logger.log('Saving report to GitHub...', false);
-    this._saving = true;
-
-    try {
-      const accessToken = await this._auth.getAccessToken();
-      let filename;
-      if ('steps' in jsonFile) {
-        filename = getFlowResultFilenamePrefix(jsonFile);
-      } else {
-        filename = getLhrFilenamePrefix({
-          finalDisplayedUrl: Util.getFinalDisplayedUrl(jsonFile),
-          fetchTime: jsonFile.fetchTime,
-        });
-      }
-      const body = {
-        description: 'Lighthouse json report',
-        public: false,
-        files: {
-          [`${filename}${GithubApi.LH_JSON_EXT}`]: {
-            content: JSON.stringify(jsonFile),
-          },
-        },
-      };
-      const request = new Request('https://api.github.com/gists', {
-        method: 'POST',
-        headers: new Headers({Authorization: `token ${accessToken}`}),
-        // Stringify twice so quotes are escaped for POST request to succeed.
-        body: JSON.stringify(body),
-      });
-      const response = await fetch(request);
-      const json = await response.json();
-      if (json.id) {
-        logger.log('Saved!');
-        return json.id;
-      } else {
-        throw new Error('Error: ' + JSON.stringify(json));
-      }
-    } finally {
-      this._saving = false;
-    }
-  }
-
   /**
    * Fetches a Lighthouse report from a gist.
    * @param {string} id The id of a gist.