Fix parsing secret fields (#69)

Author: jackcloudquery

etc/plugin-config-ui-lib.api.md

@@ -82,7 +82,7 @@ export function ConfigUIForm({ prepareSubmitValues }: ConfigUIFormProps): JSX_2.
 // @public (undocumented)
 export interface ConfigUIFormProps {
     // (undocumented)
-    prepareSubmitValues: (values: Record<string, any>, tablesList?: PluginTable[]) => PluginUiMessagePayload['validation_passed']['values'];
+    prepareSubmitValues: (config: PluginConfig, values: Record<string, any>, tablesList?: PluginTable[]) => PluginUiMessagePayload['validation_passed']['values'];
 }
 
 export { Controller }
@@ -91,7 +91,7 @@ export { Controller }
 export function convertStringToSlug(value: string): string;
 
 // @public
-export function corePrepareSubmitValues(values: any, tablesList?: PluginTable[]): PluginUiMessagePayload['validation_passed']['values'];
+export function corePrepareSubmitValues(config: PluginConfig, values: any, tablesList?: PluginTable[]): PluginUiMessagePayload['validation_passed']['values'];
 
 // @public (undocumented)
 export interface DestinationConfig extends PluginConfig {
@@ -338,14 +338,19 @@ export interface PluginConfig {
     name: string;
     // (undocumented)
     stateSchema?: Record<string, yup.AnySchema>;
-    // Warning: (ae-forgotten-export) The symbol "PluginConfigFormStep" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     steps: PluginConfigFormStep[];
     // (undocumented)
     type: 'source' | 'destination';
 }
 
+// @public (undocumented)
+export type PluginConfigFormStep = {
+    children: (IterableStepComponent | React_2.FC<any>)[];
+    title: string;
+    submitGuard?: (formValues: any) => Promise<boolean>;
+};
+
 // @public
 export const PluginContextProvider: ({ children, config, teamName, getTablesData, hideStepper, pluginUiMessageHandler, initialValues, }: PluginContextProviderProps) => JSX_2.Element;
 
@@ -739,6 +744,7 @@ export function writeSecretsToPrepareValues(env?: Record<string, string>): {
 // Warnings were encountered during analysis:
 //
 // src/components/display/setupGuide/section/index.tsx:26:3 - (ae-forgotten-export) The symbol "Section" needs to be exported by the entry point index.d.ts
+// src/types.ts:29:3 - (ae-forgotten-export) The symbol "IterableStepComponent" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudquery/plugin-config-ui-lib",
   "description": "Plugin configuration UI library for CloudQuery Cloud App",
-  "version": "3.0.7",
+  "version": "4.0.0",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package.json

@@ -26,6 +26,7 @@ import { parseTestConnectionError } from '../../utils/parseTestConnectionError';
 import { FormFooter, FormWrapper, GuideComponent } from '../display';
 import { PluginTable } from '../inputs';
 import { Sections } from './sections/sections';
+import { PluginConfig } from '../../types';
 
 const FormStepper = React.lazy(() =>
   import('../display/formStepper').then((module) => ({
@@ -38,6 +39,7 @@ const FormStepper = React.lazy(() =>
  */
 export interface ConfigUIFormProps {
   prepareSubmitValues: (
+    config: PluginConfig,
     values: Record<string, any>,
     tablesList?: PluginTable[],
   ) => PluginUiMessagePayload['validation_passed']['values'];
@@ -61,8 +63,8 @@ export function ConfigUIForm({ prepareSubmitValues }: ConfigUIFormProps) {
   const editMode = watch('_editMode');
 
   const getCurrentValues = useCallback(
-    () => prepareSubmitValues(form.getValues(), tablesList),
-    [form, tablesList, prepareSubmitValues],
+    () => prepareSubmitValues(config, form.getValues(), tablesList),
+    [config, form, tablesList, prepareSubmitValues],
   );
 
   useFormCurrentValues(pluginUiMessageHandler, getCurrentValues);

src/components/form/configUIForm.tsx

@@ -22,7 +22,10 @@ export interface GuideConfig {
   sections: RenderGuideProps['sections'];
 }
 
-type PluginConfigFormStep = {
+/**
+ * @public
+ */
+export type PluginConfigFormStep = {
   children: (IterableStepComponent | React.FC<any>)[];
   title: string;
   submitGuard?: (formValues: any) => Promise<boolean>;

src/types.ts

@@ -3,13 +3,15 @@ import { PluginUiMessagePayload } from '@cloudquery/plugin-config-ui-connector';
 import { prepareOAuthValue } from './prepareOAuthValue';
 import { prepareSecretValues } from './prepareSecretValues';
 import { PluginTable } from '../components';
+import { PluginConfig } from '../types';
 
 /**
  * Prepare values for submit
  *
  * @public
  */
 export function corePrepareSubmitValues(
+  config: PluginConfig,
   values: any,
   tablesList?: PluginTable[],
 ): PluginUiMessagePayload['validation_passed']['values'] {
@@ -20,7 +22,7 @@ export function corePrepareSubmitValues(
     spec: {} as Record<string, any>,
   };
 
-  const secrets = prepareSecretValues(values);
+  const secrets = prepareSecretValues(config.steps, values);
   const oauthValue = prepareOAuthValue(values);
 
   return {

src/utils/corePrepareSubmitValues.ts

@@ -1,28 +1,33 @@
 import { escapeSingleQuotesAndBackslashes } from './escapeSingleQuotesAndBackslashes';
 import { isOrHasSecret } from './secretValueHandling';
-import { AuthType } from '../types';
+import { IterableStepComponent } from '../components/form/renderer/types';
+import { PluginConfigFormStep } from '../types';
 
 /**
  * Prepare secret values for the deployment
- * ONLY valid if the form is using the "OTHER" auth type
  */
-export function prepareSecretValues(values: Record<string, any>): {
+export function prepareSecretValues(
+  configSteps: PluginConfigFormStep[],
+  values: Record<string, any>,
+): {
   envs: { name: string; value: string }[];
-  spec: Record<string, string>;
+  spec: Record<string, string | undefined>;
 } {
   const envs: { name: string; value: string }[] = [];
-  const spec: Record<string, string> = {};
-
-  if (values._authType === AuthType.OTHER) {
-    for (const name of values._secretKeys ?? []) {
-      const value = values[name];
-      if (value !== undefined) {
-        envs.push({
-          name,
-          value: isOrHasSecret(value) ? '' : value,
-        });
-        spec[name] = `\${${escapeSingleQuotesAndBackslashes(name)}}`;
-      }
+  const spec: Record<string, string | undefined> = {};
+
+  for (const name of values._secretKeys ?? []) {
+    const shouldRenderFns = findShouldRenderFunctions(configSteps, name);
+    const allVisible = shouldRenderFns.every((fn) => fn(values));
+    const value = values[name];
+    if (allVisible && value !== undefined) {
+      envs.push({
+        name,
+        value: isOrHasSecret(value) ? '' : value,
+      });
+      spec[name] = `\${${escapeSingleQuotesAndBackslashes(name)}}`;
+    } else {
+      spec[name] = undefined;
     }
   }
 
@@ -31,3 +36,47 @@ export function prepareSecretValues(values: Record<string, any>): {
     spec,
   };
 }
+
+/**
+ * Find all the shouldRender functions for a given field name
+ */
+export function findShouldRenderFunctions(
+  configSteps: PluginConfigFormStep[],
+  fieldName: string,
+): Array<(formValues: any) => boolean> {
+  const shouldRenderFunctions: Array<(formValues: any) => boolean> = [];
+
+  function traverse(item: IterableStepComponent): any {
+    if (typeof item.shouldRender === 'function') {
+      shouldRenderFunctions.push(item.shouldRender);
+    }
+
+    if ('name' in item && item.name === fieldName) {
+      return true;
+    }
+
+    if ('children' in item && Array.isArray(item.children)) {
+      for (const child of item.children) {
+        if (typeof child !== 'function' && traverse(child)) {
+          return true;
+        }
+      }
+    }
+
+    if (typeof item.shouldRender === 'function') {
+      shouldRenderFunctions.pop();
+    }
+
+    return false;
+  }
+
+  for (const step of configSteps) {
+    for (const child of step.children) {
+      if (typeof child !== 'function' && traverse(child)) {
+        break;
+      }
+    }
+  }
+
+  return shouldRenderFunctions;
+}