Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin(ui): fix SearchableSelect, other tweaks

Browse source
This commit is contained in:
Matthew Penner 2021-02-16 13:03:14 -07:00
parent d43e70c97a
commit 9b08b6b595
6 changed files with 40 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/scripts/api/admin/nodes/getNodes.ts
View file

@ -61,7 +61,8 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
updatedAt: new Date(attributes.updated_at), updatedAt: new Date(attributes.updated_at),
relations: { 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, location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
}, },
}); });

10
resources/scripts/components/admin/SubNavigation.tsx
View file

@ -4,17 +4,17 @@ import styled from 'styled-components/macro';
import tw from 'twin.macro'; import tw from 'twin.macro';
export const SubNavigation = styled.div` 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 { & > div {
${tw`h-full flex flex-col flex-shrink-0 justify-center`}; ${tw`flex flex-col justify-center flex-shrink-0 h-full`};
& > a { & > 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; border-top-color: transparent !important;
& > svg { & > svg {
${tw`h-6 w-6 mr-2`}; ${tw`w-6 h-6 mr-2`};
} }
& > span { & > span {
@ -22,7 +22,7 @@ export const SubNavigation = styled.div`
} }
&:active, &.active { &:active, &.active {
${tw`text-primary-300 border-b border-primary-300`}; ${tw`border-b text-primary-300 border-primary-300`};
} }
} }
} }

6
resources/scripts/components/admin/nodes/DatabaseSelect.tsx
View file

@ -1,9 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import { Database } from '@/api/admin/databases/getDatabases'; import { Database } from '@/api/admin/databases/getDatabases';
import searchDatabases from '@/api/admin/databases/searchDatabases'; import searchDatabases from '@/api/admin/databases/searchDatabases';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect'; import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
export default ({ selected }: { selected: Database | null }) => { export default ({ selected }: { selected: Database | null }) => {
const context = useFormikContext();
const [ database, setDatabase ] = useState<Database | null>(selected); const [ database, setDatabase ] = useState<Database | null>(selected);
const [ databases, setDatabases ] = useState<Database[]>([]); 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); setDatabase(database);
context.setFieldValue('databaseHostId', database?.id || null);
}; };
const getSelectedText = (database: Database | null): string => { const getSelectedText = (database: Database | null): string => {

6
resources/scripts/components/admin/nodes/LocationSelect.tsx
View file

@ -1,9 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import { Location } from '@/api/admin/locations/getLocations'; import { Location } from '@/api/admin/locations/getLocations';
import searchLocations from '@/api/admin/locations/searchLocations'; import searchLocations from '@/api/admin/locations/searchLocations';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect'; import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
export default ({ selected }: { selected: Location | null }) => { export default ({ selected }: { selected: Location | null }) => {
const context = useFormikContext();
const [ location, setLocation ] = useState<Location | null>(selected); const [ location, setLocation ] = useState<Location | null>(selected);
const [ locations, setLocations ] = useState<Location[]>([]); 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); setLocation(location);
context.setFieldValue('locationId', location?.id || null);
}; };
const getSelectedText = (location: Location | null): string => { const getSelectedText = (location: Location | null): string => {

21
resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
View file

@ -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'); 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 })) .then(() => setNode({ ...node, name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
.catch(error => { .catch(error => {
console.error(error); console.error(error);
@ -114,8 +117,8 @@ export default () => {
/> />
</div> </div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}> <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<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-col md:mr-4 md:mb-0`}>
<Field <Field
id={'listenPortHTTP'} id={'listenPortHTTP'}
name={'listenPortHTTP'} name={'listenPortHTTP'}
@ -124,7 +127,7 @@ export default () => {
/> />
</div> </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 <Field
id={'publicPortHTTP'} id={'publicPortHTTP'}
name={'publicPortHTTP'} name={'publicPortHTTP'}
@ -134,8 +137,8 @@ export default () => {
</div> </div>
</div> </div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}> <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<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-col md:mr-4 md:mb-0`}>
<Field <Field
id={'listenPortSFTP'} id={'listenPortSFTP'}
name={'listenPortSFTP'} name={'listenPortSFTP'}
@ -144,7 +147,7 @@ export default () => {
/> />
</div> </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 <Field
id={'publicPortSFTP'} id={'publicPortSFTP'}
name={'publicPortSFTP'} name={'publicPortSFTP'}
@ -154,7 +157,7 @@ export default () => {
</div> </div>
</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`}> <div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}> <Button type={'submit'} disabled={isSubmitting || !isValid}>
Save Save

22
resources/scripts/components/elements/SearchableSelect.tsx
View file

@ -7,7 +7,7 @@ import Label from '@/components/elements/Label';
import InputSpinner from '@/components/elements/InputSpinner'; import InputSpinner from '@/components/elements/InputSpinner';
const Dropdown = styled.div<{ expanded: boolean }>` 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`}; ${props => !props.expanded && tw`hidden`};
`; `;
@ -22,7 +22,7 @@ interface SearchableSelectProps<T> {
setItems: (items: T[]) => void; setItems: (items: T[]) => void;
onSearch: (query: string) => Promise<void>; onSearch: (query: string) => Promise<void>;
onSelect: (item: T) => void; onSelect: (item: T | null) => void;
getSelectedText: (item: T | null) => string; getSelectedText: (item: T | null) => string;
@ -135,7 +135,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
<div> <div>
<Label htmlFor={id + '-select-label'}>{name}</Label> <Label htmlFor={id + '-select-label'}>{name}</Label>
<div css={tw`mt-1 relative`}> <div css={tw`relative mt-1`}>
<InputSpinner visible={loading}> <InputSpinner visible={loading}>
<Input ref={searchInput} type="text" className="ignoreReadOnly" id={id} name={id} value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => { <Input ref={searchInput} type="text" className="ignoreReadOnly" id={id} name={id} value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => {
setInputText(e.currentTarget.value); setInputText(e.currentTarget.value);
@ -144,8 +144,8 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
/> />
</InputSpinner> </InputSpinner>
<div css={tw`ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none`}> <div css={tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3 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"> <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"/> <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> </svg>
</div> </div>
@ -153,11 +153,11 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
<Dropdown ref={itemsList} expanded={expanded}> <Dropdown ref={itemsList} expanded={expanded}>
{ items.length < 1 ? { items.length < 1 ?
inputText.length < 2 ? 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> <p css={tw`text-sm`}>Please type 2 or more characters.</p>
</div> </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> <p css={tw`text-sm`}>No results found.</p>
</div> </div>
: :
@ -166,7 +166,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
role={id + '-select'} role={id + '-select'}
aria-labelledby={id + '-select-label'} aria-labelledby={id + '-select-label'}
aria-activedescendant={id + '-select-item-' + selectedId} 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} {c}
</ul> </ul>
@ -197,7 +197,7 @@ export function Option<T> ({ selectId, id, item, active, onClick, children }: Op
if (active) { if (active) {
return ( 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`}> <div css={tw`flex items-center`}>
<span css={tw`block font-medium truncate`}> <span css={tw`block font-medium truncate`}>
{children} {children}
@ -205,7 +205,7 @@ export function Option<T> ({ selectId, id, item, active, onClick, children }: Op
</div> </div>
<span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}> <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"/> <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> </svg>
</span> </span>
@ -214,7 +214,7 @@ export function Option<T> ({ selectId, id, item, active, onClick, children }: Op
} }
return ( 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`}> <div css={tw`flex items-center`}>
<span css={tw`block font-normal truncate`}> <span css={tw`block font-normal truncate`}>
{children} {children}