Fix two issues related to the data store type selection (#1033)

spiffworkflow-frontend/src/components/DataStoreForm.tsx

@@ -155,8 +155,14 @@ export default function DataStoreForm({
   const onTypeChanged = (newType: any) => {
     setTypeInvalid(false);
     const newTypeSelection = newType.selectedItem;
-    const updateDict = { type: newTypeSelection.type };
+    if (
-    updateDataStore(updateDict);
+      newTypeSelection &&
+      typeof newTypeSelection === 'object' &&
+      'type' in newTypeSelection
+    ) {
+      const updateDict = { type: newTypeSelection.type };
+      updateDataStore(updateDict);
+    }
     setSelectedDataStoreType(newTypeSelection);
   };
 
@@ -166,6 +172,18 @@ export default function DataStoreForm({
     updateDataStore(updateDict);
   };
 
+  const dataStoreTypeDisplayString = (
+    dataStoreType: DataStoreType | null
+  ): string => {
+    if (dataStoreType) {
+      return `${dataStoreType.name} (${truncateString(
+        dataStoreType.description,
+        75
+      )})`;
+    }
+    return '';
+  };
+
   const formElements = () => {
     const textInputs = [
       <TextInput
@@ -200,28 +218,32 @@ export default function DataStoreForm({
       />
     );
 
-    textInputs.push(
+    if (mode === 'edit') {
-      <ComboBox
+      textInputs.push(
-        onChange={onTypeChanged}
+        <TextInput
-        id="data-store-type-select"
+          id="data-store-type"
-        data-qa="data-store-type-selection"
+          name="data-store-type"
-        items={dataStoreTypes}
+          readonly
-        itemToString={(dataStoreType: DataStoreType) => {
+          labelText="Type*"
-          if (dataStoreType) {
+          value={dataStoreTypeDisplayString(selectedDataStoreType)}
-            return `${dataStoreType.name} (${truncateString(
+        />
-              dataStoreType.description,
+      );
-              75
+    } else {
-            )})`;
+      textInputs.push(
-          }
+        <ComboBox
-          return null;
+          onChange={onTypeChanged}
-        }}
+          id="data-store-type-select"
-        titleText="Type*"
+          data-qa="data-store-type-selection"
-        invalidText="Type is required."
+          items={dataStoreTypes}
-        invalid={typeInvalid}
+          itemToString={dataStoreTypeDisplayString}
-        placeholder="Choose the data store type"
+          titleText="Type*"
-        selectedItem={selectedDataStoreType}
+          invalidText="Type is required."
-      />
+          invalid={typeInvalid}
-    );
+          placeholder="Choose the data store type"
+          selectedItem={selectedDataStoreType}
+        />
+      );
+    }
 
     textInputs.push(
       <TextArea