feat(ui): add about modal w/ app deps (#5462)

* resolved conflicts * changed logo and some design changes * feedback changes * resolved conflicts * changed logo and some design changes * feedback changes * lint fixed * added translations * some requested changes done * all feedback changes done and replace links in settingsmenu comp * fixed the gap between deps verisons & chnaged heights * feat(ui): minor about modal styling * feat(ui): tag app endpoints with FetchOnReconnect * fix(ui): remove unused translation string --------- Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Co-authored-by: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
2024-08-30 20:32:17 +00:00 · 2024-01-18 19:00:56 +05:30 · 2024-01-18 19:00:56 +05:30 · 1ab0e86085
commit 1ab0e86085
parent c9ddbb4241
7 changed files with 172 additions and 9 deletions
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@ -1,5 +1,6 @@
 {
    "accessibility": {
+        "about": "About",
        "copyMetadataJson": "Copy metadata JSON",
        "createIssue": "Create Issue",
        "exitViewer": "Exit Viewer",
@ -74,6 +75,8 @@
        }
    },
    "common": {
+        "aboutDesc": "Using Invoke for work? Check out:",
+        "aboutHeading": "Own Your Creative Power",
        "accept": "Accept",
        "advanced": "Advanced",
        "advancedOptions": "Advanced Options",
@ -136,6 +139,7 @@
        "load": "Load",
        "loading": "Loading",
        "loadingInvokeAI": "Loading Invoke AI",
+        "localSystem": "Local System",
        "learnMore": "Learn More",
        "modelManager": "Model Manager",
        "nodeEditor": "Node Editor",
--- a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
@ -0,0 +1,138 @@
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import {
+  Flex,
+  Grid,
+  GridItem,
+  Image,
+  Link,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { InvHeading } from 'common/components/InvHeading/wrapper';
+import {
+  InvModal,
+  InvModalBody,
+  InvModalCloseButton,
+  InvModalContent,
+  InvModalFooter,
+  InvModalHeader,
+  InvModalOverlay,
+} from 'common/components/InvModal/wrapper';
+import { InvText } from 'common/components/InvText/wrapper';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import {
+  discordLink,
+  githubLink,
+  websiteLink,
+} from 'features/system/store/constants';
+import { map } from 'lodash-es';
+import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
+import type { ReactElement } from 'react';
+import { cloneElement, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  useGetAppDepsQuery,
+  useGetAppVersionQuery,
+} from 'services/api/endpoints/appInfo';
+
+type AboutModalProps = {
+  /* The button to open the Settings Modal */
+  children: ReactElement;
+};
+
+const AboutModal = ({ children }: AboutModalProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { t } = useTranslation();
+  const { deps } = useGetAppDepsQuery(undefined, {
+    selectFromResult: ({ data }) => ({
+      deps: data ? map(data, (version, name) => ({ name, version })) : [],
+    }),
+  });
+  const { data: appVersion } = useGetAppVersionQuery();
+
+  return (
+    <>
+      {cloneElement(children, {
+        onClick: onOpen,
+      })}
+      <InvModal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+        <InvModalOverlay />
+        <InvModalContent maxH="80vh" h="33rem">
+          <InvModalHeader>{t('accessibility.about')}</InvModalHeader>
+          <InvModalCloseButton />
+          <InvModalBody display="flex" flexDir="column" gap={4}>
+            <Grid templateColumns="repeat(2, 1fr)" h="full">
+              <GridItem
+                backgroundColor="base.750"
+                borderRadius="base"
+                p="4"
+                h="full"
+              >
+                <ScrollableContent>
+                  <InvHeading
+                    position="sticky"
+                    top="0"
+                    backgroundColor="base.750"
+                    size="md"
+                    p="1"
+                  >
+                    {t('common.localSystem')}
+                  </InvHeading>
+                  {deps.map(({ name, version }, i) => (
+                    <Grid
+                      key={i}
+                      py="2"
+                      px="1"
+                      w="full"
+                      templateColumns="repeat(2, 1fr)"
+                    >
+                      <InvText>{name}</InvText>
+                      <InvText>
+                        {version ? version : t('common.notInstalled')}
+                      </InvText>
+                    </Grid>
+                  ))}
+                </ScrollableContent>
+              </GridItem>
+              <GridItem>
+                <Flex
+                  flexDir="column"
+                  gap={3}
+                  justifyContent="center"
+                  alignItems="center"
+                  h="full"
+                >
+                  <Image src={InvokeLogoYellow} alt="invoke-logo" w="120px" />
+                  {appVersion && <InvText>{`v${appVersion?.version}`}</InvText>}
+                  <Grid templateColumns="repeat(2, 1fr)" gap="3">
+                    <GridItem>
+                      <Link fontSize="sm" href={githubLink} isExternal>
+                        {t('common.githubLabel')}
+                        <ExternalLinkIcon mx="2px" />
+                      </Link>
+                    </GridItem>
+                    <GridItem>
+                      <Link fontSize="sm" href={discordLink} isExternal>
+                        {t('common.discordLabel')}
+                        <ExternalLinkIcon mx="2px" />
+                      </Link>
+                    </GridItem>
+                  </Grid>
+                  <InvHeading fontSize="large">
+                    {t('common.aboutHeading')}
+                  </InvHeading>
+                  <InvText fontSize="sm">{t('common.aboutDesc')}</InvText>
+                  <Link isExternal href={websiteLink} fontSize="sm">
+                    {websiteLink} <ExternalLinkIcon mx="2px" />
+                  </Link>
+                </Flex>
+              </GridItem>
+            </Grid>
+          </InvModalBody>
+          <InvModalFooter />
+        </InvModalContent>
+      </InvModal>
+    </>
+  );
+};
+
+export default memo(AboutModal);
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
@ -8,12 +8,15 @@ import {
  InvMenuGroup,
 } from 'common/components/InvMenu/wrapper';
 import { useGlobalMenuClose } from 'common/hooks/useGlobalMenuClose';
+import AboutModal from 'features/system/components/AboutModal/AboutModal';
 import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { discordLink, githubLink } from 'features/system/store/constants';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
  PiBugBeetleBold,
+  PiInfoBold,
  PiKeyboardBold,
  PiToggleRightFill,
 } from 'react-icons/pi';
@ -29,9 +32,6 @@ const SettingsMenu = () => {
  const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
  const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;

-  const githubLink = 'http://github.com/invoke-ai/InvokeAI';
-  const discordLink = 'https://discord.gg/ZmtBAhwWhy';
-
  return (
    <InvMenu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
      <InvMenuButton
@ -87,6 +87,13 @@ const SettingsMenu = () => {
            </InvMenuItem>
          </SettingsModal>
        </InvMenuGroup>
+        <InvMenuGroup title={t('accessibility.about')}>
+          <AboutModal>
+            <InvMenuItem as="button" icon={<PiInfoBold />}>
+              {t('accessibility.about')}
+            </InvMenuItem>
+          </AboutModal>
+        </InvMenuGroup>
      </InvMenuList>
    </InvMenu>
  );
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@ -207,7 +207,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
        isCentered
      >
        <InvModalOverlay />
-        <InvModalContent maxH="80vh" h="80vh">
+        <InvModalContent maxH="80vh" h="50vh">
          <InvModalHeader bg="none">{t('common.settingsLabel')}</InvModalHeader>
          <InvModalCloseButton />
          <InvModalBody display="flex" flexDir="column" gap={4}>
--- a/invokeai/frontend/web/src/features/system/store/constants.ts
+++ b/invokeai/frontend/web/src/features/system/store/constants.ts
@ -0,0 +1,3 @@
+export const githubLink = 'http://github.com/invoke-ai/InvokeAI';
+export const discordLink = 'https://discord.gg/ZmtBAhwWhy';
+export const websiteLink = 'https://www.invoke.com/';
--- a/invokeai/frontend/web/src/services/api/endpoints/appInfo.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/appInfo.ts
@ -1,5 +1,9 @@
 import type { paths } from 'services/api/schema';
-import type { AppConfig, AppVersion } from 'services/api/types';
+import type {
+  AppConfig,
+  AppDependencyVersions,
+  AppVersion,
+} from 'services/api/types';

 import { api } from '..';

@ -10,16 +14,21 @@ export const appInfoApi = api.injectEndpoints({
        url: `app/version`,
        method: 'GET',
      }),
-      providesTags: ['AppVersion'],
-      keepUnusedDataFor: 86400000, // 1 day
+      providesTags: ['FetchOnReconnect'],
+    }),
+    getAppDeps: build.query<AppDependencyVersions, void>({
+      query: () => ({
+        url: `app/app_deps`,
+        method: 'GET',
+      }),
+      providesTags: ['FetchOnReconnect'],
    }),
    getAppConfig: build.query<AppConfig, void>({
      query: () => ({
        url: `app/config`,
        method: 'GET',
      }),
-      providesTags: ['AppConfig'],
-      keepUnusedDataFor: 86400000, // 1 day
+      providesTags: ['FetchOnReconnect'],
    }),
    getInvocationCacheStatus: build.query<
      paths['/api/v1/app/invocation_cache/status']['get']['responses']['200']['content']['application/json'],
@ -57,6 +66,7 @@ export const appInfoApi = api.injectEndpoints({

 export const {
  useGetAppVersionQuery,
+  useGetAppDepsQuery,
  useGetAppConfigQuery,
  useClearInvocationCacheMutation,
  useDisableInvocationCacheMutation,
--- a/invokeai/frontend/web/src/services/api/types.ts
+++ b/invokeai/frontend/web/src/services/api/types.ts
@ -35,6 +35,7 @@ export type InvocationJSONSchemaExtra = s['UIConfigBase'];
 // App Info
 export type AppVersion = s['AppVersion'];
 export type AppConfig = s['AppConfig'];
+export type AppDependencyVersions = s['AppDependencyVersions'];

 // Images
 export type ImageDTO = s['ImageDTO'];