From bc7737840a835a2e3c882f0252c46090d4594ed4 Mon Sep 17 00:00:00 2001 From: Matthew Penner Date: Thu, 12 Jan 2023 12:08:11 -0700 Subject: [PATCH] ui(editor): fix editor child styling --- .../admin/nests/ImportEggButton.tsx | 2 +- .../components/admin/nests/NestsContainer.tsx | 2 +- .../admin/nests/eggs/EggExportButton.tsx | 2 +- .../admin/nests/eggs/EggInstallContainer.tsx | 3 +- .../components/admin/nests/eggs/EggRouter.tsx | 2 +- .../admin/nests/eggs/EggSettingsContainer.tsx | 29 ++++++++++++++----- .../components/elements/editor/Editor.tsx | 20 ++++++++++++- .../server/files/FileEditContainer.tsx | 2 ++ 8 files changed, 48 insertions(+), 14 deletions(-) diff --git a/resources/scripts/components/admin/nests/ImportEggButton.tsx b/resources/scripts/components/admin/nests/ImportEggButton.tsx index 66aedf496..94bafd6fd 100644 --- a/resources/scripts/components/admin/nests/ImportEggButton.tsx +++ b/resources/scripts/components/admin/nests/ImportEggButton.tsx @@ -48,7 +48,7 @@ export default ({ className }: { className?: string }) => {

Import Egg

{ fetchFileContent = value; diff --git a/resources/scripts/components/admin/nests/NestsContainer.tsx b/resources/scripts/components/admin/nests/NestsContainer.tsx index 2f937da80..3bb3bf79a 100644 --- a/resources/scripts/components/admin/nests/NestsContainer.tsx +++ b/resources/scripts/components/admin/nests/NestsContainer.tsx @@ -33,7 +33,7 @@ const RowCheckbox = ({ id }: { id: number }) => { ) => { + onChange={(e: ChangeEvent) => { if (e.currentTarget.checked) { appendSelectedNest(id); } else { diff --git a/resources/scripts/components/admin/nests/eggs/EggExportButton.tsx b/resources/scripts/components/admin/nests/eggs/EggExportButton.tsx index bcb6c1785..e3605e99c 100644 --- a/resources/scripts/components/admin/nests/eggs/EggExportButton.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggExportButton.tsx @@ -49,7 +49,7 @@ export default ({ className }: { className?: string }) => { diff --git a/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx index a6f97610c..c566d2451 100644 --- a/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx @@ -64,7 +64,8 @@ export default function EggInstallContainer() {
{ fetchFileContent = value; diff --git a/resources/scripts/components/admin/nests/eggs/EggRouter.tsx b/resources/scripts/components/admin/nests/eggs/EggRouter.tsx index 9bf84ac3c..589fc21f9 100644 --- a/resources/scripts/components/admin/nests/eggs/EggRouter.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggRouter.tsx @@ -19,7 +19,7 @@ const EggRouter = () => { const { data: egg, error, isValidating, mutate } = useEggFromRoute(); useEffect(() => { - mutate(); + void mutate(); }, []); useEffect(() => { diff --git a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx index 20532efe6..c9ea07f82 100644 --- a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx @@ -135,7 +135,7 @@ export const EggProcessContainer = forwardRef(fun
{ fetchStartupConfiguration = value; @@ -147,7 +147,7 @@ export const EggProcessContainer = forwardRef(fun
{ fetchFilesConfiguration = value; @@ -185,13 +185,23 @@ export default function EggSettingsContainer() { const submit = async (values: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('egg'); - values.configStartup = (await ref.current?.getStartupConfiguration()) || ''; - values.configFiles = (await ref.current?.getFilesConfiguration()) || ''; + values.configStartup = (await ref.current?.getStartupConfiguration()) ?? ''; + values.configFiles = (await ref.current?.getFilesConfiguration()) ?? ''; + + const dockerImages: Record = {}; + for (const v of values.dockerImages.split('\n')) { + const parts = v.trim().split('|'); + const image = parts[0] ?? ''; + const alias = parts[1] ?? image; + + dockerImages[alias] = image; + } + + console.log(dockerImages); updateEgg(egg.id, { ...values, - // TODO - dockerImages: {}, + dockerImages, }) .catch(error => { console.error(error); @@ -207,8 +217,11 @@ export default function EggSettingsContainer() { name: egg.name, description: egg.description || '', startup: egg.startup, - // TODO - dockerImages: egg.dockerImages.toString(), + dockerImages: Object.keys(egg.dockerImages) + .map(key => { + return `${egg.dockerImages[key]}|${key}`; + }) + .join('\n'), configStop: egg.configStop || '', configStartup: JSON.stringify(egg.configStartup, null, '\t') || '', configFiles: JSON.stringify(egg.configFiles, null, '\t') || '', diff --git a/resources/scripts/components/elements/editor/Editor.tsx b/resources/scripts/components/elements/editor/Editor.tsx index f089d6a84..89c04ae7f 100644 --- a/resources/scripts/components/elements/editor/Editor.tsx +++ b/resources/scripts/components/elements/editor/Editor.tsx @@ -30,6 +30,8 @@ import { } from '@codemirror/view'; import type { CSSProperties } from 'react'; import { useEffect, useRef, useState } from 'react'; +import type { TwStyle } from 'twin.macro'; +import tw, { styled } from 'twin.macro'; import { ayuMirageHighlightStyle, ayuMirageTheme } from './theme'; @@ -78,10 +80,24 @@ const defaultExtensions: Extension = [ indentUnit.of('\t'), ]; +const EditorContainer = styled.div<{ overrides?: TwStyle }>` + //min-height: 12rem; + ${tw`relative`}; + + & > div { + ${props => props.overrides}; + + &.cm-focused { + outline: none; + } + } +`; + export interface EditorProps { // DOM className?: string; style?: CSSProperties; + childClassName?: TwStyle; // CodeMirror Config extensions?: Extension[]; @@ -211,5 +227,7 @@ export function Editor(props: EditorProps) { props.fetchContent(async () => view.state.doc.toJSON().join('\n')); }, [view, props.fetchContent, props.onContentSaved]); - return
; + return ( + + ); } diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx index b4ffc0250..d35c733ff 100644 --- a/resources/scripts/components/server/files/FileEditContainer.tsx +++ b/resources/scripts/components/server/files/FileEditContainer.tsx @@ -130,6 +130,8 @@ export default () => {