enhancement: refactor download URL controls into a separate component

Author: adamdoe

packages/core/components/EditorPanel/DataTableEditor.tsx

@@ -5,9 +5,10 @@ import { CheckBox, TextField, Select } from './Inputs'
 import MultiSelect from '../MultiSelect'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Visualization } from '../../types/Visualization'
-import _ from 'lodash'
-import { Column } from '../../types/Column'
-import CustomSortOrder from './CustomSortOrder'
+import _ from 'lodash'
+import { Column } from '../../types/Column'
+import CustomSortOrder from './CustomSortOrder'
+import DownloadUrlControls from './DownloadUrlControls'
 
 interface DataTableProps {
   config: Partial<Visualization>
@@ -377,29 +378,12 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
-      {hasUrlBackedDataSource && (
-        <>
-          <CheckBox
-            value={config.table.showDownloadUrl}
-            fieldName='showDownloadUrl'
-            label='Show URL to Automatically Updated Data'
-            section='table'
-            updateField={updateField}
-          />
-          {config.table.showDownloadUrl && (
-            <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
-              <TextField
-                value={config.table.downloadUrlLabel}
-                section='table'
-                fieldName='downloadUrlLabel'
-                label='Dataset Link Text'
-                placeholder='Link to Dataset'
-                updateField={updateField}
-              />
-            </div>
-          )}
-        </>
-      )}
+      <DownloadUrlControls
+        hasUrlBackedDataSource={hasUrlBackedDataSource}
+        showDownloadUrl={config.table.showDownloadUrl}
+        downloadUrlLabel={config.table.downloadUrlLabel}
+        updateField={updateField}
+      />
       {config.type !== 'table' && (
         <CheckBox
           value={config.table.showDownloadImgButton}

packages/core/components/EditorPanel/DownloadUrlControls.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { CheckBox, TextField } from './Inputs'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import { Column } from '../../types/Column'
+
+type DownloadUrlControlsProps = {
+  hasUrlBackedDataSource: boolean
+  showDownloadUrl?: boolean
+  downloadUrlLabel?: string
+  updateField: UpdateFieldFunc<string | boolean | string[] | number | Record<string, Partial<Column>>>
+}
+
+const DownloadUrlControls: React.FC<DownloadUrlControlsProps> = ({
+  hasUrlBackedDataSource,
+  showDownloadUrl,
+  downloadUrlLabel,
+  updateField
+}) => {
+  if (!hasUrlBackedDataSource) return null
+
+  return (
+    <>
+      <CheckBox
+        value={showDownloadUrl}
+        fieldName='showDownloadUrl'
+        label='Show URL to Automatically Updated Data'
+        section='table'
+        updateField={updateField}
+      />
+      {showDownloadUrl && (
+        <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
+          <TextField
+            value={downloadUrlLabel}
+            section='table'
+            fieldName='downloadUrlLabel'
+            label='Dataset Link Text'
+            placeholder='Link to Dataset'
+            updateField={updateField}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default DownloadUrlControls

packages/map/src/components/EditorPanel/components/EditorPanel.tsx

@@ -51,6 +51,7 @@ import { MapContext } from '../../../types/MapContext.js'
 import Alert from '@cdc/core/components/Alert'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import DownloadUrlControls from '@cdc/core/components/EditorPanel/DownloadUrlControls'
 import Button from '@cdc/core/components/elements/Button'
 import StyleTreatmentSection from '@cdc/core/components/EditorPanel/sections/StyleTreatmentSection'
 import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
@@ -1207,7 +1208,11 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
       ))
   }
 
-  const isLoadedFromUrl = config?.dataKey?.includes('http://') || config?.dataKey?.includes('https://')
+  const isLoadedFromUrl =
+    config?.dataFileSourceType === 'url' ||
+    Boolean(config?.runtimeDataUrl || config?.dataUrl || config?.dataFileName) ||
+    config?.dataKey?.includes('http://') ||
+    config?.dataKey?.includes('https://')
 
   // Custom convertStateToConfig for map with map-specific logic
   const customConvertStateToConfig = () => {
@@ -3198,31 +3203,12 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                           updateField={updateField}
                         />
                       )}
-                      {isLoadedFromUrl && (
-                        <>
-                          <CheckBox
-                            value={config.table.showDownloadUrl}
-                            section='table'
-                            subsection={null}
-                            fieldName='showDownloadUrl'
-                            label='Show URL to Automatically Updated Data'
-                            updateField={updateField}
-                          />
-                          {config.table.showDownloadUrl && (
-                            <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
-                              <TextField
-                                value={config.table.downloadUrlLabel}
-                                section='table'
-                                subsection={null}
-                                fieldName='downloadUrlLabel'
-                                label='Dataset Link Text'
-                                placeholder='Link to Dataset'
-                                updateField={updateField}
-                              />
-                            </div>
-                          )}
-                        </>
-                      )}
+                      <DownloadUrlControls
+                        hasUrlBackedDataSource={Boolean(isLoadedFromUrl)}
+                        showDownloadUrl={config.table.showDownloadUrl}
+                        downloadUrlLabel={config.table.downloadUrlLabel}
+                        updateField={updateField}
+                      />
                       <CheckBox
                         value={config.table.showFullGeoNameInCSV}
                         section='table'