ui(admin): update button components, fix Editor for eggs
This commit is contained in:
Matthew Penner
parent
4e56f6dbea
commit
089860b721
35 changed files with 363 additions and 623 deletions
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue