From 9b08b6b595274aa8876eeb9e9d7601aaa4ed7a1f Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Tue, 16 Feb 2021 13:03:14 -0700
Subject: [PATCH] admin(ui): fix SearchableSelect, other tweaks

---
 resources/scripts/api/admin/nodes/getNodes.ts |  3 ++-
 .../components/admin/SubNavigation.tsx        | 10 ++++-----
 .../components/admin/nodes/DatabaseSelect.tsx |  6 ++++-
 .../components/admin/nodes/LocationSelect.tsx |  6 ++++-
 .../admin/nodes/NodeSettingsContainer.tsx     | 21 ++++++++++--------
 .../components/elements/SearchableSelect.tsx  | 22 +++++++++----------
 6 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/resources/scripts/api/admin/nodes/getNodes.ts b/resources/scripts/api/admin/nodes/getNodes.ts
index 3e3fd5cb8..5d70dee4b 100644
--- a/resources/scripts/api/admin/nodes/getNodes.ts
+++ b/resources/scripts/api/admin/nodes/getNodes.ts
@@ -61,7 +61,8 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
     updatedAt: new Date(attributes.updated_at),
 
     relations: {
-        databaseHost: attributes.relationships?.database_host !== undefined ? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData) : undefined,
+        // eslint-disable-next-line camelcase
+        databaseHost: attributes.relationships?.database_host !== undefined && attributes.relationships?.database_host.object !== 'null_resource' ? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData) : undefined,
         location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
     },
 });
diff --git a/resources/scripts/components/admin/SubNavigation.tsx b/resources/scripts/components/admin/SubNavigation.tsx
index 1ce12d408..d9a83a6dd 100644
--- a/resources/scripts/components/admin/SubNavigation.tsx
+++ b/resources/scripts/components/admin/SubNavigation.tsx
@@ -4,17 +4,17 @@ import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 
 export const SubNavigation = styled.div`
-    ${tw`h-12 flex flex-row items-center border-b border-neutral-700 mb-4`};
+    ${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`};
 
     & > div {
-        ${tw`h-full flex flex-col flex-shrink-0 justify-center`};
+        ${tw`flex flex-col justify-center flex-shrink-0 h-full`};
 
         & > a {
-            ${tw`h-full flex flex-row items-center text-neutral-300 border-t px-4`};
+            ${tw`flex flex-row items-center h-full px-4 border-t text-neutral-300`};
             border-top-color: transparent !important;
 
             & > svg {
-                ${tw`h-6 w-6 mr-2`};
+                ${tw`w-6 h-6 mr-2`};
             }
 
             & > span {
@@ -22,7 +22,7 @@ export const SubNavigation = styled.div`
             }
 
             &:active, &.active {
-                ${tw`text-primary-300 border-b border-primary-300`};
+                ${tw`border-b text-primary-300 border-primary-300`};
             }
         }
     }
diff --git a/resources/scripts/components/admin/nodes/DatabaseSelect.tsx b/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
index ac768735a..dc8871550 100644
--- a/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
+++ b/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
+import { useFormikContext } from 'formik';
 import { Database } from '@/api/admin/databases/getDatabases';
 import searchDatabases from '@/api/admin/databases/searchDatabases';
 import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
 
 export default ({ selected }: { selected: Database | null }) => {
+    const context = useFormikContext();
+
     const [ database, setDatabase ] = useState<Database | null>(selected);
     const [ databases, setDatabases ] = useState<Database[]>([]);
 
@@ -16,8 +19,9 @@ export default ({ selected }: { selected: Database | null }) => {
         });
     };
 
-    const onSelect = (database: Database) => {
+    const onSelect = (database: Database | null) => {
         setDatabase(database);
+        context.setFieldValue('databaseHostId', database?.id || null);
     };
 
     const getSelectedText = (database: Database | null): string => {
diff --git a/resources/scripts/components/admin/nodes/LocationSelect.tsx b/resources/scripts/components/admin/nodes/LocationSelect.tsx
index 4f23c2069..1da1e5d04 100644
--- a/resources/scripts/components/admin/nodes/LocationSelect.tsx
+++ b/resources/scripts/components/admin/nodes/LocationSelect.tsx
@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
+import { useFormikContext } from 'formik';
 import { Location } from '@/api/admin/locations/getLocations';
 import searchLocations from '@/api/admin/locations/searchLocations';
 import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
 
 export default ({ selected }: { selected: Location | null }) => {
+    const context = useFormikContext();
+
     const [ location, setLocation ] = useState<Location | null>(selected);
     const [ locations, setLocations ] = useState<Location[]>([]);
 
@@ -16,8 +19,9 @@ export default ({ selected }: { selected: Location | null }) => {
         });
     };
 
-    const onSelect = (location: Location) => {
+    const onSelect = (location: Location | null) => {
         setLocation(location);
+        context.setFieldValue('locationId', location?.id || null);
     };
 
     const getSelectedText = (location: Location | null): string => {
diff --git a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
index 5df7e85d0..bd81ced4d 100644
--- a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
@@ -39,10 +39,13 @@ export default () => {
         );
     }
 
-    const submit = ({ name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+    const submit = ({ name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('node');
 
-        updateNode(node.id, { name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
+        console.log(`Location ID: ${locationId}`);
+        console.log(`Database Host ID: ${databaseHostId || 'null'}`);
+
+        updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
             .then(() => setNode({ ...node, name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
             .catch(error => {
                 console.error(error);
@@ -114,8 +117,8 @@ export default () => {
                                     />
                                 </div>
 
-                                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
-                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
                                         <Field
                                             id={'listenPortHTTP'}
                                             name={'listenPortHTTP'}
@@ -124,7 +127,7 @@ export default () => {
                                         />
                                     </div>
 
-                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
                                         <Field
                                             id={'publicPortHTTP'}
                                             name={'publicPortHTTP'}
@@ -134,8 +137,8 @@ export default () => {
                                     </div>
                                 </div>
 
-                                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
-                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
                                         <Field
                                             id={'listenPortSFTP'}
                                             name={'listenPortSFTP'}
@@ -144,7 +147,7 @@ export default () => {
                                         />
                                     </div>
 
-                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
                                         <Field
                                             id={'publicPortSFTP'}
                                             name={'publicPortSFTP'}
@@ -154,7 +157,7 @@ export default () => {
                                     </div>
                                 </div>
 
-                                <div css={tw`w-full flex flex-row items-center`}>
+                                <div css={tw`flex flex-row items-center w-full`}>
                                     <div css={tw`flex ml-auto`}>
                                         <Button type={'submit'} disabled={isSubmitting || !isValid}>
                                             Save
diff --git a/resources/scripts/components/elements/SearchableSelect.tsx b/resources/scripts/components/elements/SearchableSelect.tsx
index 148bb4e06..c0b7e6ee7 100644
--- a/resources/scripts/components/elements/SearchableSelect.tsx
+++ b/resources/scripts/components/elements/SearchableSelect.tsx
@@ -7,7 +7,7 @@ import Label from '@/components/elements/Label';
 import InputSpinner from '@/components/elements/InputSpinner';
 
 const Dropdown = styled.div<{ expanded: boolean }>`
-    ${tw`absolute mt-1 w-full rounded-md bg-neutral-900 shadow-lg z-10`};
+    ${tw`absolute z-10 w-full mt-1 rounded-md shadow-lg bg-neutral-900`};
     ${props => !props.expanded && tw`hidden`};
 `;
 
@@ -22,7 +22,7 @@ interface SearchableSelectProps<T> {
     setItems: (items: T[]) => void;
 
     onSearch: (query: string) => Promise<void>;
-    onSelect: (item: T) => void;
+    onSelect: (item: T | null) => void;
 
     getSelectedText: (item: T | null) => string;
 
@@ -135,7 +135,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
         <div>
             <Label htmlFor={id + '-select-label'}>{name}</Label>
 
-            <div css={tw`mt-1 relative`}>
+            <div css={tw`relative mt-1`}>
                 <InputSpinner visible={loading}>
                     <Input ref={searchInput} type="text" className="ignoreReadOnly" id={id} name={id} value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => {
                         setInputText(e.currentTarget.value);
@@ -144,8 +144,8 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
                     />
                 </InputSpinner>
 
-                <div css={tw`ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none`}>
-                    <svg css={tw`h-5 w-5 text-neutral-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <div css={tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none`}>
+                    <svg css={tw`w-5 h-5 text-neutral-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
                     </svg>
                 </div>
@@ -153,11 +153,11 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
                 <Dropdown ref={itemsList} expanded={expanded}>
                     { items.length < 1 ?
                         inputText.length < 2 ?
-                            <div css={tw`h-10 flex flex-row items-center px-3`}>
+                            <div css={tw`flex flex-row items-center h-10 px-3`}>
                                 <p css={tw`text-sm`}>Please type 2 or more characters.</p>
                             </div>
                             :
-                            <div css={tw`h-10 flex flex-row items-center px-3`}>
+                            <div css={tw`flex flex-row items-center h-10 px-3`}>
                                 <p css={tw`text-sm`}>No results found.</p>
                             </div>
                         :
@@ -166,7 +166,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
                             role={id + '-select'}
                             aria-labelledby={id + '-select-label'}
                             aria-activedescendant={id + '-select-item-' + selectedId}
-                            css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}
+                            css={tw`py-1 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}
                         >
                             {c}
                         </ul>
@@ -197,7 +197,7 @@ export function Option<T> ({ selectId, id, item, active, onClick, children }: Op
 
     if (active) {
         return (
-            <li id={selectId + '-select-item-' + id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={onClick(item)}>
+            <li id={selectId + '-select-item-' + id} role="option" css={tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`} onClick={onClick(item)}>
                 <div css={tw`flex items-center`}>
                     <span css={tw`block font-medium truncate`}>
                         {children}
@@ -205,7 +205,7 @@ export function Option<T> ({ selectId, id, item, active, onClick, children }: Op
                 </div>
 
                 <span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
-                    <svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <svg css={tw`w-5 h-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
                     </svg>
                 </span>
@@ -214,7 +214,7 @@ export function Option<T> ({ selectId, id, item, active, onClick, children }: Op
     }
 
     return (
-        <li id={'select-item-' + id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={onClick(item)}>
+        <li id={'select-item-' + id} role="option" css={tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`} onClick={onClick(item)}>
             <div css={tw`flex items-center`}>
                 <span css={tw`block font-normal truncate`}>
                     {children}