Add poll-interval attribute (#992)

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]
+
+### Added
+
+- Added `poll-interval` prop to `<manifold-resource-list>`, `<manifold-data-resource-list>`, and
+  `<manifold-data-has-resource>`.
+
 ## [0.9.8] - 2020-03-30
 
 ### Fixed
@@ -543,6 +550,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.8...HEAD
 [0.9.8]: https://github.com/manifoldco/ui/compare/v0.9.7...v0.9.8
 [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

docs/docs/components/manifold-resource-list.md

@@ -18,20 +18,27 @@ To navigate using a traditional `<a>` tag, specify a `resource-link-format` attr
 `:resource` as a placeholder:
 
 ```html
-<manifold-data-resource-list
-  resource-link-format="/resource/:resource"
-></manifold-data-resource-list>
+<manifold-resource-list resource-link-format="/resource/:resource"></manifold-resource-list>
 ```
 
 Note that this will disable the custom event unless `preserve-event` is passed as well.
 
+## Polling interval
+
+This will change the polling interval from `3000 ms` (3 seconds, default) to `10000 ms` (10
+seconds):
+
+```html
+<manifold-resource-list poll-interval="10000"></manifold-resource-list>
+```
+
 ## Pausing updates
 
 By default, this component will subscribe to updates from the server. To disable that, pass the
 `paused` attribute:
 
 ```html
-<manifold-data-resource-list paused></manifold-data-resource-list>
+<manifold-resource-list paused></manifold-resource-list>
 ```
 
 ## Loading state
@@ -59,7 +66,7 @@ You can pass in your own "no resources" state for the componenent by passing in
 
 ## Context (team, org, etc.)
 
-To filter the resource list by an owner-id that provides a different context than just the user 
+To filter the resource list by an owner-id that provides a different context than just the user
 context (e.g. team resources), you can provide the owner-id to filter by:
 
 ```html

docs/docs/data/manifold-data-has-resource.md

@@ -37,6 +37,15 @@ resources provisioned other than the one specfied).
 </manifold-data-has-resource>
 ```
 
+## Polling interval
+
+This will change the polling interval from `3000 ms` (3 seconds, default) to `10000 ms` (10
+seconds):
+
+```html
+<manifold-data-has-resource poll-interval="10000"></manifold-data-has-resource>
+```
+
 ## Pausing updates
 
 By default, this component will subscribe to updates from the server and make periodic requests. To

docs/docs/data/manifold-data-resource-list.md

@@ -55,6 +55,15 @@ To navigate using a traditional `<a>` tag (which would cause a full-page refresh
 Note that specifying this attribute will disable the custom event unless `preserve-event` is passed
 as well.
 
+## Polling interval
+
+This will change the polling interval from `3000 ms` (3 seconds, default) to `10000 ms` (10
+seconds):
+
+```html
+<manifold-data-resource-list poll-interval="10000"></manifold-data-resource-list>
+```
+
 ## Pausing updates
 
 By default, this component will subscribe to updates from the server (in case users add a new
@@ -67,7 +76,7 @@ attribute:
 
 ## Context (team, org, etc.)
 
-To filter the resource list by an owner-id that provides a different context than just the user 
+To filter the resource list by an owner-id that provides a different context than just the user
 context (e.g. team resources), you can provide the owner-id to filter by:
 
 ```html

package.json

@@ -29,7 +29,7 @@
     "clean-package-json": "node scripts/clean-package-json",
     "copy-changelog": "node scripts/copy-changelog",
     "dev": "npm run build:watch & rm -rf dist && wait-on dist/loader/index.cjs.js && npm run storybook",
-    "docs": "npm run prepare:docs && cd docs && npm start",
+    "docs": "make package && npm run copy-changelog && cd docs && npm start",
     "docker": "docker build -t manifoldco/ui . && docker run -p 8080:80 manifoldco/ui",
     "format:changelog": "npx keep-a-changelog && prettier CHANGELOG.md --write",
     "generate:gql": "graphql-codegen --config codegen.yml",

src/components.d.ts

@@ -150,6 +150,10 @@ export namespace Components {
     'label'?: string;
     'ownerId'?: string;
     'paused'?: boolean;
+    /**
+    * Adjust poll frequency
+    */
+    'pollInterval'?: number;
   }
   interface ManifoldDataProductLogo {
     /**
@@ -260,6 +264,10 @@ export namespace Components {
     */
     'paused'?: boolean;
     /**
+    * Interval at which this component polls
+    */
+    'pollInterval'?: number;
+    /**
     * Should the JS event still fire, even if product-link-format is passed?
     */
     'preserveEvent'?: boolean;
@@ -571,6 +579,10 @@ export namespace Components {
     */
     'paused'?: boolean;
     /**
+    * Interval at which this component polls
+    */
+    'pollInterval'?: number;
+    /**
     * Should the JS event still fire, even if product-link-format is passed?
     */
     'preserveEvent'?: boolean;
@@ -1203,6 +1215,10 @@ declare namespace LocalJSX {
     'onManifold-hasResource-load'?: (event: CustomEvent<any>) => void;
     'ownerId'?: string;
     'paused'?: boolean;
+    /**
+    * Adjust poll frequency
+    */
+    'pollInterval'?: number;
   }
   interface ManifoldDataProductLogo {
     /**
@@ -1325,6 +1341,10 @@ declare namespace LocalJSX {
     */
     'paused'?: boolean;
     /**
+    * Interval at which this component polls
+    */
+    'pollInterval'?: number;
+    /**
     * Should the JS event still fire, even if product-link-format is passed?
     */
     'preserveEvent'?: boolean;
@@ -1648,6 +1668,10 @@ declare namespace LocalJSX {
     */
     'paused'?: boolean;
     /**
+    * Interval at which this component polls
+    */
+    'pollInterval'?: number;
+    /**
     * Should the JS event still fire, even if product-link-format is passed?
     */
     'preserveEvent'?: boolean;

src/components/manifold-data-has-resource/manifold-data-has-resource.tsx

@@ -25,15 +25,17 @@ export class ManifoldDataHasResource {
   @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch;
   /** Disable auto-updates? */
   @Prop() label?: string;
+  /** Adjust poll frequency */
+  @Prop() pollInterval?: number = 3000;
   @Prop() ownerId?: string;
   @Prop() paused?: boolean = false;
-  @State() interval?: number;
+  @State() poll?: number;
   @State() hasResource?: boolean;
   @Event({ eventName: 'manifold-hasResource-load', bubbles: true }) loadEvent: EventEmitter;
 
   @Watch('paused') pausedChange(newPaused: boolean) {
     if (newPaused) {
-      window.clearInterval(this.interval);
+      window.clearInterval(this.poll);
     } else {
       this.makeInterval();
     }
@@ -48,13 +50,13 @@ export class ManifoldDataHasResource {
   }
 
   componentDidUnload() {
-    if (this.interval) {
-      window.clearInterval(this.interval);
+    if (this.poll) {
+      window.clearInterval(this.poll);
     }
   }
 
   makeInterval() {
-    this.interval = window.setInterval(() => this.fetchResources(), 3000);
+    this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval);
   }
 
   async fetchResources(label = this.label) {

src/components/manifold-data-resource-list/manifold-data-resource-list.tsx

@@ -28,13 +28,15 @@ export class ManifoldDataResourceList {
   @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch;
   /** Disable auto-updates? */
   @Prop() paused?: boolean = false;
+  /** Interval at which this component polls */
+  @Prop() pollInterval?: number = 3000;
   /** Link format structure, with `:resource` placeholder */
   @Prop() resourceLinkFormat?: string;
   /** Should the JS event still fire, even if product-link-format is passed?  */
   @Prop() preserveEvent?: boolean = false;
   /** OwnerId to filter resources by */
   @Prop() ownerId?: string;
-  @State() interval?: number;
+  @State() poll?: number;
   @State() resources?: ResourceEdge[];
   @Event({ eventName: 'manifold-resourceList-click', bubbles: true }) clickEvent: EventEmitter;
 
@@ -52,13 +54,13 @@ export class ManifoldDataResourceList {
     // start polling
     this.fetchResources();
     if (!this.paused) {
-      this.interval = window.setInterval(() => this.fetchResources(), 3000);
+      this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval);
     }
   }
 
   componentDidUnload() {
-    if (this.interval) {
-      window.clearInterval(this.interval);
+    if (this.poll) {
+      window.clearInterval(this.poll);
     }
   }
 

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

@@ -17,6 +17,8 @@ export class ManifoldResourceList {
   @Element() el: HTMLElement;
   /** _(hidden)_ */
   @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch;
+  /** Interval at which this component polls */
+  @Prop() pollInterval?: number = 3000;
   /** Disable auto-updates? */
   @Prop() paused?: boolean = false;
   /** Link format structure, with `:resource` placeholder */
@@ -25,14 +27,14 @@ export class ManifoldResourceList {
   @Prop() preserveEvent?: boolean = false;
   /** Filter resource list by ownerId */
   @Prop() ownerId?: string;
-  @State() interval?: number;
+  @State() poll?: number;
   @State() resources?: ResourceEdge[];
 
   @Watch('paused') pausedChange(newPaused: boolean) {
     if (newPaused) {
-      window.clearInterval(this.interval);
+      window.clearInterval(this.poll);
     } else {
-      this.interval = window.setInterval(() => this.fetchResources(), 3000);
+      this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval);
     }
   }
 
@@ -50,13 +52,13 @@ export class ManifoldResourceList {
     // start polling
     this.fetchResources();
     if (!this.paused) {
-      this.interval = window.setInterval(() => this.fetchResources(), 3000);
+      this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval);
     }
   }
 
   componentDidUnload() {
-    if (this.interval) {
-      window.clearInterval(this.interval);
+    if (this.poll) {
+      window.clearInterval(this.poll);
     }
   }