Create connection cleanup (#445)

* Add a tiny bit of vertical padding in list items * Allow connection details full width * Move config deconstruction in to modal logic * Rename type to queryEngine * Rename fetchTimeMs to fetchTimeoutMs * Remove unnecessary mapping * Add fetchTimeoutEnabled * Update changelog
aws · Jun 19, 2024 · 6ef3185 · 6ef3185
1 parent ae6e7d9
commit 6ef3185
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 40 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -25,6 +25,10 @@
   (<https://github.com/aws/graph-explorer/pull/419>)
 - Improved testing coverage by having less mocked logic
   (<https://github.com/aws/graph-explorer/pull/421>)
+- Fixed issue where the connection's fetch timeout input would disappear when
+  string is empty (<https://github.com/aws/graph-explorer/pull/445>)
+- Fixed issue where long connection URLs had no vertical padding
+  (<https://github.com/aws/graph-explorer/pull/445>)
 
 ## Release 1.7.0
 

diff --git a/packages/graph-explorer/src/components/AdvancedList/AdvancedList.styles.tsx b/packages/graph-explorer/src/components/AdvancedList/AdvancedList.styles.tsx
@@ -91,6 +91,7 @@ const listStyles =
         }
         .${pfx}-content {
           flex: 1;
+          padding: 2.5px 0;
         }
 
         .${pfx}-secondary {

diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.styles.ts b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.styles.ts
@@ -29,7 +29,6 @@ const defaultStyles =
         flex-direction: column;
         gap: ${theme.spacing.base};
         padding: 0 ${theme.spacing["2x"]};
-        max-width: 200px;
 
         .${pfx}-tag {
           display: flex;

diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx
@@ -214,18 +214,7 @@ const ConnectionDetail = ({ isSync, onSyncChange }: ConnectionDetailProps) => {
       >
         <CreateConnection
           onClose={() => setEdit(false)}
-          configId={config.id}
-          disabledFields={
-            config.__fileBase ? ["type", "url", "serviceType"] : undefined
-          }
-          initialData={{
-            ...(config.connection || {}),
-            name: config.displayLabel || config.id,
-            url: config.connection?.url,
-            type: config.connection?.queryEngine,
-            fetchTimeMs: config.connection?.fetchTimeoutMs,
-            serviceType: config.connection?.serviceType,
-          }}
+          existingConfig={config}
         />
       </Modal>
     </ModuleContainer>

diff --git a/packages/graph-explorer/src/modules/CreateConnection/CreateConnection.tsx b/packages/graph-explorer/src/modules/CreateConnection/CreateConnection.tsx
@@ -7,6 +7,7 @@ import Button from "../../components/Button";
 import Input from "../../components/Input";
 import Select from "../../components/Select";
 import {
+  ConfigurationContextProps,
   ConnectionConfig,
   RawConfiguration,
   useWithTheme,
@@ -24,13 +25,14 @@ import defaultStyles from "./CreateConnection.styles";
 type ConnectionForm = {
   name?: string;
   url?: string;
-  type?: "gremlin" | "sparql" | "openCypher";
+  queryEngine?: "gremlin" | "sparql" | "openCypher";
   proxyConnection?: boolean;
   graphDbUrl?: string;
   awsAuthEnabled?: boolean;
   serviceType?: "neptune-db" | "neptune-graph";
   awsRegion?: string;
-  fetchTimeMs?: number;
+  fetchTimeoutEnabled: boolean;
+  fetchTimeoutMs?: number;
 };
 
 export const CONNECTIONS_OP: {
@@ -43,21 +45,29 @@ export const CONNECTIONS_OP: {
 ];
 
 export type CreateConnectionProps = {
-  configId?: string;
-  initialData?: ConnectionForm;
-  disabledFields?: Array<"name" | "type" | "url" | "serviceType">;
+  existingConfig?: ConfigurationContextProps;
   onClose(): void;
 };
 
 const CreateConnection = ({
-  configId,
-  initialData,
-  disabledFields,
+  existingConfig,
   onClose,
 }: CreateConnectionProps) => {
   const styleWithTheme = useWithTheme();
   const pfx = withClassNamePrefix("ft");
 
+  const configId = existingConfig?.id;
+  const disabledFields = existingConfig?.__fileBase
+    ? ["queryEngine", "url", "serviceType"]
+    : undefined;
+  const initialData: ConnectionForm | undefined = existingConfig
+    ? {
+        ...(existingConfig.connection || {}),
+        name: existingConfig.displayLabel || existingConfig.id,
+        fetchTimeoutEnabled: Boolean(existingConfig.connection?.fetchTimeoutMs),
+      }
+    : undefined;
+
   const onSave = useRecoilCallback(
     ({ set }) =>
       async (data: Required<ConnectionForm>) => {
@@ -68,13 +78,13 @@ const CreateConnection = ({
             displayLabel: data.name,
             connection: {
               url: data.url,
-              queryEngine: data.type,
+              queryEngine: data.queryEngine,
               proxyConnection: data.proxyConnection,
               graphDbUrl: data.graphDbUrl,
               awsAuthEnabled: data.awsAuthEnabled,
               serviceType: data.serviceType,
               awsRegion: data.awsRegion,
-              fetchTimeoutMs: data.fetchTimeMs,
+              fetchTimeoutMs: data.fetchTimeoutMs,
             },
           };
           set(configurationAtom, prevConfigMap => {
@@ -96,20 +106,20 @@ const CreateConnection = ({
             displayLabel: data.name,
             connection: {
               url: data.url,
-              queryEngine: data.type,
+              queryEngine: data.queryEngine,
               proxyConnection: data.proxyConnection,
               graphDbUrl: data.graphDbUrl,
               awsAuthEnabled: data.awsAuthEnabled,
               serviceType: data.serviceType,
               awsRegion: data.awsRegion,
-              fetchTimeoutMs: data.fetchTimeMs,
+              fetchTimeoutMs: data.fetchTimeoutMs,
             },
           });
           return updatedConfig;
         });
 
         const urlChange = initialData?.url !== data.url;
-        const typeChange = initialData?.type !== data.type;
+        const typeChange = initialData?.queryEngine !== data.queryEngine;
 
         if (urlChange || typeChange) {
           set(schemaAtom, prevSchemaMap => {
@@ -129,11 +139,11 @@ const CreateConnection = ({
           });
         }
       },
-    [configId, initialData?.url, initialData?.type]
+    [configId, initialData?.url, initialData?.queryEngine]
   );
 
   const [form, setForm] = useState<ConnectionForm>({
-    type: initialData?.type || "gremlin",
+    queryEngine: initialData?.queryEngine || "gremlin",
     name:
       initialData?.name ||
       `Connection (${formatDate(new Date(), "yyyy-MM-dd HH:mm")})`,
@@ -143,7 +153,8 @@ const CreateConnection = ({
     awsAuthEnabled: initialData?.awsAuthEnabled || false,
     serviceType: initialData?.serviceType || "neptune-db",
     awsRegion: initialData?.awsRegion || "",
-    fetchTimeMs: initialData?.fetchTimeMs,
+    fetchTimeoutEnabled: initialData?.fetchTimeoutEnabled || false,
+    fetchTimeoutMs: initialData?.fetchTimeoutMs,
   });
 
   const [hasError, setError] = useState(false);
@@ -153,7 +164,16 @@ const CreateConnection = ({
         setForm(prev => ({
           ...prev,
           [attribute]: value,
-          ["type"]: "openCypher",
+          ["queryEngine"]: "openCypher",
+        }));
+      } else if (
+        attribute === "fetchTimeoutEnabled" &&
+        typeof value === "boolean"
+      ) {
+        setForm(prev => ({
+          ...prev,
+          [attribute]: value,
+          ["fetchTimeoutMs"]: value ? 240000 : undefined,
         }));
       } else {
         setForm(prev => ({
@@ -167,7 +187,7 @@ const CreateConnection = ({
 
   const reset = useResetState();
   const onSubmit = useCallback(() => {
-    if (!form.name || !form.url || !form.type) {
+    if (!form.name || !form.url || !form.queryEngine) {
       setError(true);
       return;
     }
@@ -201,10 +221,10 @@ const CreateConnection = ({
         <Select
           label={"Graph Type"}
           options={CONNECTIONS_OP}
-          value={form.type}
-          onChange={onFormChange("type")}
+          value={form.queryEngine}
+          onChange={onFormChange("queryEngine")}
           isDisabled={
-            disabledFields?.includes("type") ||
+            disabledFields?.includes("queryEngine") ||
             form.serviceType === "neptune-graph"
           }
         />
@@ -309,10 +329,10 @@ const CreateConnection = ({
       </div>
       <div className={pfx("configuration-form")}>
         <Checkbox
-          value={"fetchTimeoutMs"}
-          checked={!!form.fetchTimeMs}
+          value={"fetchTimeoutEnabled"}
+          checked={form.fetchTimeoutEnabled}
           onChange={e => {
-            onFormChange("fetchTimeMs")(e.target.checked);
+            onFormChange("fetchTimeoutEnabled")(e.target.checked);
           }}
           styles={{
             label: {
@@ -337,13 +357,13 @@ const CreateConnection = ({
             </div>
           }
         />
-        {form.fetchTimeMs && (
+        {form.fetchTimeoutEnabled && (
           <div className={pfx("input-url")}>
             <Input
               label="Fetch Timeout (ms)"
               type={"number"}
-              value={form.fetchTimeMs}
-              onChange={onFormChange("fetchTimeMs")}
+              value={form.fetchTimeoutMs}
+              onChange={onFormChange("fetchTimeoutMs")}
               min={0}
             />
           </div>