-
-
Notifications
You must be signed in to change notification settings - Fork 685
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web): add func deploy confirm & code diff info (#550)
- Loading branch information
Showing
7 changed files
with
160 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { DiffEditor as MonacoDiffEditor } from "@monaco-editor/react"; | ||
|
|
||
| export default function CommonDiffEditor(props: { original: string; modified: string }) { | ||
| const { original, modified } = props; | ||
|
|
||
| return ( | ||
| <div className=""> | ||
| <MonacoDiffEditor | ||
| options={{ | ||
| readOnly: true, | ||
| automaticLayout: true, | ||
| minimap: { | ||
| enabled: false, | ||
| }, | ||
| fontSize: 14, | ||
| // fontFamily: "monospace", | ||
| scrollBeyondLastLine: false, | ||
| }} | ||
| height="70vh" | ||
| onMount={(editor, monaco) => { | ||
| monaco.editor.setTheme("lafEditorTheme"); | ||
| }} | ||
| original={original} | ||
| modified={modified} | ||
| language={"typescript"} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import React from "react"; | ||
| import { | ||
| Button, | ||
| Modal, | ||
| ModalBody, | ||
| ModalCloseButton, | ||
| ModalContent, | ||
| ModalFooter, | ||
| ModalHeader, | ||
| ModalOverlay, | ||
| useDisclosure, | ||
| } from "@chakra-ui/react"; | ||
| import { t } from "i18next"; | ||
|
|
||
| import CommonDiffEditor from "@/components/Editor/CommonDiffEditor"; | ||
|
|
||
| import { useUpdateFunctionMutation } from "../../service"; | ||
| import useFunctionStore from "../../store"; | ||
|
|
||
| import useFunctionCache from "@/hooks/useFuncitonCache"; | ||
| import useHotKey from "@/hooks/useHotKey"; | ||
| import useGlobalStore from "@/pages/globalStore"; | ||
|
|
||
| export default function DeployButton() { | ||
| const { isOpen, onOpen, onClose } = useDisclosure(); | ||
| const store = useFunctionStore((state) => state); | ||
| const functionCache = useFunctionCache(); | ||
|
|
||
| const { showSuccess } = useGlobalStore((state) => state); | ||
|
|
||
| const updateFunctionMutation = useUpdateFunctionMutation(); | ||
|
|
||
| useHotKey("p", async () => { | ||
| onOpen(); | ||
| }); | ||
|
|
||
| const deploy = async () => { | ||
| const res = await updateFunctionMutation.mutateAsync({ | ||
| description: store.currentFunction?.desc, | ||
| code: functionCache.getCache(store.currentFunction!.id), | ||
| methods: store.currentFunction?.methods, | ||
| websocket: store.currentFunction?.websocket, | ||
| name: store.currentFunction?.name, | ||
| }); | ||
| if (!res.error) { | ||
| store.setCurrentFunction(res.data); | ||
| // delete cache after deploy | ||
| functionCache.removeCache(store.currentFunction!.id); | ||
| onClose(); | ||
| showSuccess(t("Message.DeploySuccess")); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| size="sm" | ||
| borderRadius={4} | ||
| disabled={store.getFunctionUrl() === ""} | ||
| colorScheme="blue" | ||
| padding="0 12px" | ||
| onClick={() => { | ||
| onOpen(); | ||
| }} | ||
| > | ||
| {t("FunctionPanel.Deploy")} (⌘ + P) | ||
| </Button> | ||
|
|
||
| <Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered> | ||
| <ModalOverlay /> | ||
| <ModalContent maxW={"80%"}> | ||
| <ModalHeader>Code Diff</ModalHeader> | ||
| <ModalCloseButton /> | ||
| <ModalBody borderBottom={"1px"} borderBottomColor="gray.200"> | ||
| <CommonDiffEditor | ||
| original={store.currentFunction.source?.code} | ||
| modified={functionCache.getCache(store.currentFunction.id)} | ||
| /> | ||
| </ModalBody> | ||
|
|
||
| <ModalFooter> | ||
| <Button mr={3} onClick={onClose}> | ||
| {t("Cancel")} | ||
| </Button> | ||
| <Button | ||
| colorScheme={"blue"} | ||
| onClick={() => { | ||
| deploy(); | ||
| }} | ||
| > | ||
| {t("Common.Dialog.ConfirmDeploy")} | ||
| </Button> | ||
| </ModalFooter> | ||
| </ModalContent> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters