Delay fetching resource info until there’s a token (#978)

Author: DangoDev

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- Fixed `<manifold-resource-list>` and `<manifold-resource-container>` to not send requests without
+  a token.
+
 ## [0.9.7] - 2020-03-11
 
 ### Fixed
@@ -536,6 +543,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Changed the `manifold-resource-credentials` component to use the standalone `manifold-credentials`
   component.
 
+[unreleased]: https://github.com/manifoldco/ui/compare/v0.9.7...HEAD
 [0.9.7]: https://github.com/manifoldco/ui/compare/v0.9.6...v0.9.7
 [0.9.6]: https://github.com/manifoldco/ui/compare/v0.9.5...v0.9.6
 [0.9.5]: https://github.com/manifoldco/ui/compare/v0.9.4...v0.9.5

package-lock.json

@@ -93,7 +93,7 @@
     "@storybook/html": "^5.2.5",
     "@types/fetch-mock": "^7.3.1",
     "@types/jest": "24.0.23",
-    "@types/puppeteer": "2.0.1",
+    "@types/puppeteer": "1.20.4",
     "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.13.0",
     "babel-loader": "^8.0.6",

package.json

@@ -1,6 +1,12 @@
 import { newSpecPage, SpecPage } from '@stencil/core/testing';
 import fetchMock from 'fetch-mock';
 
+// mock connection before import
+jest.mock('../../global/app', () => ({
+  connection: { getAuthToken: () => '1234' },
+}));
+
+/* eslint-disable import/first */
 import { ManifoldResourceContainer } from './manifold-resource-container';
 import { createGraphqlFetch } from '../../utils/graphqlFetch';
 import { ResourceStatusLabel } from '../../types/graphql';

src/components/manifold-resource-container/manifold-resource-container.spec.ts

@@ -55,6 +55,11 @@ export class ManifoldResourceContainer {
       return;
     }
 
+    // for this component, wait for auth before fetching
+    if (!connection.getAuthToken()) {
+      return;
+    }
+
     const variables: ResourceWithOwnerQueryVariables = { resourceLabel, owner: this.ownerId };
     const { data, errors } = await this.graphqlFetch<ResourceWithOwnerQuery>({
       query: queryWithOwner,

src/components/manifold-resource-container/manifold-resource-container.tsx

@@ -1,6 +1,12 @@
 import { newSpecPage } from '@stencil/core/testing';
 import fetchMock from 'fetch-mock';
 
+// mock connection before import
+jest.mock('../../global/app', () => ({
+  connection: { getAuthToken: () => '1234' },
+}));
+
+/* eslint-disable import/first */
 import { ManifoldResourceList } from './manifold-resource-list';
 import { connections } from '../../utils/connections';
 import resource from '../../spec/mock/elegant-cms/resource';
@@ -44,6 +50,11 @@ describe('<manifold-resource-list>', () => {
 
   afterEach(fetchMock.restore);
 
+  // unmock connection
+  afterAll(() => {
+    jest.unmock('../../global/app');
+  });
+
   it('The resources list are rendered if given.', async () => {
     fetchMock.mock(connections.prod.graphql, { data });
 

src/components/manifold-resource-list/manifold-resource-list.spec.ts

@@ -54,6 +54,11 @@ export class ManifoldResourceList {
       return;
     }
 
+    // for this component, wait for auth before fetching
+    if (!connection.getAuthToken()) {
+      return;
+    }
+
     const variables: Resources_With_OwnerQueryVariables = {
       first: 50,
       after: '',