From b1258308596d1741d57d4ab4286b5e2f648e54c4 Mon Sep 17 00:00:00 2001 From: Matthew Penner Date: Sat, 18 Sep 2021 11:45:32 -0600 Subject: [PATCH] ui(admin): add startup and file configuration editing for eggs --- package.json | 2 + resources/scripts/api/admin/eggs/updateEgg.ts | 4 +- .../admin/nests/ImportEggButton.tsx | 2 +- .../admin/nests/eggs/EggInstallContainer.tsx | 2 +- .../admin/nests/eggs/EggSettingsContainer.tsx | 119 ++++++++++++------ .../server/files/FileEditContainer.tsx | 3 +- yarn.lock | 20 +++ 7 files changed, 112 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index c65eded1b..b583f1d26 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,8 @@ "@codemirror/theme-one-dark": "^0.19.0", "@codemirror/view": "^0.19.4", "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-brands-svg-icons": "^5.15.4", + "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.15", "@hot-loader/react-dom": "^16.14.0", diff --git a/resources/scripts/api/admin/eggs/updateEgg.ts b/resources/scripts/api/admin/eggs/updateEgg.ts index e921a611a..2500ba6b2 100644 --- a/resources/scripts/api/admin/eggs/updateEgg.ts +++ b/resources/scripts/api/admin/eggs/updateEgg.ts @@ -1,7 +1,9 @@ import http from '@/api/http'; import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg'; -export default (id: number, egg: Partial): Promise => { +type Egg2 = Omit, 'configFiles'>, 'configStartup'> & { configFiles?: string, configStartup?: string }; + +export default (id: number, egg: Partial): Promise => { return new Promise((resolve, reject) => { http.patch( `/api/application/eggs/${id}`, diff --git a/resources/scripts/components/admin/nests/ImportEggButton.tsx b/resources/scripts/components/admin/nests/ImportEggButton.tsx index 4cd0bab60..ca9bad96f 100644 --- a/resources/scripts/components/admin/nests/ImportEggButton.tsx +++ b/resources/scripts/components/admin/nests/ImportEggButton.tsx @@ -18,7 +18,7 @@ export default ({ className }: { className?: string }) => { const match = useRouteMatch<{ nestId: string }>(); const { mutate } = getEggs(Number(match.params.nestId)); - let fetchFileContent: null | (() => Promise) = null; + let fetchFileContent: (() => Promise) | null = null; const submit = async () => { clearFlashes('egg:import'); diff --git a/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx index ef81c0ae7..878f682a7 100644 --- a/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx @@ -21,7 +21,7 @@ interface Values { export default function EggInstallContainer ({ egg }: { egg: Egg }) { const { clearFlashes, clearAndAddHttpError } = useFlash(); - let fetchFileContent: null | (() => Promise) = null; + let fetchFileContent: (() => Promise) | null = null; const submit = async (values: Values, { setSubmitting }: FormikHelpers) => { if (fetchFileContent === null) { diff --git a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx index 962debcd4..38287f04e 100644 --- a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx @@ -8,8 +8,9 @@ import Label from '@/components/elements/Label'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import useFlash from '@/plugins/useFlash'; import { jsonLanguage } from '@codemirror/lang-json'; -import { faEgg, faTerminal } from '@fortawesome/free-solid-svg-icons'; -import React from 'react'; +import { faDocker } from '@fortawesome/free-brands-svg-icons'; +import { faEgg, faFireAlt, faMicrochip, faTerminal } from '@fortawesome/free-solid-svg-icons'; +import React, { forwardRef, useImperativeHandle, useRef } from 'react'; import AdminBox from '@/components/admin/AdminBox'; import { Egg } from '@/api/admin/eggs/getEgg'; import { useHistory } from 'react-router-dom'; @@ -93,7 +94,7 @@ function EggImageContainer () { const { isSubmitting } = useFormikContext(); return ( - + + - - -
- - -
- -
- - -
- - ); +interface EggProcessContainerProps { + className?: string; + egg: Egg; } +interface EggProcessContainerRef { + getStartupConfiguration: () => Promise; + getFilesConfiguration: () => Promise; +} + +const EggProcessContainer = forwardRef( + function EggProcessContainer ({ className, egg }, ref) { + const { isSubmitting } = useFormikContext(); + + let fetchStartupConfiguration: (() => Promise) | null = null; + let fetchFilesConfiguration: (() => Promise) | null = null; + + useImperativeHandle(ref, () => ({ + getStartupConfiguration: async () => { + if (fetchStartupConfiguration === null) { + return new Promise(resolve => resolve(null)); + } + return await fetchStartupConfiguration(); + }, + + getFilesConfiguration: async () => { + if (fetchFilesConfiguration === null) { + return new Promise(resolve => resolve(null)); + } + return await fetchFilesConfiguration(); + }, + })); + + return ( + + + +
+ + { + fetchStartupConfiguration = value; + }} + /> +
+ +
+ + { + fetchFilesConfiguration = value; + }} + /> +
+ + ); + } +); + interface Values { name: string; description: string; startup: string; dockerImages: string; stopCommand: string; + configStartup: string; + configFiles: string; } export default function EggSettingsContainer ({ egg }: { egg: Egg }) { @@ -165,10 +205,13 @@ export default function EggSettingsContainer ({ egg }: { egg: Egg }) { const { clearFlashes, clearAndAddHttpError } = useFlash(); - const submit = (values: Values, { setSubmitting }: FormikHelpers) => { + const ref = useRef(); + + const submit = async (values: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('egg'); - // TODO: Send data from code blocks. + values.configStartup = await ref.current?.getStartupConfiguration() || ''; + values.configFiles = await ref.current?.getFilesConfiguration() || ''; updateEgg(egg.id, { ...values, dockerImages: values.dockerImages.split('\n') }) .catch(error => { @@ -187,6 +230,8 @@ export default function EggSettingsContainer ({ egg }: { egg: Egg }) { startup: egg.startup, dockerImages: egg.dockerImages.join('\n'), stopCommand: egg.configStop || '', + configStartup: '', + configFiles: '', }} validationSchema={object().shape({ })} @@ -202,10 +247,14 @@ export default function EggSettingsContainer ({ egg }: { egg: Egg }) {
- +
- +
diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx index d300ca1d4..db9bcb0da 100644 --- a/resources/scripts/components/server/files/FileEditContainer.tsx +++ b/resources/scripts/components/server/files/FileEditContainer.tsx @@ -36,8 +36,7 @@ export default () => { const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory); const { addError, clearFlashes } = useFlash(); - // eslint-disable-next-line prefer-const - let fetchFileContent: null | (() => Promise) = null; + let fetchFileContent: (() => Promise) | null = null; useEffect(() => { if (action === 'new') return; diff --git a/yarn.lock b/yarn.lock index 2e8d52313..4293c74a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2178,6 +2178,24 @@ __metadata: languageName: node linkType: hard +"@fortawesome/free-brands-svg-icons@npm:^5.15.4": + version: 5.15.4 + resolution: "@fortawesome/free-brands-svg-icons@npm:5.15.4" + dependencies: + "@fortawesome/fontawesome-common-types": ^0.2.36 + checksum: 06e38132fbdf04d8677cf6e47e73cd566f68256f542d68d354e26f5ca7536c714b56f5f3dc6c670065b888ee08bc913bb4f213ab08225faf955d893a6a86ed02 + languageName: node + linkType: hard + +"@fortawesome/free-regular-svg-icons@npm:^5.15.4": + version: 5.15.4 + resolution: "@fortawesome/free-regular-svg-icons@npm:5.15.4" + dependencies: + "@fortawesome/fontawesome-common-types": ^0.2.36 + checksum: 2e6039e3bb2125940ed2cb5738b6562b082755c1e45b73571ee92d976773ab81118c9efb9a7b57453b664a025613e81e1dafd2235aafeaadd8f0d75f8e1fe25e + languageName: node + linkType: hard + "@fortawesome/free-solid-svg-icons@npm:^5.15.4": version: 5.15.4 resolution: "@fortawesome/free-solid-svg-icons@npm:5.15.4" @@ -9923,6 +9941,8 @@ fsevents@^1.2.7: "@codemirror/theme-one-dark": ^0.19.0 "@codemirror/view": ^0.19.4 "@fortawesome/fontawesome-svg-core": ^1.2.36 + "@fortawesome/free-brands-svg-icons": ^5.15.4 + "@fortawesome/free-regular-svg-icons": ^5.15.4 "@fortawesome/free-solid-svg-icons": ^5.15.4 "@fortawesome/react-fontawesome": ^0.1.15 "@hot-loader/react-dom": ^16.14.0