ui(admin): update button components, fix Editor for eggs

This commit is contained in:
Matthew Penner 2022-12-21 14:27:50 -07:00
parent 4e56f6dbea
commit 089860b721
No known key found for this signature in database
35 changed files with 363 additions and 623 deletions

View file

@ -85,7 +85,7 @@ export const searchEggs = async (
return data.data.map(Transformers.toEgg);
};
export const exportEgg = async (eggId: number): Promise<Record<string, any>> => {
export const exportEgg = async (eggId: number): Promise<string> => {
const { data } = await http.get(`/api/application/eggs/${eggId}/export`);
return data;
};

View file

@ -1,13 +1,11 @@
import http, {
FractalPaginatedResponse,
PaginatedResult,
QueryBuilderParams,
getPaginationSet,
withQueryBuilderParams,
} from '@/api/http';
import { Transformers, User } from '@definitions/admin';
import useSWR, { SWRConfiguration, SWRResponse } from 'swr';
import { AxiosError } from 'axios';
import type { AxiosError } from 'axios';
import type { SWRConfiguration, SWRResponse } from 'swr';
import useSWR from 'swr';
import type { FractalPaginatedResponse, PaginatedResult, QueryBuilderParams } from '@/api/http';
import http, { getPaginationSet, withQueryBuilderParams } from '@/api/http';
import type { User } from '@definitions/admin';
import { Transformers } from '@definitions/admin';
export interface UpdateUserValues {
externalId: string;
@ -32,7 +30,10 @@ const useGetUsers = (
params: withQueryBuilderParams(params),
});
return getPaginationSet(data, Transformers.toUser);
return {
items: (data.data || []).map(Transformers.toUser),
pagination: getPaginationSet(data.meta.pagination),
};
},
config || { revalidateOnMount: true, revalidateOnFocus: false },
);

View file

@ -28,6 +28,8 @@ interface ExtendedWindow extends Window {
root_admin: boolean;
use_totp: boolean;
language: string;
avatar_url: string;
admin_role_name: string;
updated_at: string;
created_at: string;
/* eslint-enable camelcase */
@ -45,6 +47,8 @@ function App() {
email: PterodactylUser.email,
language: PterodactylUser.language,
rootAdmin: PterodactylUser.root_admin,
avatarURL: PterodactylUser.avatar_url,
roleName: PterodactylUser.admin_role_name,
useTotp: PterodactylUser.use_totp,
createdAt: new Date(PterodactylUser.created_at),
updatedAt: new Date(PterodactylUser.updated_at),

View file

@ -1,7 +1,7 @@
import { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCogs, faLayerGroup, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { faLayerGroup, faScrewdriverWrench, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import SearchContainer from '@/components/dashboard/search/SearchContainer';
@ -57,6 +57,7 @@ export default () => {
{name}
</Link>
</div>
<RightNavigation className="flex h-full items-center justify-center">
<SearchContainer />
@ -66,14 +67,6 @@ export default () => {
</NavLink>
</Tooltip>
{rootAdmin && (
<Tooltip placement="bottom" content="Admin">
<a href="/admin" rel="noreferrer">
<FontAwesomeIcon icon={faCogs} />
</a>
</Tooltip>
)}
<Tooltip placement="bottom" content="Account Settings">
<NavLink to="/account">
<span className="flex items-center w-5 h-5">
@ -82,6 +75,14 @@ export default () => {
</NavLink>
</Tooltip>
{rootAdmin && (
<Tooltip placement="bottom" content="Admin">
<a href="/admin" rel="noreferrer">
<FontAwesomeIcon icon={faScrewdriverWrench} />
</a>
</Tooltip>
)}
<Tooltip placement="bottom" content="Sign Out">
<button onClick={onTriggerLogout}>
<FontAwesomeIcon icon={faSignOutAlt} />

View file

@ -35,7 +35,7 @@ interface PropsWithoutIcon extends Props {
}
export const SubNavigationLink = ({ to, name, icon: IconComponent, children }: PropsWithIcon | PropsWithoutIcon) => (
<NavLink to={to}>
<NavLink to={to} end>
{IconComponent ? <IconComponent /> : children}
{name}
</NavLink>

View file

@ -1,9 +1,11 @@
import { Actions, useStoreActions } from 'easy-peasy';
import type { Actions } from 'easy-peasy';
import { useStoreActions } from 'easy-peasy';
import { useState } from 'react';
import tw from 'twin.macro';
import deleteDatabase from '@/api/admin/databases/deleteDatabase';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Shape } from '@/components/elements/button/types';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import type { ApplicationStore } from '@/state';
@ -52,7 +54,7 @@ export default ({ databaseId, onDeleted }: Props) => {
created on this host but not the databases themselves.
</ConfirmationModal>
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
<Button.Danger type="button" shape={Shape.IconSquare} onClick={() => setVisible(true)}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -67,7 +69,7 @@ export default ({ databaseId, onDeleted }: Props) => {
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</Button>
</Button.Danger>
</>
);
};

View file

@ -14,7 +14,7 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
import Spinner from '@/components/elements/Spinner';
import FlashMessageRender from '@/components/FlashMessageRender';
import AdminBox from '@/components/admin/AdminBox';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import DatabaseDeleteButton from '@/components/admin/databases/DatabaseDeleteButton';
@ -115,7 +115,7 @@ export const InformationContainer = ({ title, initialValues, children, onSubmit
<div css={tw`w-full flex flex-row items-center mt-6`}>
{children}
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
<Button type="submit" disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>

View file

@ -10,17 +10,18 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminTable, {
ContentWrapper,
Loading,
NoItems,
Pagination,
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks,
} from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Size } from '@/components/elements/button/types';
import CopyOnClick from '@/components/elements/CopyOnClick';
const RowCheckbox = ({ id }: { id: number }) => {
@ -93,7 +94,7 @@ const DatabasesContainer = () => {
<div css={tw`flex ml-auto pl-4`}>
<NavLink to="/admin/databases/new">
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
<Button type="button" size={Size.Large} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Database Host
</Button>
</NavLink>

View file

@ -4,7 +4,8 @@ import { useState } from 'react';
import tw from 'twin.macro';
import deleteLocation from '@/api/admin/locations/deleteLocation';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Shape } from '@/components/elements/button/types';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import type { ApplicationStore } from '@/state';
@ -53,7 +54,7 @@ export default ({ locationId, onDeleted }: Props) => {
to it.
</ConfirmationModal>
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
<Button.Danger type="button" shape={Shape.IconSquare} onClick={() => setVisible(true)}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -68,7 +69,7 @@ export default ({ locationId, onDeleted }: Props) => {
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</Button>
</Button.Danger>
</>
);
};

View file

@ -13,7 +13,7 @@ import updateLocation from '@/api/admin/locations/updateLocation';
import AdminBox from '@/components/admin/AdminBox';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import LocationDeleteButton from '@/components/admin/locations/LocationDeleteButton';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import Field from '@/components/elements/Field';
import Spinner from '@/components/elements/Spinner';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@ -99,7 +99,7 @@ const EditInformationContainer = () => {
</div>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
<Button type="submit" disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>

View file

@ -24,7 +24,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
import { AdminContext } from '@/state/admin';
const RowCheckbox = ({ id }: { id: number }) => {
function RowCheckbox({ id }: { id: number }) {
const isChecked = AdminContext.useStoreState(state => state.locations.selectedLocations.indexOf(id) >= 0);
const appendSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.appendSelectedLocation);
const removeSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.removeSelectedLocation);
@ -42,9 +42,9 @@ const RowCheckbox = ({ id }: { id: number }) => {
}}
/>
);
};
}
const LocationsContainer = () => {
function LocationsContainer() {
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(LocationsContext);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { data: locations, error, isValidating } = getLocations();
@ -173,7 +173,7 @@ const LocationsContainer = () => {
</AdminTable>
</AdminContentBlock>
);
};
}
export default () => {
const hooks = useTableHooks<Filters>();

View file

@ -6,7 +6,8 @@ import { object, string } from 'yup';
import createLocation from '@/api/admin/locations/createLocation';
import getLocations from '@/api/admin/locations/getLocations';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Size, Variant } from '@/components/elements/button/types';
import Field from '@/components/elements/Field';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
@ -82,14 +83,14 @@ export default () => {
</div>
<div css={tw`flex flex-wrap justify-end mt-6`}>
<Button
type={'button'}
isSecondary
<Button.Text
type="button"
variant={Variant.Secondary}
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
>
Cancel
</Button>
</Button.Text>
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
Create Location
</Button>
@ -100,8 +101,8 @@ export default () => {
</Formik>
<Button
type={'button'}
size={'large'}
type="button"
size={Size.Large}
css={tw`h-10 px-4 py-0 whitespace-nowrap`}
onClick={() => setVisible(true)}
>

View file

@ -4,7 +4,7 @@ import { useState } from 'react';
import tw from 'twin.macro';
import deleteMount from '@/api/admin/mounts/deleteMount';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import type { ApplicationStore } from '@/state';
@ -52,7 +52,7 @@ export default ({ mountId, onDeleted }: Props) => {
Are you sure you want to delete this mount? Deleting a mount will not delete files on any nodes.
</ConfirmationModal>
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
<Button.Danger type="button" onClick={() => setVisible(true)}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -67,7 +67,7 @@ export default ({ mountId, onDeleted }: Props) => {
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</Button>
</Button.Danger>
</>
);
};

View file

@ -1,10 +1,11 @@
import type { FormikHelpers } from 'formik';
import { Field as FormikField, Form, Formik } from 'formik';
import type { ReactNode } from 'react';
import tw from 'twin.macro';
import { boolean, object, string } from 'yup';
import AdminBox from '@/components/admin/AdminBox';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import Field from '@/components/elements/Field';
import Label from '@/components/elements/Label';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@ -25,7 +26,7 @@ interface Props {
onSubmit: (values: Values, helpers: FormikHelpers<Values>) => void;
children?: React.ReactNode;
children?: ReactNode;
}
function MountForm({ action, title, initialValues, children, onSubmit }: Props) {
@ -118,7 +119,7 @@ function MountForm({ action, title, initialValues, children, onSubmit }: Props)
{children}
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
<Button type="submit" disabled={isSubmitting || !isValid}>
{action}
</Button>
</div>

View file

@ -18,7 +18,8 @@ import AdminTable, {
ContentWrapper,
useTableHooks,
} from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Size } from '@/components/elements/button/types';
import CopyOnClick from '@/components/elements/CopyOnClick';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -94,7 +95,7 @@ const MountsContainer = () => {
<div css={tw`flex ml-auto pl-4`}>
<NavLink to={`/admin/mounts/new`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
<Button type={'button'} size={Size.Large} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Mount
</Button>
</NavLink>

View file

@ -1,13 +1,17 @@
import { LanguageDescription } from '@codemirror/language';
import { json } from '@codemirror/lang-json';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import tw from 'twin.macro';
import getEggs from '@/api/admin/nests/getEggs';
import importEgg from '@/api/admin/nests/importEgg';
import useFlash from '@/plugins/useFlash';
// import { Editor } from '@/components/elements/editor';
import { useState } from 'react';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Size, Variant } from '@/components/elements/button/types';
import { Editor } from '@/components/elements/editor';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import { useParams } from 'react-router-dom';
import tw from 'twin.macro';
export default ({ className }: { className?: string }) => {
const [visible, setVisible] = useState(false);
@ -43,24 +47,24 @@ export default ({ className }: { className?: string }) => {
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
{/*<Editor*/}
{/* // overrides={tw`h-64 rounded`}*/}
{/* initialContent={''}*/}
{/* // language={jsonLanguage}*/}
{/* fetchContent={value => {*/}
{/* fetchFileContent = value;*/}
{/* }}*/}
{/*/>*/}
<Editor
className="h-64 overflow-hidden rounded"
initialContent={''}
fetchContent={value => {
fetchFileContent = value;
}}
language={LanguageDescription.of({ name: 'json', support: json() })}
/>
<div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
<Button
type={'button'}
<Button.Text
type="button"
variant={Variant.Secondary}
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
isSecondary
>
Cancel
</Button>
</Button.Text>
<Button css={tw`w-full sm:w-auto mt-4 sm:mt-0`} onClick={submit}>
Import Egg
</Button>
@ -68,12 +72,12 @@ export default ({ className }: { className?: string }) => {
</Modal>
<Button
type={'button'}
size={'large'}
type="button"
size={Size.Large}
variant={Variant.Secondary}
css={tw`h-10 px-4 py-0 whitespace-nowrap`}
className={className}
onClick={() => setVisible(true)}
isSecondary
>
Import
</Button>

View file

@ -4,7 +4,8 @@ import { useState } from 'react';
import tw from 'twin.macro';
import deleteNest from '@/api/admin/nests/deleteNest';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Shape } from '@/components/elements/button/types';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import type { ApplicationStore } from '@/state';
@ -52,7 +53,7 @@ export default ({ nestId, onDeleted }: Props) => {
Are you sure you want to delete this nest? Deleting a nest will delete all eggs assigned to it.
</ConfirmationModal>
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
<Button.Danger type="button" shape={Shape.IconSquare} onClick={() => setVisible(true)}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -67,7 +68,7 @@ export default ({ nestId, onDeleted }: Props) => {
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</Button>
</Button.Danger>
</>
);
};

View file

@ -14,7 +14,8 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import type { Nest } from '@/api/admin/nests/getNests';
import getNest from '@/api/admin/nests/getNest';
import updateNest from '@/api/admin/nests/updateNest';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Size } from '@/components/elements/button/types';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import AdminBox from '@/components/admin/AdminBox';
@ -117,7 +118,7 @@ const EditInformationContainer = () => {
</div>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
<Button type="submit" disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>
@ -222,7 +223,7 @@ const NestEditContainer = () => {
<ImportEggButton css={tw`mr-4`} />
<NavLink to={`/admin/nests/${params.nestId}/new`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
<Button type={'button'} size={Size.Large} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Egg
</Button>
</NavLink>

View file

@ -15,7 +15,7 @@ import {
EggProcessContainerRef,
EggStartupContainer,
} from '@/components/admin/nests/eggs/EggSettingsContainer';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -45,7 +45,16 @@ export default () => {
values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
createEgg({ ...values, dockerImages: values.dockerImages.split('\n'), nestId })
const dockerImages: Record<string, string> = {};
values.dockerImages.split('\n').forEach(v => {
dockerImages[v] = v;
});
createEgg({
...values,
dockerImages,
nestId,
})
.then(egg => navigate(`/admin/nests/${nestId}/eggs/${egg.id}`))
.catch(error => {
console.error(error);
@ -97,12 +106,7 @@ export default () => {
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mb-16`}>
<div css={tw`flex flex-row`}>
<Button
type="submit"
size="small"
css={tw`ml-auto`}
disabled={isSubmitting || !isValid}
>
<Button type="submit" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
Create
</Button>
</div>

View file

@ -1,4 +1,9 @@
import React, { useState } from 'react';
import type { FormikHelpers } from 'formik';
import { Form, Formik } from 'formik';
import { useState } from 'react';
import tw from 'twin.macro';
import { object, string } from 'yup';
import createNest from '@/api/admin/nests/createNest';
import getNests from '@/api/admin/nests/getNests';
import Button from '@/components/elements/Button';
@ -6,25 +11,19 @@ import Field from '@/components/elements/Field';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
import { Form, Formik, FormikHelpers } from 'formik';
import { object, string } from 'yup';
import tw from 'twin.macro';
interface Values {
name: string,
description: string,
name: string;
description: string;
}
const schema = object().shape({
name: string()
.required('A nest name must be provided.')
.max(32, 'Nest name must not exceed 32 characters.'),
description: string()
.max(255, 'Nest description must not exceed 255 characters.'),
name: string().required('A nest name must be provided.').max(32, 'Nest name must not exceed 32 characters.'),
description: string().max(255, 'Nest description must not exceed 255 characters.'),
});
export default () => {
const [ visible, setVisible ] = useState(false);
const [visible, setVisible] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { mutate } = getNests();
@ -33,7 +32,7 @@ export default () => {
setSubmitting(true);
createNest(name, description)
.then(async (nest) => {
.then(async nest => {
await mutate(data => ({ ...data!, items: data!.items.concat(nest) }), false);
setVisible(false);
})
@ -45,66 +44,65 @@ export default () => {
return (
<>
<Formik
onSubmit={submit}
initialValues={{ name: '', description: '' }}
validationSchema={schema}
>
{
({ isSubmitting, resetForm }) => (
<Modal
visible={visible}
dismissable={!isSubmitting}
showSpinnerOverlay={isSubmitting}
onDismissed={() => {
resetForm();
setVisible(false);
}}
>
<FlashMessageRender byKey={'nest:create'} css={tw`mb-6`}/>
<Formik onSubmit={submit} initialValues={{ name: '', description: '' }} validationSchema={schema}>
{({ isSubmitting, resetForm }) => (
<Modal
visible={visible}
dismissable={!isSubmitting}
showSpinnerOverlay={isSubmitting}
onDismissed={() => {
resetForm();
setVisible(false);
}}
>
<FlashMessageRender byKey={'nest:create'} css={tw`mb-6`} />
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Nest</h2>
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Nest</h2>
<Form css={tw`m-0`}>
<Form css={tw`m-0`}>
<Field
type={'text'}
id={'name'}
name={'name'}
label={'Name'}
description={'A short name used to identify this nest.'}
autoFocus
/>
<div css={tw`mt-6`}>
<Field
type={'text'}
id={'name'}
name={'name'}
label={'Name'}
description={'A short name used to identify this nest.'}
autoFocus
id={'description'}
name={'description'}
label={'Description'}
description={'A description for this nest.'}
/>
</div>
<div css={tw`mt-6`}>
<Field
type={'text'}
id={'description'}
name={'description'}
label={'Description'}
description={'A description for this nest.'}
/>
</div>
<div css={tw`flex flex-wrap justify-end mt-6`}>
<Button
type={'button'}
isSecondary
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
>
Cancel
</Button>
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
Create Nest
</Button>
</div>
</Form>
</Modal>
)
}
<div css={tw`flex flex-wrap justify-end mt-6`}>
<Button
type={'button'}
isSecondary
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
>
Cancel
</Button>
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
Create Nest
</Button>
</div>
</Form>
</Modal>
)}
</Formik>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
<Button
type={'button'}
size={'large'}
css={tw`h-10 px-4 py-0 whitespace-nowrap`}
onClick={() => setVisible(true)}
>
New Nest
</Button>
</>

View file

@ -4,7 +4,8 @@ import { useState } from 'react';
import tw from 'twin.macro';
import deleteEgg from '@/api/admin/eggs/deleteEgg';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import { Shape } from '@/components/elements/button/types';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import type { ApplicationStore } from '@/state';
@ -52,7 +53,7 @@ export default ({ eggId, onDeleted }: Props) => {
Are you sure you want to delete this egg? You may only delete an egg with no servers using it.
</ConfirmationModal>
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
<Button.Danger type="button" shape={Shape.IconSquare} onClick={() => setVisible(true)}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -67,7 +68,7 @@ export default ({ eggId, onDeleted }: Props) => {
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</Button>
</Button.Danger>
</>
);
};

View file

@ -1,22 +1,25 @@
import { exportEgg } from '@/api/admin/egg';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
// import { jsonLanguage } from '@codemirror/lang-json';
// import Editor from '@/components/elements/Editor';
import { LanguageDescription } from '@codemirror/language';
import { json } from '@codemirror/lang-json';
import { useEffect, useState } from 'react';
import Button from '@/components/elements/Button';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import { useParams } from 'react-router-dom';
import tw from 'twin.macro';
import { exportEgg } from '@/api/admin/egg';
import FlashMessageRender from '@/components/FlashMessageRender';
import { Button } from '@/components/elements/button';
import { Variant } from '@/components/elements/button/types';
import { Editor } from '@/components/elements/editor';
import Modal from '@/components/elements/Modal';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
export default ({ className }: { className?: string }) => {
const params = useParams<'id'>();
const { clearAndAddHttpError, clearFlashes } = useFlash();
const [visible, setVisible] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(true);
const [_content, setContent] = useState<Record<string, any> | null>(null);
const [content, setContent] = useState<string | undefined>(undefined);
useEffect(() => {
if (!visible) {
@ -45,21 +48,22 @@ export default ({ className }: { className?: string }) => {
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>Export Egg</h2>
<FlashMessageRender byKey={'egg:export'} css={tw`mb-6`} />
{/*<Editor*/}
{/* overrides={tw`h-[32rem] rounded`}*/}
{/* initialContent={content !== null ? JSON.stringify(content, null, '\t') : ''}*/}
{/* mode={jsonLanguage}*/}
{/*/>*/}
<Editor
className="h-[32rem] overflow-scroll rounded"
initialContent={content ?? ''}
language={LanguageDescription.of({ name: 'json', support: json() })}
/>
<div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
<Button
type={'button'}
<Button.Text
type="button"
variant={Variant.Secondary}
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
isSecondary
>
Close
</Button>
</Button.Text>
<Button
css={tw`w-full sm:w-auto mt-4 sm:mt-0`}
// onClick={submit}
@ -70,16 +74,14 @@ export default ({ className }: { className?: string }) => {
</div>
</Modal>
<Button
type={'button'}
size={'small'}
<Button.Text
type="button"
css={tw`px-4 py-0 whitespace-nowrap`}
className={className}
onClick={() => setVisible(true)}
isSecondary
>
Export
</Button>
</Button.Text>
</>
);
};

View file

@ -1,15 +1,18 @@
import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';
import { shell } from '@codemirror/legacy-modes/mode/shell';
import { faScroll } from '@fortawesome/free-solid-svg-icons';
import type { FormikHelpers } from 'formik';
import { Form, Formik } from 'formik';
import tw from 'twin.macro';
import { useEggFromRoute } from '@/api/admin/egg';
import updateEgg from '@/api/admin/eggs/updateEgg';
import Field from '@/components/elements/Field';
import useFlash from '@/plugins/useFlash';
// import { shell } from '@codemirror/legacy-modes/mode/shell';
import { faScroll } from '@fortawesome/free-solid-svg-icons';
import { Form, Formik, FormikHelpers } from 'formik';
import tw from 'twin.macro';
import AdminBox from '@/components/admin/AdminBox';
import Button from '@/components/elements/Button';
// import Editor from '@/components/elements/Editor';
import { Button } from '@/components/elements/button';
import { Editor } from '@/components/elements/editor';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
interface Values {
scriptContainer: string;
@ -60,14 +63,17 @@ export default function EggInstallContainer() {
<SpinnerOverlay visible={isSubmitting} />
<Form>
{/*<Editor*/}
{/* overrides={tw`h-96 mb-4`}*/}
{/* initialContent={egg.scriptInstall || ''}*/}
{/* mode={shell}*/}
{/* fetchContent={value => {*/}
{/* fetchFileContent = value;*/}
{/* }}*/}
{/*/>*/}
<Editor
className="mb-4 h-96 overflow-scroll"
initialContent={egg.scriptInstall || ''}
fetchContent={value => {
fetchFileContent = value;
}}
language={LanguageDescription.of({
name: 'shell',
support: new LanguageSupport(StreamLanguage.define(shell)),
})}
/>
<div css={tw`mx-6 mb-4`}>
<div css={tw`grid grid-cols-3 gap-x-8 gap-y-6`}>
@ -92,12 +98,7 @@ export default function EggInstallContainer() {
</div>
<div css={tw`flex flex-row border-t border-neutral-600`}>
<Button
type={'submit'}
size={'small'}
css={tw`ml-auto mr-6 mt-4`}
disabled={isSubmitting || !isValid}
>
<Button type="submit" css={tw`ml-auto mr-6 mt-4`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>

View file

@ -1,23 +1,26 @@
import { LanguageDescription } from '@codemirror/language';
import { json } from '@codemirror/lang-json';
import { faDocker } from '@fortawesome/free-brands-svg-icons';
import { faEgg, faFireAlt, faMicrochip, faTerminal } from '@fortawesome/free-solid-svg-icons';
import type { FormikHelpers } from 'formik';
import { Form, Formik, useFormikContext } from 'formik';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import tw from 'twin.macro';
import { object } from 'yup';
import { useEggFromRoute } from '@/api/admin/egg';
import updateEgg from '@/api/admin/eggs/updateEgg';
import AdminBox from '@/components/admin/AdminBox';
import EggDeleteButton from '@/components/admin/nests/eggs/EggDeleteButton';
import EggExportButton from '@/components/admin/nests/eggs/EggExportButton';
import Button from '@/components/elements/Button';
// import Editor from '@/components/elements/Editor';
import { Button } from '@/components/elements/button';
import { Editor } from '@/components/elements/editor';
import Field, { TextareaField } from '@/components/elements/Field';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
// import { jsonLanguage } from '@codemirror/lang-json';
import { faDocker } from '@fortawesome/free-brands-svg-icons';
import { faEgg, faFireAlt, faMicrochip, faTerminal } from '@fortawesome/free-solid-svg-icons';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import AdminBox from '@/components/admin/AdminBox';
import { useNavigate } from 'react-router-dom';
import tw from 'twin.macro';
import { object } from 'yup';
import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
export function EggInformationContainer() {
const { isSubmitting } = useFormikContext();
@ -104,8 +107,7 @@ export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(fun
{ className },
ref,
) {
// const { isSubmitting, values } = useFormikContext<Values>();
const { isSubmitting } = useFormikContext<Values>();
const { isSubmitting, values } = useFormikContext<Values>();
let fetchStartupConfiguration: (() => Promise<string>) | null = null;
let fetchFilesConfiguration: (() => Promise<string>) | null = null;
@ -132,26 +134,26 @@ export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(fun
<div css={tw`mb-5`}>
<Label>Startup Configuration</Label>
{/*<Editor*/}
{/* mode={jsonLanguage}*/}
{/* initialContent={values.configStartup}*/}
{/* overrides={tw`h-32 rounded`}*/}
{/* fetchContent={value => {*/}
{/* fetchStartupConfiguration = value;*/}
{/* }}*/}
{/*/>*/}
<Editor
className="h-32 overflow-scroll rounded"
initialContent={values.configStartup}
fetchContent={value => {
fetchStartupConfiguration = value;
}}
language={LanguageDescription.of({ name: 'json', support: json() })}
/>
</div>
<div css={tw`mb-1`}>
<Label>Configuration Files</Label>
{/*<Editor*/}
{/* mode={jsonLanguage}*/}
{/* initialContent={values.configFiles}*/}
{/* overrides={tw`h-48 rounded`}*/}
{/* fetchContent={value => {*/}
{/* fetchFilesConfiguration = value;*/}
{/* }}*/}
{/*/>*/}
<Editor
className="h-48 overflow-scroll rounded"
initialContent={values.configFiles}
fetchContent={value => {
fetchFilesConfiguration = value;
}}
language={LanguageDescription.of({ name: 'json', support: json() })}
/>
</div>
</AdminBox>
);
@ -233,7 +235,7 @@ export default function EggSettingsContainer() {
<div css={tw`flex flex-row`}>
<EggDeleteButton eggId={egg.id} onDeleted={() => navigate('/admin/nests')} />
<EggExportButton css={tw`ml-auto mr-4`} />
<Button type="submit" size="small" disabled={isSubmitting || !isValid}>
<Button type="submit" disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>

View file

@ -13,11 +13,12 @@ import type { EggVariable } from '@/api/admin/egg';
import { useEggFromRoute } from '@/api/admin/egg';
import NewVariableButton from '@/components/admin/nests/eggs/NewVariableButton';
import AdminBox from '@/components/admin/AdminBox';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import Checkbox from '@/components/elements/Checkbox';
import Field, { FieldRow, TextareaField } from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
import Label from '@/components/elements/Label';
export const validationSchema = object().shape({
name: string().required().min(1).max(191),
@ -59,14 +60,23 @@ export function EggVariableForm({ prefix }: { prefix: string }) {
</FieldRow>
<div css={tw`flex flex-row mb-6`}>
<Checkbox id={`${prefix}isUserViewable`} name={`${prefix}isUserViewable`} label={'User Viewable'} />
<div className="ml-auto flex flex-row">
{/* TODO: fix Checkbox component, current one is designed for subuser permissions and not for individual values */}
<Checkbox id={`${prefix}isUserViewable`} name={`${prefix}isUserViewable`} />
<Checkbox
id={`${prefix}isUserEditable`}
name={`${prefix}isUserEditable`}
label={'User Editable'}
css={tw`ml-auto`}
/>
<div css={tw`flex-1`}>
<Label>User Viewable</Label>
</div>
</div>
<div className="ml-auto flex flex-row">
{/* TODO: fix Checkbox component, current one is designed for subuser permissions and not for individual values */}
<Checkbox id={`${prefix}isUserEditable`} name={`${prefix}isUserEditable`} />
<div css={tw`flex-1`}>
<Label>User Editable</Label>
</div>
</div>
</div>
<Field
@ -111,7 +121,7 @@ function EggVariableDeleteButton({ onClick }: { onClick: (success: () => void) =
css={tw`ml-auto text-neutral-500 hover:text-neutral-300`}
onClick={() => setVisible(true)}
>
<TrashIcon css={tw`h-5 w-5`} />
<TrashIcon className="h-5 w-5" />
</button>
</>
);
@ -200,12 +210,7 @@ export default function EggVariablesContainer() {
<div css={tw`flex flex-row`}>
<NewVariableButton />
<Button
type={'submit'}
size={'small'}
css={tw`ml-auto`}
disabled={isSubmitting || !isValid}
>
<Button type="submit" className="ml-auto" disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>

View file

@ -9,8 +9,9 @@ import { useEggFromRoute } from '@/api/admin/egg';
import { EggVariableForm, validationSchema } from '@/components/admin/nests/eggs/EggVariablesContainer';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button';
import { Button } from '@/components/elements/button';
import useFlash from '@/plugins/useFlash';
import { Variant } from '@/components/elements/button/types';
export default function NewVariableButton() {
const { setValues } = useFormikContext();
@ -75,16 +76,16 @@ export default function NewVariableButton() {
<div css={tw`flex flex-wrap justify-end mt-6`}>
<Button
type={'button'}
isSecondary
type="button"
variant={Variant.Secondary}
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
>
Cancel
</Button>
<Button
type="submit"
css={tw`w-full mt-4 sm:w-auto sm:mt-0`}
type={'submit'}
disabled={isSubmitting || !isValid}
>
Create Variable
@ -95,7 +96,8 @@ export default function NewVariableButton() {
)}
</Formik>
<Button type={'button'} color={'green'} onClick={() => setVisible(true)}>
{/* TODO: make button green */}
<Button type="button" onClick={() => setVisible(true)}>
New Variable
</Button>
</>

View file

@ -4,7 +4,6 @@ import { useState } from 'react';
import Checkbox from '@/components/elements/inputs/Checkbox';
import { Dropdown } from '@/components/elements/dropdown';
import { Dialog } from '@/components/elements/dialog';
import { Button } from '@/components/elements/button';
import { User } from '@definitions/admin';
interface Props {
@ -18,14 +17,17 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
return (
<>
<Dialog title={'Delete account'} visible={visible} onDismissed={() => setVisible(false)}>
<Dialog.Icon type={'danger'} />
<Dialog.Confirm
title={'Delete account'}
open={visible}
onClose={() => setVisible(false)}
onConfirmed={() => {
console.log('yeet');
}}
>
This account will be permanently deleted.
<Dialog.Buttons>
<Button.Text onClick={() => setVisible(false)}>Cancel</Button.Text>
<Button.Danger>Delete</Button.Danger>
</Dialog.Buttons>
</Dialog>
</Dialog.Confirm>
<tr>
<td className={'whitespace-nowrap'}>
<div className={'flex justify-end items-center w-8'}>

View file

@ -12,6 +12,7 @@ import TFootPaginated from '@/components/elements/table/TFootPaginated';
import type { User } from '@definitions/admin';
import extractSearchFilters from '@/helpers/extractSearchFilters';
import useDebouncedState from '@/plugins/useDebouncedState';
import { Shape } from '@/components/elements/button/types';
const filters = ['id', 'uuid', 'external_id', 'username', 'email'] as const;
@ -77,13 +78,13 @@ const UsersContainer = () => {
onChange={onSelectAll}
/>
</div>
<Button.Text square>
<Button.Text shape={Shape.IconSquare}>
<SupportIcon className={'w-4 h-4'} />
</Button.Text>
<Button.Text square>
<Button.Text shape={Shape.IconSquare}>
<LockOpenIcon className={'w-4 h-4'} />
</Button.Text>
<Button.Text square>
<Button.Text shape={Shape.IconSquare}>
<TrashIcon className={'w-4 h-4'} />
</Button.Text>
</div>

View file

@ -1,9 +1,13 @@
import { Field, FieldProps } from 'formik';
import type { FieldProps } from 'formik';
import { Field } from 'formik';
import Input from '@/components/elements/Input';
interface Props {
id: string;
name: string;
value: string;
value?: string;
label?: string;
className?: string;
}

View file

@ -1,318 +0,0 @@
import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
import { defaultKeymap, indentWithTab } from '@codemirror/commands';
import { commentKeymap } from '@codemirror/comment';
import { foldGutter, foldKeymap } from '@codemirror/fold';
import { lineNumbers, highlightActiveLineGutter } from '@codemirror/gutter';
import { defaultHighlightStyle } from '@codemirror/highlight';
import { history, historyKeymap } from '@codemirror/history';
import { indentOnInput, LanguageSupport, LRLanguage, indentUnit } from '@codemirror/language';
import { lintKeymap } from '@codemirror/lint';
import { bracketMatching } from '@codemirror/matchbrackets';
import { rectangularSelection } from '@codemirror/rectangular-selection';
import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
import { Compartment, Extension, EditorState } from '@codemirror/state';
import { StreamLanguage, StreamParser } from '@codemirror/stream-parser';
import { keymap, highlightSpecialChars, drawSelection, highlightActiveLine, EditorView } from '@codemirror/view';
import { clike } from '@codemirror/legacy-modes/mode/clike';
import { cpp } from '@codemirror/lang-cpp';
import { css } from '@codemirror/lang-css';
import { Cassandra, MariaSQL, MSSQL, MySQL, PostgreSQL, sql, SQLite, StandardSQL } from '@codemirror/lang-sql';
import { diff } from '@codemirror/legacy-modes/mode/diff';
import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { go } from '@codemirror/legacy-modes/mode/go';
import { html } from '@codemirror/lang-html';
import { http } from '@codemirror/legacy-modes/mode/http';
import { javascript, typescriptLanguage } from '@codemirror/lang-javascript';
import { json } from '@codemirror/lang-json';
import { lua } from '@codemirror/legacy-modes/mode/lua';
import { properties } from '@codemirror/legacy-modes/mode/properties';
import { python } from '@codemirror/legacy-modes/mode/python';
import { ruby } from '@codemirror/legacy-modes/mode/ruby';
import { rust } from '@codemirror/lang-rust';
import { shell } from '@codemirror/legacy-modes/mode/shell';
import { toml } from '@codemirror/legacy-modes/mode/toml';
import { xml } from '@codemirror/lang-xml';
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
import React, { useCallback, useEffect, useState } from 'react';
import tw, { styled, TwStyle } from 'twin.macro';
import { ayuMirage } from '@/components/elements/EditorTheme';
type EditorMode = LanguageSupport | LRLanguage | StreamParser<unknown>;
export interface Mode {
name: string;
mime: string;
mimes?: string[];
mode?: EditorMode;
ext?: string[];
alias?: string[];
file?: RegExp;
}
export const modes: Mode[] = [
{ name: 'C', mime: 'text/x-csrc', mode: clike({}), ext: [ 'c', 'h', 'ino' ] },
{ name: 'C++', mime: 'text/x-c++src', mode: cpp(), ext: [ 'cpp', 'c++', 'cc', 'cxx', 'hpp', 'h++', 'hh', 'hxx' ], alias: [ 'cpp' ] },
{ name: 'C#', mime: 'text/x-csharp', mode: clike({}), ext: [ 'cs' ], alias: [ 'csharp', 'cs' ] },
{ name: 'CSS', mime: 'text/css', mode: css(), ext: [ 'css' ] },
{ name: 'CQL', mime: 'text/x-cassandra', mode: sql({ dialect: Cassandra }), ext: [ 'cql' ] },
{ name: 'Diff', mime: 'text/x-diff', mode: diff, ext: [ 'diff', 'patch' ] },
{ name: 'Dockerfile', mime: 'text/x-dockerfile', mode: dockerFile, file: /^Dockerfile$/ },
{ name: 'Git Markdown', mime: 'text/x-gfm', mode: markdown({ defaultCodeLanguage: markdownLanguage }), file: /^(readme|contributing|history|license).md$/i },
{ name: 'Golang', mime: 'text/x-go', mode: go, ext: [ 'go' ] },
{ name: 'HTML', mime: 'text/html', mode: html(), ext: [ 'html', 'htm', 'handlebars', 'hbs' ], alias: [ 'xhtml' ] },
{ name: 'HTTP', mime: 'message/http', mode: http },
{ name: 'JavaScript', mime: 'text/javascript', mimes: [ 'text/javascript', 'text/ecmascript', 'application/javascript', 'application/x-javascript', 'application/ecmascript' ], mode: javascript(), ext: [ 'js' ], alias: [ 'ecmascript', 'js', 'node' ] },
{ name: 'JSON', mime: 'application/json', mimes: [ 'application/json', 'application/x-json' ], mode: json(), ext: [ 'json', 'json5', 'map' ], alias: [ 'json5' ] },
{ name: 'Lua', mime: 'text/x-lua', mode: lua, ext: [ 'lua' ] },
{ name: 'Markdown', mime: 'text/x-markdown', mode: markdown({ defaultCodeLanguage: markdownLanguage }), ext: [ 'markdown', 'md', 'mkd' ] },
{ name: 'MariaDB', mime: 'text/x-mariadb', mode: sql({ dialect: MariaSQL }) },
{ name: 'MS SQL', mime: 'text/x-mssql', mode: sql({ dialect: MSSQL }) },
{ name: 'MySQL', mime: 'text/x-mysql', mode: sql({ dialect: MySQL }) },
{ name: 'Plain Text', mime: 'text/plain', mode: undefined, ext: [ 'txt', 'text', 'conf', 'def', 'list', 'log' ] },
{ name: 'PostgreSQL', mime: 'text/x-pgsql', mode: sql({ dialect: PostgreSQL }) },
{ name: 'Properties', mime: 'text/x-properties', mode: properties, ext: [ 'properties', 'ini', 'in' ], alias: [ 'ini', 'properties' ] },
{ name: 'Python', mime: 'text/x-python', mode: python, ext: [ 'BUILD', 'bzl', 'py', 'pyw' ], file: /^(BUCK|BUILD)$/ },
{ name: 'Ruby', mime: 'text/x-ruby', mode: ruby, ext: [ 'rb' ], alias: [ 'jruby', 'macruby', 'rake', 'rb', 'rbx' ] },
{ name: 'Rust', mime: 'text/x-rustsrc', mode: rust(), ext: [ 'rs' ] },
{ name: 'Sass', mime: 'text/x-sass', mode: css(), ext: [ 'sass' ] },
{ name: 'SCSS', mime: 'text/x-scss', mode: css(), ext: [ 'scss' ] },
{ name: 'Shell', mime: 'text/x-sh', mimes: [ 'text/x-sh', 'application/x-sh' ], mode: shell, ext: [ 'sh', 'ksh', 'bash' ], alias: [ 'bash', 'sh', 'zsh' ], file: /^PKGBUILD$/ },
{ name: 'SQL', mime: 'text/x-sql', mode: sql({ dialect: StandardSQL }), ext: [ 'sql' ] },
{ name: 'SQLite', mime: 'text/x-sqlite', mode: sql({ dialect: SQLite }) },
{ name: 'TOML', mime: 'text/x-toml', mode: toml, ext: [ 'toml' ] },
{ name: 'TypeScript', mime: 'application/typescript', mode: typescriptLanguage, ext: [ 'ts' ], alias: [ 'ts' ] },
{ name: 'XML', mime: 'application/xml', mimes: [ 'application/xml', 'text/xml' ], mode: xml(), ext: [ 'xml', 'xsl', 'xsd', 'svg' ], alias: [ 'rss', 'wsdl', 'xsd' ] },
{ name: 'YAML', mime: 'text/x-yaml', mimes: [ 'text/x-yaml', 'text/yaml' ], mode: yaml, ext: [ 'yaml', 'yml' ], alias: [ 'yml' ] },
];
export const modeToExtension = (m: EditorMode): Extension => {
if (m instanceof LanguageSupport) {
return m;
}
if (m instanceof LRLanguage) {
return m;
}
return StreamLanguage.define(m);
};
const findModeByFilename = (filename: string): Mode => {
for (let i = 0; i < modes.length; i++) {
const info = modes[i];
if (info.file && info.file.test(filename)) {
return info;
}
}
const dot = filename.lastIndexOf('.');
const ext = dot > -1 && filename.substring(dot + 1, filename.length);
if (ext) {
for (let i = 0; i < modes.length; i++) {
const info = modes[i];
if (info.ext) {
for (let j = 0; j < info.ext.length; j++) {
if (info.ext[j] === ext) {
return info;
}
}
}
}
}
const plainText = modes.find(m => m.mime === 'text/plain');
if (plainText === undefined) {
throw new Error('failed to find \'text/plain\' mode');
}
return plainText;
};
const findLanguageExtensionByMode = (mode: Mode): Extension => {
if (mode.mode === undefined) {
return [];
}
return modeToExtension(mode.mode);
};
const defaultExtensions: Extension = [
ayuMirage,
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
defaultHighlightStyle.fallback,
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...commentKeymap,
...completionKeymap,
...lintKeymap,
indentWithTab,
]),
EditorState.tabSize.of(4),
// This is gonna piss people off, but that isn't my problem.
indentUnit.of('\t'),
];
const EditorContainer = styled.div<{ overrides?: TwStyle }>`
//min-height: 12rem;
${tw`relative`};
& > div {
${props => props.overrides};
&.cm-focused {
outline: none;
}
}
`;
export interface Props {
className?: string;
style?: React.CSSProperties;
overrides?: TwStyle;
initialContent?: string;
extensions?: Extension[];
mode?: EditorMode;
filename?: string;
onModeChanged?: (mode: Mode) => void;
fetchContent?: (callback: () => Promise<string>) => void;
onContentSaved?: () => void;
}
export default ({ className, style, overrides, initialContent, extensions, mode, filename, onModeChanged, fetchContent, onContentSaved }: Props) => {
const [ languageConfig ] = useState<Compartment>(new Compartment());
const [ keybinds ] = useState<Compartment>(new Compartment());
const [ view, setView ] = useState<EditorView>();
const createEditorState = () => {
return EditorState.create({
doc: initialContent,
extensions: [
...defaultExtensions,
...(extensions !== undefined ? extensions : []),
languageConfig.of(mode !== undefined ? modeToExtension(mode) : findLanguageExtensionByMode(findModeByFilename(filename || ''))),
keybinds.of([]),
],
});
};
const ref = useCallback((node) => {
if (!node) {
return;
}
const view = new EditorView({
state: createEditorState(),
parent: node,
});
setView(view);
}, []);
// This useEffect is required to send the proper mode back to the parent element
// due to the initial language being set with EditorState#create, rather than in
// an useEffect like this one, or one watching `filename`.
useEffect(() => {
if (onModeChanged === undefined) {
return;
}
onModeChanged(findModeByFilename(filename || ''));
}, []);
useEffect(() => {
if (view === undefined) {
return;
}
if (mode === undefined) {
return;
}
view.dispatch({
effects: languageConfig.reconfigure(modeToExtension(mode)),
});
}, [ mode ]);
useEffect(() => {
if (view === undefined) {
return;
}
if (filename === undefined) {
return;
}
const mode = findModeByFilename(filename || '');
view.dispatch({
effects: languageConfig.reconfigure(findLanguageExtensionByMode(mode)),
});
if (onModeChanged !== undefined) {
onModeChanged(mode);
}
}, [ filename ]);
useEffect(() => {
if (view === undefined) {
return;
}
// We could dispatch a view update to replace the content, but this would keep the edit history,
// and previously would duplicate the content of the editor.
view.setState(createEditorState());
}, [ initialContent ]);
useEffect(() => {
if (fetchContent === undefined) {
return;
}
if (!view) {
fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
return;
}
if (onContentSaved !== undefined) {
view.dispatch({
effects: keybinds.reconfigure(keymap.of([
{
key: 'Mod-s',
run: () => {
onContentSaved();
return true;
},
},
])),
});
}
fetchContent(() => Promise.resolve(view.state.doc.toString()));
}, [ view, fetchContent, onContentSaved ]);
return (
<EditorContainer className={className} style={style} overrides={overrides} ref={ref}/>
);
};

View file

@ -1,6 +1,8 @@
import { forwardRef } from 'react';
import classNames from 'classnames';
import { ButtonProps, Options } from '@/components/elements/button/types';
import type { ButtonProps } from '@/components/elements/button/types';
import { Options } from '@/components/elements/button/types';
import styles from './style.module.css';
const Button = forwardRef<HTMLButtonElement, ButtonProps>(

View file

@ -1,15 +1,25 @@
import { forwardRef } from 'react';
import * as React from 'react';
import classNames from 'classnames';
import type { ComponentProps } from 'react';
import { forwardRef } from 'react';
import styles from './styles.module.css';
type Props = Omit<React.ComponentProps<'input'>, 'type'>;
type Props = Omit<ComponentProps<'input'>, 'type'> & {
indeterminate?: boolean;
};
export default forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => (
export default forwardRef<HTMLInputElement, Props>(({ className, indeterminate, ...props }, ref) => (
<input
ref={ref}
type={'checkbox'}
className={classNames('form-input', styles.checkbox_input, className)}
className={classNames(
'form-checkbox',
{
[styles.checkbox]: true,
[styles.indeterminate]: indeterminate,
},
className,
)}
{...props}
/>
));

View file

@ -48,9 +48,9 @@ import Sidebar from '@/components/admin/Sidebar';
import UsersContainer from '@/components/admin/users/UsersContainer';
function AdminRouter() {
// const email = useStoreState((state: State<ApplicationStore>) => state.user.data!.email);
// const roleName = useStoreState((state: State<ApplicationStore>) => state.user.data!.roleName);
// const avatarURL = useStoreState((state: State<ApplicationStore>) => state.user.data!.avatarURL);
const email = useStoreState((state: ApplicationStore) => state.user.data!.email);
const roleName = useStoreState((state: ApplicationStore) => state.user.data!.roleName);
const avatarURL = useStoreState((state: ApplicationStore) => state.user.data!.avatarURL);
const applicationName = useStoreState((state: ApplicationStore) => state.settings.data!.name);
// const [collapsed, setCollapsed] = useUserPersistedState('admin_sidebar_collapsed', false);
@ -71,7 +71,7 @@ function AdminRouter() {
</div>
<Sidebar.Wrapper>
<Sidebar.Section>Administration</Sidebar.Section>
<NavLink to="/admin">
<NavLink to="/admin" end>
<OfficeBuildingIcon />
<span>Overview</span>
</NavLink>
@ -118,27 +118,27 @@ function AdminRouter() {
<ReplyIcon />
<span>Return</span>
</NavLink>
{/*<Sidebar.User>*/}
{/* {avatarURL && (*/}
{/* <img*/}
{/* src={`${avatarURL}?s=64`}*/}
{/* alt="Profile Picture"*/}
{/* css={tw`h-10 w-10 rounded-full select-none`}*/}
{/* />*/}
{/* )}*/}
{/* <div css={tw`flex flex-col ml-3`}>*/}
{/* <span*/}
{/* css={tw`font-sans font-normal text-sm text-neutral-50 whitespace-nowrap leading-tight select-none`}*/}
{/* >*/}
{/* {email}*/}
{/* </span>*/}
{/* <span*/}
{/* css={tw`font-header font-normal text-xs text-neutral-300 whitespace-nowrap leading-tight select-none`}*/}
{/* >*/}
{/* {roleName}*/}
{/* </span>*/}
{/* </div>*/}
{/*</Sidebar.User>*/}
<Sidebar.User>
{avatarURL && (
<img
src={`${avatarURL}?s=64`}
alt="Profile Picture"
css={tw`h-10 w-10 rounded-full select-none`}
/>
)}
<div css={tw`flex flex-col ml-3`}>
<span
css={tw`font-sans font-normal text-sm text-neutral-50 whitespace-nowrap leading-tight select-none`}
>
{email}
</span>
<span
css={tw`font-header font-normal text-xs text-neutral-300 whitespace-nowrap leading-tight select-none`}
>
{roleName}
</span>
</div>
</Sidebar.User>
</Sidebar>
<div css={tw`flex-1 overflow-x-hidden px-6 pt-6 lg:px-10 lg:pt-8 xl:px-16 xl:pt-12`}>

View file

@ -64,7 +64,7 @@ function ServerRouter() {
error ? (
<ServerError message={error} />
) : (
<Spinner size={'large'} centered />
<Spinner size="large" centered />
)
) : (
<>
@ -75,21 +75,24 @@ function ServerRouter() {
.map(route =>
route.permission ? (
<Can key={route.path} action={route.permission} matchAny>
<NavLink to={`/server/${id}/${route.path ?? ''}`} end>
<NavLink to={`/server/${id}/${route.path ?? ''}`.replace(/\/$/, '')} end>
{route.name}
</NavLink>
</Can>
) : (
<NavLink key={route.path} to={`/server/${id}/${route.path ?? ''}`} end>
<NavLink
key={route.path}
to={`/server/${id}/${route.path ?? ''}`.replace(/\/$/, '')}
end
>
{route.name}
</NavLink>
),
)}
{rootAdmin && (
// eslint-disable-next-line react/jsx-no-target-blank
<a href={`/admin/servers/view/${serverId}`} target="_blank">
<NavLink to={`/admin/servers/${serverId}`}>
<FontAwesomeIcon icon={faExternalLinkAlt} />
</a>
</NavLink>
)}
</div>
</SubNavigation>

View file

@ -8,6 +8,8 @@ export interface UserData {
language: string;
rootAdmin: boolean;
useTotp: boolean;
avatarURL: string;
roleName: string;
createdAt: Date;
updatedAt: Date;
}