feat: add write fields ui to read tab

src/components/Configure/content/ConfigureInstallationBase.tsx

@@ -12,6 +12,7 @@ import { getReadObject } from '../utils';
 
 import { ReadFields } from './fields/ReadFields';
 import { WriteFields } from './fields/WriteFields';
+import { WriteFieldsV3 } from './fields/WriteFields/WriteFieldsV3';
 import { UninstallContent } from './UninstallContent';
 import { useSelectedConfigureState } from './useSelectedConfigureState';
 
@@ -88,6 +89,7 @@ export function ConfigureInstallationBase(
             )}
             {loading && <LoadingCentered />}
             {hydratedRevision && !isUninstall && !isNonConfigurableWrite && <ReadFields />}
+            {hydratedRevision && !isUninstall && !isNonConfigurableWrite && <WriteFieldsV3 />}
             {hydratedRevision && !isUninstall && isNonConfigurableWrite && <WriteFields />}
             {!loading && isUninstall && <UninstallContent />}
           </Box>

src/components/Configure/content/fields/WriteFields/WriteFieldsV3.tsx

@@ -0,0 +1,47 @@
+import {
+  CheckboxField, CheckboxFieldsContainer,
+  CheckboxGroup,
+} from 'components/ui-base/Checkbox';
+import { useInstallIntegrationProps } from 'context/InstallIntegrationContextProvider';
+import { getProviderName } from 'src/utils';
+
+import { useSelectedConfigureState } from '../../useSelectedConfigureState';
+import { FieldHeader } from '../FieldHeader';
+
+export function WriteFieldsV3() {
+  const {
+    appName, selectedObjectName, configureState,
+  } = useSelectedConfigureState();
+
+  const { provider } = useInstallIntegrationProps();
+  const providerName = getProviderName(provider);
+
+  const onCheckboxChange = (checked: boolean) => {
+    if (selectedObjectName && configureState) {
+      if (checked) {
+        // console.log('support write for', selectedObjectName);
+      } else {
+        // console.log('remove write support for', selectedObjectName);
+      }
+    }
+  };
+
+  const label = `${appName} creates and updates ${selectedObjectName} in ${providerName}`;
+
+  return (
+    <>
+      <FieldHeader string={label} />
+      <CheckboxGroup>
+        <CheckboxFieldsContainer>
+          <CheckboxField
+            key={`${selectedObjectName}-write`}
+            id={`${selectedObjectName}-write`}
+            onCheckedChange={(checked) => onCheckboxChange(checked)}
+        //   isChecked={!!selectedWriteFields?.[field.objectName]}
+            label={`Allow create and update ${selectedObjectName}`}
+          />
+        </CheckboxFieldsContainer>
+      </CheckboxGroup>
+    </>
+  );
+}

src/components/Configure/state/utils.ts

@@ -110,10 +110,12 @@ export function generateConfigurationState(
   const readAction = hydratedRevision?.content?.read;
   const writeAction = hydratedRevision?.content?.write;
 
-  return {
+  const configureState = {
     read: generateConfigurationStateRead(readAction, objectName, config),
     write: generateConfigurationStateWrite(writeAction, config),
   };
+
+  return configureState;
 }
 
 // resets configure state for single object to hydrated revision values