diff --git a/frontend/src/components/resources/stack/info.tsx b/frontend/src/components/resources/stack/info.tsx index 4c497c311..f950d2883 100644 --- a/frontend/src/components/resources/stack/info.tsx +++ b/frontend/src/components/resources/stack/info.tsx @@ -16,7 +16,7 @@ import { useLocalStorage, useWrite } from "@lib/hooks"; import { Button } from "@ui/button"; import { FilePlus, History } from "lucide-react"; import { useToast } from "@ui/use-toast"; -import { ConfirmButton, ShowHideButton } from "@components/util"; +import { ConfirmButton, ShowHideButton, CopyButton } from "@components/util"; import { DEFAULT_STACK_FILE_CONTENTS } from "./config"; import { Types } from "komodo_client"; @@ -205,50 +205,80 @@ export const StackInfo = ({ latest_contents.length > 0 && latest_contents.map((content) => { const showContents = show[content.path] ?? default_show_contents; + const handleToggleShow = () => { + setShow((show) => ({ + ...show, + [content.path]: !(show[content.path] ?? default_show_contents), + })); + }; return ( { + if ( + (e.key === "Enter" || e.key === " ") && + e.target === e.currentTarget + ) { + if (e.key === " ") e.preventDefault(); + handleToggleShow(); + } + }} > - -
File:
- {content.path} + +
+ File: + {content.path} + e.stopPropagation()} data-copy-button> + + +
{canEdit && ( <> - { - if (stack) { - return await mutateAsync({ - stack: stack.name, - file_path: content.path, - contents: edits[content.path]!, - }).then(() => - setEdits({ ...edits, [content.path]: undefined }) - ); - } - }} - disabled={!edits[content.path]} - language="yaml" - loading={isPending} - /> + e.stopPropagation()}> + { + if (stack) { + return await mutateAsync({ + stack: stack.name, + file_path: content.path, + contents: edits[content.path]!, + }).then(() => + setEdits({ + ...edits, + [content.path]: undefined, + }) + ); + } + }} + disabled={!edits[content.path]} + language="yaml" + loading={isPending} + /> + )}