Convert product-id to product-label (#66)

manifoldco · Apr 12, 2019 · 1fc8a66 · 1fc8a66
1 parent 56a0d2f
commit 1fc8a66
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 27 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -226,13 +226,13 @@ export namespace Components {
   interface ManifoldPlanSelector {
     'connection': Connection;
     'hideProvisionButton'?: boolean;
-    'productId': string;
+    'productLabel': string;
     'resourceId'?: string;
   }
   interface ManifoldPlanSelectorAttributes extends StencilHTMLAttributes {
     'connection'?: Connection;
     'hideProvisionButton'?: boolean;
-    'productId'?: string;
+    'productLabel'?: string;
     'resourceId'?: string;
   }
 

diff --git a/src/components/manifold-plan-selector/manifold-plan-selector.tsx b/src/components/manifold-plan-selector/manifold-plan-selector.tsx
@@ -3,9 +3,6 @@ import { Component, State, Prop, Element } from '@stencil/core';
 import Tunnel from '../../data/connection';
 import { Connection, connections, Env } from '../../utils/connections';
 
-const byCost = (a: Catalog.ExpandedPlan, b: Catalog.ExpandedPlan) =>
-  a.body.cost < b.body.cost ? -1 : 1;
-
 @Component({
   tag: 'manifold-plan-selector',
   shadow: true,
@@ -15,20 +12,21 @@ export class ManifoldPlanSelector {
   @Prop() connection: Connection = connections[Env.Prod];
   @Prop() resourceId?: string;
   @Prop() hideProvisionButton?: boolean;
-  @Prop() productId: string;
+  @Prop() productLabel: string;
   @State() product: Catalog.ExpandedProduct;
   @State() plans: Catalog.Plan[];
 
   async componentWillLoad() {
-    await fetch(`${this.connection.catalog}/products/${this.productId}`)
-      .then(response => response.json())
-      .then(data => {
-        this.product = data;
-      });
-    await fetch(`${this.connection.catalog}/plans?product_id=${this.productId}`)
+    await fetch(`${this.connection.catalog}/products/?label=${this.productLabel}`)
       .then(response => response.json())
-      .then(data => {
-        this.plans = data.sort(byCost);
+      .then((products: Catalog.ExpandedProduct[]) => {
+        const [product] = products;
+        this.product = product
+        fetch(`${this.connection.catalog}/plans/?product_id=${product.id}`)
+          .then(response => response.json())
+          .then((plans: Catalog.ExpandedPlan[]) => {
+            this.plans = [...plans.sort((a, b) => a.body.cost - b.body.cost)]
+          });
       });
   }
 

diff --git a/src/components/manifold-plan-selector/readme.md b/src/components/manifold-plan-selector/readme.md
@@ -3,9 +3,13 @@
 Display the plans for a product.
 
 ```html
-<manifold-plan-selector product-id="234w1jyaum5j0aqe3g3bmbqjgf20p"></manifold-plan-selector>
+<manifold-plan-selector product-label="jawsdb-mysql"></manifold-plan-selector>
 ```
 
+## Product Label
+
+You can find the `:service` label for each at `https://manifold.co/services/:service`.
+
 ## Detecting changes
 
 Events are dispatched on the `manifold-planUpdated` custom event. To listen
@@ -40,7 +44,7 @@ If you would like to hide the button that provisions a selected service, add the
 | --------------------- | ----------------------- | ----------- | ---------------------- | ----------------------- |
 | `connection`          | --                      |             | `Connection`           | `connections[Env.Prod]` |
 | `hideProvisionButton` | `hide-provision-button` |             | `boolean \| undefined` | `undefined`             |
-| `productId`           | `product-id`            |             | `string`               | `undefined`             |
+| `productLabel`        | `product-label`         |             | `string`               | `undefined`             |
 | `resourceId`          | `resource-id`           |             | `string \| undefined`  | `undefined`             |
 
 

diff --git a/src/index.html b/src/index.html
@@ -312,8 +312,13 @@ <h2>Example</h2>
 
               <h1 id="manifoldplanselector">manifold-plan-selector</h1>
               <p>Display the plans for a product.</p>
-              <pre><code class="html language-html">&lt;manifold-plan-selector product-id="234w1jyaum5j0aqe3g3bmbqjgf20p"&gt;&lt;/manifold-plan-selector&gt;
+              <pre><code class="html language-html">&lt;manifold-plan-selector product-label="jawsdb-mysql"&gt;&lt;/manifold-plan-selector&gt;
 </code></pre>
+              <h2 id="productlabel">Product Label</h2>
+              <p>
+                You can find the <code>:service</code> label for each at
+                <code>https://manifold.co/services/:service</code>.
+              </p>
               <h2 id="detectingchanges">Detecting changes</h2>
               <p>
                 Events are dispatched on the <code>manifold-planUpdated</code> custom event. To
@@ -366,8 +371,8 @@ <h2 id="properties">Properties</h2>
                     <td><code>undefined</code></td>
                   </tr>
                   <tr>
-                    <td><code>productId</code></td>
-                    <td><code>product-id</code></td>
+                    <td><code>productLabel</code></td>
+                    <td><code>product-label</code></td>
                     <td></td>
                     <td><code>string</code></td>
                     <td><code>undefined</code></td>
@@ -389,14 +394,7 @@ <h2 id="properties">Properties</h2>
             </div>
             <div class="docs-example">
               <div class="docs-example-inner">
-                <!-- jawsdb-mysql: 234w1jyaum5j0aqe3g3bmbqjgf20p -->
-                <!-- logdna: 234qkjvrptpy3thna4qttwt7m2nf6 -->
-                <!-- zerosix: 234nbp17j5zrvb2ym49647kgtyv2a -->
-                <!-- picnic-basket-stage (staging): 234j94djrwxapnnbyqbjtg75g111j -->
-                <!-- ant-hill-stage (staging): 234tzpqcgjb5846mjn2vz1hp03yec -->
-                <manifold-plan-selector
-                  product-id="234w1jyaum5j0aqe3g3bmbqjgf20p"
-                ></manifold-plan-selector>
+                <manifold-plan-selector product-label="jawsdb-mysql"></manifold-plan-selector>
               </div>
             </div>
           </section>