Implement resizing of configurable features (#878)

* provision configured features

* update gql types

* enable resizing of configurable features

* set configured feature to default value if it doesn't exist on the current plan

src/components.d.ts

@@ -228,6 +228,7 @@ export namespace Components {
     'resourceLabel'?: string;
   }
   interface ManifoldDataResizeButton {
+    'configuredFeatures'?: ConfiguredFeatureInput[];
     /**
     * _(hidden)_ Passed by `<manifold-connection>`
     */
@@ -1268,6 +1269,7 @@ declare namespace LocalJSX {
     'resourceLabel'?: string;
   }
   interface ManifoldDataResizeButton {
+    'configuredFeatures'?: ConfiguredFeatureInput[];
     /**
     * _(hidden)_ Passed by `<manifold-connection>`
     */

src/components/manifold-data-resize-button/manifold-data-resize-button.tsx

@@ -11,12 +11,15 @@ import {
   ResourceChangePlanMutation,
   ResourceIdQuery,
   ResourceIdQueryVariables,
+  ConfiguredFeatureInput,
+  ResourceChangePlanMutationVariables,
 } from '../../types/graphql';
 
 interface ClickMessage {
   planId?: string;
   resourceId: string;
   resourceLabel: string;
+  configuredFeatures?: ConfiguredFeatureInput[];
 }
 
 interface SuccessMessage {
@@ -31,6 +34,7 @@ interface ErrorMessage {
   resourceId?: string;
   resourceLabel?: string;
   planId?: string;
+  configuredFeatures?: ConfiguredFeatureInput[];
 }
 
 @Component({ tag: 'manifold-data-resize-button' })
@@ -40,6 +44,7 @@ export class ManifoldDataResizeButton {
   @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch;
   @Prop() planId?: string;
   @Prop() resourceLabel?: string;
+  @Prop() configuredFeatures?: ConfiguredFeatureInput[];
   @Prop({ mutable: true }) resourceId?: string;
   @Event({ eventName: 'manifold-resizeButton-click', bubbles: true }) click: EventEmitter;
   @Event({ eventName: 'manifold-resizeButton-error', bubbles: true }) error: EventEmitter;
@@ -82,15 +87,19 @@ export class ManifoldDataResizeButton {
       planId: this.planId,
       resourceLabel: this.resourceLabel,
       resourceId: this.resourceId,
+      configuredFeatures: this.configuredFeatures,
     };
     this.click.emit(clickDetail);
 
+    const variables: ResourceChangePlanMutationVariables = {
+      resourceId: this.resourceId,
+      planId: this.planId,
+      configuredFeatures: this.configuredFeatures,
+    };
+
     const { data, errors } = await this.graphqlFetch<ResourceChangePlanMutation>({
       query: updatePlan,
-      variables: {
-        resourceId: this.resourceId,
-        planId: this.planId,
-      },
+      variables,
       element: this.el,
     });
 
@@ -113,6 +122,7 @@ export class ManifoldDataResizeButton {
           planId: this.planId,
           resourceId: this.resourceId,
           resourceLabel: this.resourceLabel,
+          configuredFeatures: this.configuredFeatures,
         };
         this.error.emit(error);
       });

src/components/manifold-data-resize-button/updatePlan.graphql

@@ -1,5 +1,11 @@
-mutation ResourceChangePlan($resourceId: ID!, $planId: ID!) {
-  updateResourcePlan(input: { resourceId: $resourceId, newPlanID: $planId }) {
+mutation ResourceChangePlan(
+  $resourceId: ID!
+  $planId: ID!
+  $configuredFeatures: [ConfiguredFeatureInput!]
+) {
+  updateResourcePlan(
+    input: { resourceId: $resourceId, newPlanID: $planId, configuredFeatures: $configuredFeatures }
+  ) {
     data {
       id
       label

src/components/manifold-plan-details/manifold-plan-details.tsx

@@ -195,8 +195,11 @@ export class ManifoldPlanDetails {
 
   resetFeatures = (plan: Plan, configuredFeatures: Gateway.FeatureMap = {}) => {
     if (plan.configurableFeatures) {
-      if (this.readOnly && this.isExistingResource) {
-        this.features = configuredFeatures;
+      if (this.readOnly || this.isExistingResource) {
+        this.features = {
+          ...configurableFeatureDefaults(plan.configurableFeatures.edges),
+          ...configuredFeatures,
+        };
       } else {
         this.features = configurableFeatureDefaults(plan.configurableFeatures.edges);
       }

src/components/manifold-plan-selector/manifold-plan-selector.tsx

@@ -115,11 +115,11 @@ export class ManifoldPlanSelector {
 
     return (
       <manifold-active-plan
+        selectedResource={this.resource}
+        isExistingResource={!!this.resourceLabel}
         plans={this.plans}
         product={this.product}
         regions={regions}
-        selectedResource={this.resource}
-        isExistingResource={!!this.resource}
       >
         <manifold-forward-slot slot="cta">
           <slot name="cta" />

src/types/graphql.ts

@@ -1223,7 +1223,8 @@ export type RenameResourceMutation = (
 
 export type ResourceChangePlanMutationVariables = {
   resourceId: Scalars['ID'],
-  planId: Scalars['ID']
+  planId: Scalars['ID'],
+  configuredFeatures?: Maybe<Array<ConfiguredFeatureInput>>
 };