Merge pull request #275 from manifoldco/gui/welcome-eslint-curly

Add the curly rule to our eslint config
manifoldco · Jul 17, 2019 · 79228cb · 79228cb · vercel · Jul 17, 2019
2 parents 9a40c6b + 38bbea6
commit 79228cb
Show file tree

Hide file tree

Showing 57 changed files with 2,052 additions and 1,915 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -55,5 +55,7 @@ module.exports = {
     'lines-between-class-members': 'off', // class members don’t need that space!
     'max-len': 'off', // let Prettier decide
     'object-curly-newline': 'off', // let Prettier decide,
+    "curly": ["error", "all"],
+    'prettier/prettier': 'error',
   },
 };
diff --git a/src/components/manifold-active-plan/manifold-active-plan.tsx b/src/components/manifold-active-plan/manifold-active-plan.tsx
@@ -32,8 +32,12 @@ export class ManifoldActivePlan {
   };
 
   get selectedPlan() {
-    if (!this.plans) return undefined;
-    if (!this.selectedPlanId) return this.plans[0];
+    if (!this.plans) {
+      return undefined;
+    }
+    if (!this.selectedPlanId) {
+      return this.plans[0];
+    }
     return this.plans.find(({ id }) => id === this.selectedPlanId);
   }
 

diff --git a/src/components/manifold-auth-token/manifold-auth-token.tsx b/src/components/manifold-auth-token/manifold-auth-token.tsx
@@ -1,7 +1,6 @@
 import { h, Component, Prop, Element, Watch } from '@stencil/core';
 import Tunnel from '../../data/connection';
 
-
 @Component({ tag: 'manifold-auth-token' })
 export class ManifoldAuthToken {
   @Element() el: HTMLElement;
@@ -21,7 +20,7 @@ export class ManifoldAuthToken {
   }
 
   render() {
-    return <input type="hidden" value={this.token ? 'true' : 'false'}/>;
+    return <input type="hidden" value={this.token ? 'true' : 'false'} />;
   }
 }
 

diff --git a/src/components/manifold-connection/manifold-connection.tsx b/src/components/manifold-connection/manifold-connection.tsx
@@ -16,11 +16,13 @@ export class ManiTunnel {
 
   render() {
     return (
-      <Tunnel.Provider state={{
-        connection: connections[this.env],
-        authToken: this.authToken,
-        setAuthToken: this.setAuthToken,
-      }}>
+      <Tunnel.Provider
+        state={{
+          connection: connections[this.env],
+          authToken: this.authToken,
+          setAuthToken: this.setAuthToken,
+        }}
+      >
         <slot />
       </Tunnel.Provider>
     );

diff --git a/src/components/manifold-cost-display/manifold-cost-display.tsx b/src/components/manifold-cost-display/manifold-cost-display.tsx
@@ -16,9 +16,13 @@ export class ManifoldCostDisplay {
   }
 
   renderBaseCost(): JSX.Element | null {
-    if (typeof this.baseCost !== 'number') return null;
+    if (typeof this.baseCost !== 'number') {
+      return null;
+    }
     // If there are measurable costs but no monthly cost, only show measurable
-    if (this.isFreeMonthly && this.measuredFeatures.length > 0) return null;
+    if (this.isFreeMonthly && this.measuredFeatures.length > 0) {
+      return null;
+    }
 
     if (this.isFreeMonthly) {
       // Show the badge for compact, large text otherwise
@@ -29,10 +33,14 @@ export class ManifoldCostDisplay {
   }
 
   renderMeasurableCosts() {
-    if (this.measuredFeatures.length !== 1) return null;
+    if (this.measuredFeatures.length !== 1) {
+      return null;
+    }
 
     const [{ value }] = this.measuredFeatures;
-    if (!value) return null;
+    if (!value) {
+      return null;
+    }
     const displayString = numberFeatureMeasurableDisplayValue(value) || '';
     const output: (JSX.Element)[] = this.isFreeMonthly ? [] : [' + '];
     if (displayString.indexOf('per') > 0) {
@@ -48,7 +56,9 @@ export class ManifoldCostDisplay {
   }
 
   render() {
-    if (typeof this.baseCost !== 'number') return <div class="cost" />;
+    if (typeof this.baseCost !== 'number') {
+      return <div class="cost" />;
+    }
 
     // Show “starting at” either if customizable, or too many metered features to display
     const startingAt = (this.compact && this.isCustomizable) || this.measuredFeatures.length > 1;

diff --git a/src/components/manifold-credentials/manifold-credentials.spec.tsx b/src/components/manifold-credentials/manifold-credentials.spec.tsx
@@ -113,7 +113,9 @@ describe('<manifold-credentials>', () => {
     });
 
     it('will set the credentials on a successful fetch', async () => {
-      fetchMock.mock(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`, [Credential]);
+      fetchMock.mock(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`, [
+        Credential,
+      ]);
 
       const page = await newSpecPage({
         components: [ManifoldCredentials],
@@ -127,12 +129,16 @@ describe('<manifold-credentials>', () => {
       const instance = page.rootInstance as ManifoldCredentials;
       await instance.fetchCredentials();
 
-      expect(fetchMock.called(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`)).toBe(true);
+      expect(
+        fetchMock.called(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`)
+      ).toBe(true);
       expect(instance.credentials).toEqual([Credential]);
     });
 
     it('does nothing if the resource ID is not set', async () => {
-      fetchMock.mock(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`, [Credential]);
+      fetchMock.mock(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`, [
+        Credential,
+      ]);
 
       const page = await newSpecPage({
         components: [ManifoldCredentials],
@@ -147,7 +153,9 @@ describe('<manifold-credentials>', () => {
       instance.resourceId = '';
       await instance.fetchCredentials();
 
-      expect(fetchMock.called(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`)).toBe(false);
+      expect(
+        fetchMock.called(`${connections.prod.marketplace}/credentials/?resource_id=${Resource.id}`)
+      ).toBe(false);
       expect(instance.credentials).not.toBeDefined();
     });
   });

diff --git a/src/components/manifold-data-deprovision-button/manifold-data-deprovision-button.spec.ts b/src/components/manifold-data-deprovision-button/manifold-data-deprovision-button.spec.ts
@@ -184,7 +184,9 @@ describe('<manifold-data-provision-button>', () => {
 
       await instance.deprovision();
 
-      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(false);
+      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(
+        false
+      );
     });
 
     it('will do nothing if no resourceId is provided', async () => {
@@ -204,7 +206,9 @@ describe('<manifold-data-provision-button>', () => {
 
       await instance.deprovision();
 
-      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(false);
+      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(
+        false
+      );
     });
   });
 });
diff --git a/src/components/manifold-data-has-resource/manifold-data-has-resource.spec.ts b/src/components/manifold-data-has-resource/manifold-data-has-resource.spec.ts
@@ -26,9 +26,7 @@ describe('<manifold-resource-list>', () => {
     });
 
     // @ts-ignore
-    expect(hasResource.root.shadowRoot).toEqualHtml(
-      `<slot name="has-resource"></slot>`
-    );
+    expect(hasResource.root.shadowRoot).toEqualHtml(`<slot name="has-resource"></slot>`);
   });
 
   it('Displays the right slot if user has no resources', async () => {
@@ -44,8 +42,6 @@ describe('<manifold-resource-list>', () => {
     });
 
     // @ts-ignore
-    expect(hasResource.root.shadowRoot).toEqualHtml(
-      `<slot name="no-resource"></slot>`
-    );
+    expect(hasResource.root.shadowRoot).toEqualHtml(`<slot name="no-resource"></slot>`);
   });
 });
diff --git a/src/components/manifold-data-manage-button/manifold-data-manage-button.tsx b/src/components/manifold-data-manage-button/manifold-data-manage-button.tsx
@@ -59,7 +59,9 @@ export class ManifoldDataManageButton {
     const { gateway } = this.connection;
     const response = await fetch(`${gateway}/resources/me/${resourceLabel}`, withAuth());
     const resource: Gateway.Resource = await response.json();
-    if (resource.id) this.resourceId = resource.id;
+    if (resource.id) {
+      this.resourceId = resource.id;
+    }
   }
 
   async update() {
@@ -79,11 +81,13 @@ export class ManifoldDataManageButton {
     });
     const req: Gateway.ResourceUpdateRequest = { plan_id: this.planId };
 
-    if (Object.keys(this.features).length) req.features = this.features;
+    if (Object.keys(this.features).length) {
+      req.features = this.features;
+    }
 
     const response = await fetch(
       `${this.connection.gateway}/id/resource/${this.resourceId}`,
-      withAuth(this.authToken,{
+      withAuth(this.authToken, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(req),

diff --git a/src/components/manifold-data-product-logo/manifold-data-product-logo.tsx b/src/components/manifold-data-product-logo/manifold-data-product-logo.tsx
@@ -1,5 +1,6 @@
 import { h, Component, Prop, State, Element, Watch } from '@stencil/core';
 import { gql } from '@manifoldco/gql-zero';
+
 import graphqlFetch from '../../utils/graphqlFetch';
 import { Catalog } from '../../types/catalog';
 import { Gateway } from '../../types/gateway';
@@ -39,8 +40,12 @@ export class ManifoldDataProductLogo {
   }
 
   componentWillLoad() {
-    if (this.productLabel) this.fetchProduct(this.productLabel);
-    if (this.resourceLabel) this.fetchResource(this.resourceLabel);
+    if (this.productLabel) {
+      this.fetchProduct(this.productLabel);
+    }
+    if (this.resourceLabel) {
+      this.fetchResource(this.resourceLabel);
+    }
   }
 
   fetchProduct = async (productLabel: string) => {

diff --git a/src/components/manifold-data-product-name/manifold-data-product-name.tsx b/src/components/manifold-data-product-name/manifold-data-product-name.tsx
@@ -40,7 +40,10 @@ export class ManifoldDataProductName {
 
     this.productName = undefined;
     const { catalog } = this.connection;
-    const response = await fetch(`${catalog}/products?label=${productLabel}`, withAuth(this.authToken));
+    const response = await fetch(
+      `${catalog}/products?label=${productLabel}`,
+      withAuth(this.authToken)
+    );
     const products: Catalog.Product[] = await response.json();
     this.productName = products[0].body.name; // eslint-disable-line prefer-destructuring
   };
@@ -52,7 +55,10 @@ export class ManifoldDataProductName {
 
     this.productName = undefined;
     const { gateway } = this.connection;
-    const response = await fetch(`${gateway}/resources/me/${resourceName}`, withAuth(this.authToken));
+    const response = await fetch(
+      `${gateway}/resources/me/${resourceName}`,
+      withAuth(this.authToken)
+    );
     const resource: Gateway.Resource = await response.json();
     this.productName = resource.product && resource.product.name;
   };

diff --git a/src/components/manifold-data-provision-button/manifold-data-provision-button.spec.ts b/src/components/manifold-data-provision-button/manifold-data-provision-button.spec.ts
@@ -97,19 +97,16 @@ describe('<manifold-data-provision-button>', () => {
       expect(fetchMock.called(`${connections.prod.catalog}/products/?label=${productLabel}`)).toBe(
         true
       );
-      expect(
-        fetchMock.called(
-          `${connections.prod.catalog}/plans/?product_id=${Product.id}`
-        )
-      ).toBe(true);
+      expect(fetchMock.called(`${connections.prod.catalog}/plans/?product_id=${Product.id}`)).toBe(
+        true
+      );
 
       const root = page.rootInstance as ManifoldDataProvisionButton;
       expect(root.productId).toEqual(Product.id);
       expect(root.planId).toEqual(ExpandedPlan.id);
     });
 
     it('will do nothing if no product label is given', async () => {
-
       fetchMock.mock(`${connections.prod.catalog}/products/`, [Product]);
 
       await newSpecPage({
@@ -119,9 +116,7 @@ describe('<manifold-data-provision-button>', () => {
         `,
       });
 
-      expect(fetchMock.called(`${connections.prod.catalog}/products/`)).toBe(
-        false
-      );
+      expect(fetchMock.called(`${connections.prod.catalog}/products/`)).toBe(false);
     });
 
     it('will do nothing if the products return an invalid value', async () => {
@@ -167,11 +162,9 @@ describe('<manifold-data-provision-button>', () => {
       expect(fetchMock.called(`${connections.prod.catalog}/products/?label=${productLabel}`)).toBe(
         true
       );
-      expect(
-        fetchMock.called(
-          `${connections.prod.catalog}/plans/?product_id=${Product.id}`
-        )
-      ).toBe(true);
+      expect(fetchMock.called(`${connections.prod.catalog}/plans/?product_id=${Product.id}`)).toBe(
+        true
+      );
 
       const root = page.rootInstance as ManifoldDataProvisionButton;
       expect(root.productId).toEqual('');
@@ -185,9 +178,7 @@ describe('<manifold-data-provision-button>', () => {
     });
 
     beforeEach(() => {
-      fetchMock
-        .mock(/.*\/products\/.*/, [Product])
-        .mock(/.*\/plans\/.*/, [ExpandedPlan]);
+      fetchMock.mock(/.*\/products\/.*/, [Product]).mock(/.*\/plans\/.*/, [ExpandedPlan]);
     });
 
     it('will trigger a dom event on successful provision', async () => {

diff --git a/src/components/manifold-data-rename-button/manifold-data-rename-button.spec.ts b/src/components/manifold-data-rename-button/manifold-data-rename-button.spec.ts
@@ -109,7 +109,9 @@ describe('<manifold-data-rename-button>', () => {
     });
 
     beforeEach(() => {
-      fetchMock.mock(`${connections.prod.marketplace}/resources/?me&label=${Resource.body.label}`, [Resource]);
+      fetchMock.mock(`${connections.prod.marketplace}/resources/?me&label=${Resource.body.label}`, [
+        Resource,
+      ]);
     });
 
     it('will trigger a dom event on successful rename', async () => {
@@ -130,7 +132,9 @@ describe('<manifold-data-rename-button>', () => {
 
       await instance.rename();
 
-      expect(fetchMock.called(`${connections.prod.marketplace}/resources/${Resource.id}`)).toBe(true);
+      expect(fetchMock.called(`${connections.prod.marketplace}/resources/${Resource.id}`)).toBe(
+        true
+      );
       expect(instance.success.emit).toHaveBeenCalledWith({
         message: `${Resource.body.label} successfully renamed`,
         resourceLabel: Resource.body.label,
@@ -162,7 +166,9 @@ describe('<manifold-data-rename-button>', () => {
 
       await instance.rename();
 
-      expect(fetchMock.called(`${connections.prod.marketplace}/resources/${Resource.id}`)).toBe(true);
+      expect(fetchMock.called(`${connections.prod.marketplace}/resources/${Resource.id}`)).toBe(
+        true
+      );
       expect(instance.error.emit).toHaveBeenCalledWith({
         message: 'ohnoes',
         resourceLabel: Resource.body.label,
@@ -188,7 +194,9 @@ describe('<manifold-data-rename-button>', () => {
 
       await instance.rename();
 
-      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(false);
+      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(
+        false
+      );
     });
 
     it('will do nothing if no resourceId is provided', async () => {
@@ -208,7 +216,9 @@ describe('<manifold-data-rename-button>', () => {
 
       await instance.rename();
 
-      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(false);
+      expect(fetchMock.called(`${connections.prod.gateway}/id/resource/${Resource.id}`)).toBe(
+        false
+      );
     });
   });
 });
diff --git a/src/components/manifold-data-resource-list/manifold-data-resource-list.tsx b/src/components/manifold-data-resource-list/manifold-data-resource-list.tsx
@@ -57,10 +57,11 @@ export class ManifoldDataResourceList {
     fetch(`${this.connection.marketplace}/resources/?me`, withAuth(this.authToken))
       .then(response => response.json())
       .then((resources: Marketplace.Resource[]) => {
-        if (Array.isArray(resources))
+        if (Array.isArray(resources)) {
           this.resources = this.userResources(
             [...resources].sort((a, b) => a.body.label.localeCompare(b.body.label))
           );
+        }
       });
   }
 

diff --git a/src/components/manifold-icon/manifold-icon.tsx b/src/components/manifold-icon/manifold-icon.tsx
@@ -23,7 +23,9 @@ export class ManifoldIcon {
   get stopColors() {
     const style = getComputedStyle(this.element);
     const gradientValue = style.getPropertyValue(this.gradient || '');
-    if (!this.gradient || !gradientValue) return [];
+    if (!this.gradient || !gradientValue) {
+      return [];
+    }
     const colors = gradientValue.split('#');
     return colors.slice(1, colors.length).map((chunk, index) => {
       const pair = chunk