Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add a copy button to the about modal

Browse Source 
This copies the dependencies as JSON.
This commit is contained in:
psychedelicious 2024-01-29 13:32:04 +11:00 committed by Kent Keirsey
parent d048eb5b20
commit 3f5370b284
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/public/locales/en.json
View File

@ -86,6 +86,7 @@
"back": "Back", "back": "Back",
"batch": "Batch Manager", "batch": "Batch Manager",
"cancel": "Cancel", "cancel": "Cancel",
"copy": "Copy",
"copyError": "$t(gallery.copy) Error", "copyError": "$t(gallery.copy) Error",
"close": "Close", "close": "Close",
"on": "On", "on": "On",

35
invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
View File

@ -4,6 +4,7 @@ import {
Grid, Grid,
GridItem, GridItem,
Heading, Heading,
IconButton,
Image, Image,
Modal, Modal,
ModalBody, ModalBody,
@ -12,7 +13,9 @@ import {
ModalFooter, ModalFooter,
ModalHeader, ModalHeader,
ModalOverlay, ModalOverlay,
Spacer,
Text, Text,
Tooltip,
useDisclosure, useDisclosure,
} from '@invoke-ai/ui-library'; } from '@invoke-ai/ui-library';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
@ -20,8 +23,9 @@ import { discordLink, githubLink, websiteLink } from 'features/system/store/cons
import { map } from 'lodash-es'; import { map } from 'lodash-es';
import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg'; import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
import type { ReactElement } from 'react'; import type { ReactElement } from 'react';
import { cloneElement, memo } from 'react'; import { cloneElement, memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiCopyBold } from 'react-icons/pi';
import { useGetAppDepsQuery, useGetAppVersionQuery } from 'services/api/endpoints/appInfo'; import { useGetAppDepsQuery, useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
type AboutModalProps = { type AboutModalProps = {
@ -32,13 +36,18 @@ type AboutModalProps = {
const AboutModal = ({ children }: AboutModalProps) => { const AboutModal = ({ children }: AboutModalProps) => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const { t } = useTranslation(); const { t } = useTranslation();
const { deps } = useGetAppDepsQuery(undefined, { const { depsArray, depsObject } = useGetAppDepsQuery(undefined, {
selectFromResult: ({ data }) => ({ selectFromResult: ({ data }) => ({
deps: data ? map(data, (version, name) => ({ name, version })) : [], depsObject: data,
depsArray: data ? map(data, (version, name) => ({ name, version })) : [],
}), }),
}); });
const { data: appVersion } = useGetAppVersionQuery(); const { data: appVersion } = useGetAppVersionQuery();
const handleCopy = useCallback(() => {
navigator.clipboard.writeText(JSON.stringify(depsObject, null, 2));
}, [depsObject]);
return ( return (
<> <>
{cloneElement(children, { {cloneElement(children, {
@ -46,17 +55,27 @@ const AboutModal = ({ children }: AboutModalProps) => {
})} })}
<Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl"> <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
<ModalOverlay /> <ModalOverlay />
<ModalContent maxH="80vh" h="33rem"> <ModalContent maxH="80vh" h="34rem">
<ModalHeader>{t('accessibility.about')}</ModalHeader> <ModalHeader>{t('accessibility.about')}</ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody display="flex" flexDir="column" gap={4}> <ModalBody display="flex" flexDir="column" gap={4}>
<Grid templateColumns="repeat(2, 1fr)" h="full"> <Grid templateColumns="repeat(2, 1fr)" h="full">
<GridItem backgroundColor="base.750" borderRadius="base" p="4" h="full"> <GridItem backgroundColor="base.750" borderRadius="base" p="4" h="full">
<ScrollableContent> <ScrollableContent>
<Heading position="sticky" top="0" backgroundColor="base.750" size="md" p="1"> <Flex position="sticky" top="0" backgroundColor="base.750" p={1} alignItems="center">
{t('common.localSystem')} <Heading size="md">{t('common.localSystem')}</Heading>
</Heading> <Spacer />
{deps.map(({ name, version }, i) => ( <Tooltip label={t('common.copy')}>
<IconButton
onClick={handleCopy}
isDisabled={!depsObject}
aria-label={t('common.copy')}
icon={<PiCopyBold />}
variant="ghost"
/>
</Tooltip>
</Flex>
{depsArray.map(({ name, version }, i) => (
<Grid key={i} py="2" px="1" w="full" templateColumns="repeat(2, 1fr)"> <Grid key={i} py="2" px="1" w="full" templateColumns="repeat(2, 1fr)">
<Text>{name}</Text> <Text>{name}</Text>
<Text>{version ? version : t('common.notInstalled')}</Text> <Text>{version ? version : t('common.notInstalled')}</Text>