Hide geography column when geocoding_config is set; allow geocoding n…

…on-member data
commonknowledge · Dec 18, 2024 · 5a17e51 · 5a17e51
1 parent 5db4d3b
commit 5a17e51
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 179 deletions.
diff --git a/hub/graphql/types/model_types.py b/hub/graphql/types/model_types.py
@@ -904,6 +904,7 @@ class BaseDataSource(Analytics):
     last_update: auto
     geography_column: auto
     geography_column_type: auto
+    geocoding_config: JSON
     postcode_field: auto
     first_name_field: auto
     last_name_field: auto

diff --git a/nextjs/src/__generated__/gql.ts b/nextjs/src/__generated__/gql.ts
diff --git a/nextjs/src/__generated__/graphql.ts b/nextjs/src/__generated__/graphql.ts
diff --git a/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
@@ -43,6 +43,7 @@ const GET_UPDATE_CONFIG = gql`
       crmType
       geographyColumn
       geographyColumnType
+      geocodingConfig
       postcodeField
       firstNameField
       lastNameField
@@ -148,6 +149,7 @@ export default function Page({
       {externalDataSource.data ? (
         <UpdateMappingForm
           crmType={externalDataSource.data?.externalDataSource.crmType}
+          externalDataSourceId={externalDataSourceId}
           initialData={{
             geographyColumn:
               externalDataSource.data?.externalDataSource.geographyColumn,

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
@@ -65,6 +65,7 @@ const TEST_DATA_SOURCE = gql`
       }
       geographyColumn
       geographyColumnType
+      geocodingConfig
       healthcheck
       predefinedColumnNames
       defaultDataType
@@ -205,7 +206,11 @@ export default function Page({
     return getFieldsForDataSourceType(dataType)
   }, [dataType])
 
-  const geographyFields = ['geographyColumn', 'geographyColumnType']
+  const geographyFields = [
+    'geographyColumn',
+    'geographyColumnType',
+    'geocodingConfig',
+  ]
 
   async function fetchSheetNamesUsingCredentials(
     spreadsheetId: string,

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataProviderId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataProviderId]/page.tsx
@@ -27,6 +27,7 @@ const GET_UPDATE_CONFIG = gql`
       name
       geographyColumn
       geographyColumnType
+      geocodingConfig
       dataType
       crmType
       autoImportEnabled

diff --git a/...app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx b/...app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
@@ -97,6 +97,7 @@ const GET_UPDATE_CONFIG = gql`
       webhookHealthcheck
       geographyColumn
       geographyColumnType
+      geocodingConfig
       postcodeField
       firstNameField
       lastNameField
@@ -201,9 +202,6 @@ export default function InspectExternalDataSource({
 
   const source = data?.externalDataSource
 
-  const allowMapping =
-    source?.dataType == DataSourceType.Member && source.allowUpdates
-
   const crmInfo = source?.crmType
     ? externalDataSourceOptions[source?.crmType]
     : undefined
@@ -442,6 +440,7 @@ export default function InspectExternalDataSource({
               <UpdateExternalDataSourceFields
                 crmType={source.crmType}
                 fieldDefinitions={source.fieldDefinitions}
+                allowGeocodingConfigChange={!source.geocodingConfig}
                 initialData={{
                   geographyColumn: source.geographyColumn,
                   geographyColumnType: source.geographyColumnType,
@@ -496,14 +495,20 @@ export default function InspectExternalDataSource({
                     <p className="text-meepGray-400">
                       <span className="align-middle">
                         Pull Mapped data into your {crmInfo?.name || 'database'}{' '}
-                        based on each record
-                        {"'"}s
                       </span>
-                      <DataSourceFieldLabel
-                        className="align-middle"
-                        label={source.geographyColumnType}
-                        crmType={source.crmType}
-                      />
+                      {!source.geocodingConfig && (
+                        <>
+                          <span>
+                            based on each record
+                            {"'"}s
+                          </span>
+                          <DataSourceFieldLabel
+                            className="align-middle"
+                            label={source.geographyColumnType}
+                            crmType={source.crmType}
+                          />
+                        </>
+                      )}
                     </p>
                     <div className="space-y-4">
                       {!source.updateProgress?.inQueue ? (
@@ -633,12 +638,14 @@ export default function InspectExternalDataSource({
                   after changing these settings.
                 </p>
                 <UpdateMappingForm
-                  allowMapping={allowMapping}
+                  allowMapping={true}
                   crmType={source.crmType}
                   fieldDefinitions={source.fieldDefinitions}
                   refreshFieldDefinitions={() => {
                     refetch()
                   }}
+                  allowGeocodingConfigChange={!source.geocodingConfig}
+                  externalDataSourceId={source.id}
                   initialData={{
                     // Trim out the __typenames
                     geographyColumn: source?.geographyColumn,

diff --git a/nextjs/src/components/UpdateExternalDataSourceFields.tsx b/nextjs/src/components/UpdateExternalDataSourceFields.tsx
@@ -38,6 +38,7 @@ export function UpdateExternalDataSourceFields({
   fieldDefinitions,
   onSubmit,
   dataType,
+  allowGeocodingConfigChange = true,
 }: {
   onSubmit: (
     data: ExternalDataSourceInput,
@@ -47,6 +48,7 @@ export function UpdateExternalDataSourceFields({
   initialData?: ExternalDataSourceInput
   fieldDefinitions?: FieldDefinition[] | null
   dataType: DataSourceType
+  allowGeocodingConfigChange?: boolean
 }) {
   const form = useForm<FormInputs>({
     defaultValues: initialData,
@@ -86,78 +88,83 @@ export function UpdateExternalDataSourceFields({
         onSubmit={form.handleSubmit(onSubmit)}
         className="grid sm:grid-cols-2 gap-4 max-w-lg"
       >
-        <FormField
-          control={form.control}
-          name="geographyColumnType"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Type of location data</FormLabel>
-              <FormControl>
-                {/* @ts-ignore */}
-                <Select onValueChange={field.onChange} value={field.value}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a geography type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Geography type</SelectLabel>
-                      {locationTypeOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="geographyColumn"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                {form.watch('geographyColumnType')?.toLocaleLowerCase()} field
-              </FormLabel>
-              <FormControl>
-                {fieldDefinitions?.length ? (
-                  <Select
-                    // @ts-ignore
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    required
-                  >
-                    <SelectTrigger className="pl-1">
-                      <SelectValue
-                        placeholder={`Choose ${form.watch('geographyColumnType') || 'geography'} field`}
-                      />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectLabel>Geography field</SelectLabel>
-                        {fieldDefinitions?.map((field) => (
-                          <SelectItem key={field.value} value={field.value}>
-                            <DataSourceFieldLabel
-                              fieldDefinition={field}
-                              crmType={crmType}
-                            />
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                ) : (
-                  // @ts-ignore
-                  <Input {...field} required={required} />
-                )}
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        {allowGeocodingConfigChange && (
+          <>
+            <FormField
+              control={form.control}
+              name="geographyColumnType"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Type of location data</FormLabel>
+                  <FormControl>
+                    {/* @ts-ignore */}
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a geography type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          <SelectLabel>Geography type</SelectLabel>
+                          {locationTypeOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="geographyColumn"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {form.watch('geographyColumnType')?.toLocaleLowerCase()}{' '}
+                    field
+                  </FormLabel>
+                  <FormControl>
+                    {fieldDefinitions?.length ? (
+                      <Select
+                        // @ts-ignore
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        required
+                      >
+                        <SelectTrigger className="pl-1">
+                          <SelectValue
+                            placeholder={`Choose ${form.watch('geographyColumnType') || 'geography'} field`}
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectLabel>Geography field</SelectLabel>
+                            {fieldDefinitions?.map((field) => (
+                              <SelectItem key={field.value} value={field.value}>
+                                <DataSourceFieldLabel
+                                  fieldDefinition={field}
+                                  crmType={crmType}
+                                />
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      // @ts-ignore
+                      <Input {...field} required={required} />
+                    )}
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </>
+        )}
         {collectFields?.map((field) => (
           <FPreopulatedSelectField key={field} name={field} />
         ))}