about modal, current version

packages/web/src/modals/AboutModal.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import ModalBase from './ModalBase';
+import ModalHeader from './ModalHeader';
+import ModalContent from './ModalContent';
+import ModalFooter from './ModalFooter';
+import { useConfig } from '../utility/metadataLoaders';
+import FormStyledButton from '../widgets/FormStyledButton';
+import moment from 'moment';
+import styled from 'styled-components';
+import getElectron from '../utility/getElectron';
+import useTheme from '../theme/useTheme';
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const TextContainer = styled.div``;
+
+const StyledLine = styled.div`
+  margin: 5px;
+`;
+
+const StyledValue = styled.span`
+  font-weight: bold;
+`;
+
+const StyledLink = styled.a`
+  text-decoration: none;
+  cursor: pointer;
+  color: ${(props) => props.theme.main_background_blue[7]};
+`;
+
+function Line({ label, children }) {
+  return (
+    <StyledLine>
+      {label}: <StyledValue>{children}</StyledValue>
+    </StyledLine>
+  );
+}
+
+function Link({ label, children, href }) {
+  const electron = getElectron();
+  const theme = useTheme();
+  return (
+    <StyledLine>
+      {label}:{' '}
+      {electron ? (
+        <StyledLink theme={theme} onClick={() => electron.shell.openExternal(href)}>
+          {children}
+        </StyledLink>
+      ) : (
+        <StyledLink theme={theme} href={href} target="_blank" rel="noopener noreferrer">
+          {children}
+        </StyledLink>
+      )}
+    </StyledLine>
+  );
+}
+
+export default function AboutModal({ modalState }) {
+  const config = useConfig();
+  const { version, buildTime } = config || {};
+  return (
+    <ModalBase modalState={modalState}>
+      <ModalHeader modalState={modalState}>About DbGate</ModalHeader>
+      <ModalContent>
+        <Container>
+          <img src="/logo192.png" />
+          <TextContainer>
+            <Line label="Version">{version}</Line>
+            <Line label="Build date">{moment(buildTime).format('YYYY-MM-DD')}</Line>
+            <Link label="Web" href="https://dbgate.org">
+              dbgate.org
+            </Link>
+            <Link label="Source codes" href="https://github.com/dbshell/dbgate/">
+              github
+            </Link>
+            <Link label="Docker container" href="https://hub.docker.com/r/dbgate/dbgate">
+              docker hub
+            </Link>
+            <Link label="Online demo" href="https://demo.dbgate.org">
+              demo.dbgate.org
+            </Link>
+            <Link label="Search plugins" href="https://www.npmjs.com/search?q=keywords:dbgateplugin">
+              npmjs.com
+            </Link>
+          </TextContainer>
+        </Container>
+      </ModalContent>
+      <ModalFooter>
+        <FormStyledButton value="Close" onClick={() => modalState.close()} />
+      </ModalFooter>
+    </ModalBase>
+  );
+}

packages/web/src/widgets/Toolbar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import styled from 'styled-components';
-import ToolbarButton from './ToolbarButton';
+import ToolbarButton, { ToolbarButtonExternalImage } from './ToolbarButton';
 import useNewQuery from '../query/useNewQuery';
 import { useConfig } from '../utility/metadataLoaders';
 import { useSetOpenedTabs, useOpenedTabs, useCurrentTheme, useSetCurrentTheme } from '../utility/globalState';
@@ -12,6 +12,8 @@ import ImportExportModal from '../modals/ImportExportModal';
 import useShowModal from '../modals/showModal';
 import useExtensions from '../utility/useExtensions';
 import { getDefaultFileFormat } from '../utility/fileformats';
+import getElectron from '../utility/getElectron';
+import AboutModal from '../modals/AboutModal';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -30,13 +32,19 @@ export default function ToolBar({ toolbarPortalRef }) {
   const currentTheme = useCurrentTheme();
   const setCurrentTheme = useSetCurrentTheme();
   const extensions = useExtensions();
+  const electron = getElectron();
 
   React.useEffect(() => {
     window['dbgate_createNewConnection'] = modalState.open;
     window['dbgate_newQuery'] = newQuery;
     window['dbgate_closeAll'] = () => setOpenedTabs([]);
+    window['dbgate_showAbout'] = showAbout;
   });
 
+  const showAbout = () => {
+    showModal((modalState) => <AboutModal modalState={modalState} />);
+  };
+
   const showImport = () => {
     showModal((modalState) => (
       <ImportExportModal
@@ -93,6 +101,7 @@ export default function ToolBar({ toolbarPortalRef }) {
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
+      {!electron && <ToolbarButtonExternalImage image="/logo192.png" onClick={showAbout} />}
       {toolbar.map((button) => (
         <ToolbarButton key={button.name} onClick={() => openTabFromButton(button)} icon={button.icon}>
           {button.title}

packages/web/src/widgets/ToolbarButton.js

@@ -44,6 +44,11 @@ const ButtonDivInner = styled.div`
   white-space: nowrap;
 `;
 
+const ButtonExternalImage = styled.img`
+  width: 20px;
+  height: 20px;
+`;
+
 export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {
   const theme = useTheme();
   return (
@@ -65,3 +70,18 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
     </ButtonDiv>
   );
 }
+
+export function ToolbarButtonExternalImage({ image, onClick, disabled = undefined }) {
+  const theme = useTheme();
+  return (
+    <ButtonDiv
+      theme={theme}
+      onClick={() => {
+        if (!disabled && onClick) onClick();
+      }}
+      disabled={disabled}
+    >
+      <ButtonExternalImage src={image} />
+    </ButtonDiv>
+  );
+}