feat(help): add help button in main space (#1223)

SocialGouv · Mar 29, 2021 · efc3268 · efc3268
1 parent cda214b
commit efc3268
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 22 deletions.
diff --git a/src/components/errors/contact-us.tsx b/src/components/errors/contact-us.tsx
@@ -1,12 +1,13 @@
 import useTheme from "@material-ui/core/styles/useTheme";
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { shell } from "electron";
 import styled from "styled-components";
 import { ThemedProps } from "../../theme/default-theme";
+import { CONTACT_LINK } from "../../constants";
+import { openLink } from "../../util/electron/electron-util";
 
 const sendMailToArchifiltre = () => {
-  shell.openExternal("mailto:archifiltre@sg.social.gouv.fr");
+  openLink(CONTACT_LINK);
 };
 
 const ContactLink = styled.a<ThemedProps>`

diff --git a/src/components/header/new-version-checker.tsx b/src/components/header/new-version-checker.tsx
@@ -2,14 +2,14 @@ import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
-import { shell } from "electron";
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { request } from "util/http-util";
 import { useStyles } from "hooks/use-styles";
 import { reportError } from "logging/reporter";
 import version, { versionComparator } from "../../version";
 import ModalHeader from "../modals/modal-header";
+import { openLink } from "util/electron/electron-util";
 
 /**
  * Maps a version number to this format: MAJOR.MINOR.PATCH
@@ -52,9 +52,7 @@ export const NewVersionChecker: FC = () => {
       });
   }, []);
 
-  const download = useCallback(() => shell.openExternal(ARCHIFILTRE_SITE_URL), [
-    shell,
-  ]);
+  const download = useCallback(() => openLink(ARCHIFILTRE_SITE_URL), []);
 
   const onClose = useCallback(() => setIsDisplayed(false), [setIsDisplayed]);
 

diff --git a/src/components/main-space/help-button.tsx b/src/components/main-space/help-button.tsx
@@ -0,0 +1,100 @@
+import React, { FC, useState } from "react";
+import Box from "@material-ui/core/Box";
+import Button from "@material-ui/core/Button";
+import { ListItemIcon, ListItemText, Menu, MenuItem } from "@material-ui/core";
+import {
+  FaBook,
+  FaEnvelope,
+  FaGrinStars,
+  FaLightbulb,
+  FaQuestionCircle,
+} from "react-icons/fa";
+import { useStyles } from "../../hooks/use-styles";
+import {
+  CONTACT_LINK,
+  DOCUMENTATION_LINK,
+  FEEDBACK_LINK,
+  SUGGEST_FEATURE_LINK,
+} from "../../constants";
+import { useTranslation } from "react-i18next";
+import { openLink } from "../../util/electron/electron-util";
+
+const HelpButton: FC = () => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { t } = useTranslation();
+  const classes = useStyles();
+
+  const menuItems = [
+    {
+      label: t("folderDropzone.feedback"),
+      Icon: FaGrinStars,
+      link: FEEDBACK_LINK,
+    },
+    {
+      label: t("folderDropzone.contactUs"),
+      Icon: FaEnvelope,
+      link: CONTACT_LINK,
+    },
+    {
+      label: t("folderDropzone.suggestFeature"),
+      Icon: FaLightbulb,
+      link: SUGGEST_FEATURE_LINK,
+    },
+    {
+      label: t("folderDropzone.documentation"),
+      Icon: FaBook,
+      link: DOCUMENTATION_LINK,
+    },
+  ];
+
+  const handleButtonClick = (event): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closeMenu = (): void => setAnchorEl(null);
+
+  const handleItemClick = (link: string): void => {
+    openLink(link);
+    closeMenu();
+  };
+
+  return (
+    <Box>
+      <Button
+        aria-controls="help-menu"
+        aria-haspopup="true"
+        onClick={handleButtonClick}
+        className={classes.headerButton}
+      >
+        <FaQuestionCircle />
+      </Button>
+      <Menu
+        id="help-menu"
+        getContentAnchorEl={null}
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={closeMenu}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+      >
+        {menuItems.map(({ label, link, Icon }) => (
+          <MenuItem key={label} onClick={() => handleItemClick(link)}>
+            <ListItemIcon>
+              <Icon />
+            </ListItemIcon>
+            <ListItemText>{label}</ListItemText>
+          </MenuItem>
+        ))}
+      </Menu>
+    </Box>
+  );
+};
+
+export default HelpButton;
diff --git a/src/components/main-space/workspace/workspace.tsx b/src/components/main-space/workspace/workspace.tsx
@@ -8,6 +8,7 @@ import DuplicatesSearch from "components/main-space/duplicates-search/duplicates
 import TabsContent from "./tabs/tabs-content";
 
 import Header from "components/header/header-container";
+import HelpButton from "../help-button";
 
 const workspaceState = {
   isFileMoveActive: false,
@@ -55,6 +56,9 @@ const Workspace: FC = () => {
               <Box flexGrow={1} overflow="hidden">
                 <Icicle />
               </Box>
+              <Box position="absolute" bottom={15} right={15}>
+                <HelpButton />
+              </Box>
             </Box>
           ) : (
             <DuplicatesSearch />

diff --git a/src/components/modals/settings-modal/about.tsx b/src/components/modals/settings-modal/about.tsx
@@ -1,19 +1,24 @@
 import { createStyles, Link } from "@material-ui/core";
 import Box from "@material-ui/core/Box";
-import { shell } from "electron";
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  FaBook,
   FaEnvelope,
   FaGlobeAmericas,
   FaGrinStars,
   FaInfo,
-  FaQuestionCircle,
 } from "react-icons/fa";
 import { versionName } from "version";
 import packageJson from "../../../../package.json";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 import { Theme } from "@material-ui/core/styles/createMuiTheme";
+import {
+  CONTACT_LINK,
+  DOCUMENTATION_LINK,
+  FEEDBACK_LINK,
+} from "../../../constants";
+import { openLink } from "util/electron/electron-util";
 
 const useLocalStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -33,17 +38,17 @@ const aboutItems = [
     label: "settingsModal.website",
   },
   {
-    link: "https://github.com/SocialGouv/archifiltre/wiki/Wiki-Archifiltre",
-    Icon: FaQuestionCircle,
+    link: DOCUMENTATION_LINK,
+    Icon: FaBook,
     label: "settingsModal.wiki",
   },
   {
-    link: "https://archifiltre.fabrique.social.gouv.fr/questionnaire/",
+    link: FEEDBACK_LINK,
     Icon: FaGrinStars,
     label: "folderDropzone.feedback",
   },
   {
-    link: "mailto:archifiltre@sg.social.gouv.fr",
+    link: CONTACT_LINK,
     Icon: FaEnvelope,
     label: "folderDropzone.contactUs",
   },
@@ -55,7 +60,7 @@ const About: FC = () => {
 
   const onClick = (event, link) => {
     event.preventDefault();
-    shell.openExternal(link);
+    openLink(link);
   };
 
   return (

diff --git a/src/components/start-screen/start-screen-sidebar.tsx b/src/components/start-screen/start-screen-sidebar.tsx
@@ -6,7 +6,7 @@ import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import Tooltip from "@material-ui/core/Tooltip";
 import EllipsisText from "components/main-space/workspace/enrichment/tags/ellipsis-text";
-import { remote, shell } from "electron";
+import { remote } from "electron";
 import path from "path";
 import { getPreviousSessions } from "persistence/previous-sessions";
 import React, { FC, useCallback, useEffect, useState } from "react";
@@ -20,21 +20,23 @@ import {
   FaGrinStars,
   FaSyncAlt,
 } from "react-icons/fa";
+import {
+  CONTACT_LINK,
+  DOCUMENTATION_LINK,
+  FEEDBACK_LINK,
+} from "../../constants";
+import { openLink } from "util/electron/electron-util";
 
 const onFeedbackClick = () => {
-  shell.openExternal(
-    "https://archifiltre.fabrique.social.gouv.fr/questionnaire/"
-  );
+  openLink(FEEDBACK_LINK);
 };
 
 const onContactClick = () => {
-  shell.openExternal("mailto:archifiltre@sg.social.gouv.fr");
+  openLink(CONTACT_LINK);
 };
 
 const onDocumentationClick = () => {
-  shell.openExternal(
-    "https://github.com/SocialGouv/archifiltre/wiki/Wiki-Archifiltre"
-  );
+  openLink(DOCUMENTATION_LINK);
 };
 
 type StartScreenSidebarProps = {

diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,7 @@
+export const FEEDBACK_LINK =
+  "https://archifiltre.fabrique.social.gouv.fr/questionnaire/";
+export const CONTACT_LINK = "mailto:archifiltre@sg.social.gouv.fr";
+export const DOCUMENTATION_LINK =
+  "https://github.com/SocialGouv/archifiltre/wiki/Wiki-Archifiltre";
+export const SUGGEST_FEATURE_LINK =
+  "https://github.com/SocialGouv/archifiltre/issues";
diff --git a/src/translations/en.json b/src/translations/en.json
@@ -20,6 +20,7 @@
       "contactUs": "Contact us",
       "feedback": "Give us feedback",
       "documentation": "Documentation",
+      "suggestFeature": "Suggest a feature",
       "newDirectory": "New directory",
       "slug": "Visualise and improve your file trees !",
       "cancelLoading": "Cancel loading",

diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -20,6 +20,7 @@
       "contactUs": "Nous contacter",
       "feedback": "Donnez votre avis",
       "documentation": "Documentation",
+      "suggestFeature": "Suggérez une fonctionnalité",
       "newDirectory": "Nouveau répertoire",
       "slug": "Visualisez et améliorez vos arborescences de fichiers !",
       "cancelLoading": "Annuler le chargement",

diff --git a/src/util/electron/electron-util.ts b/src/util/electron/electron-util.ts
@@ -1,6 +1,14 @@
-import { remote } from "electron";
+import { remote, shell } from "electron";
 
 /**
  * Reloads the app. Acts like F5 or CTRL+R
  */
 export const reloadApp = (): void => remote.getCurrentWindow().reload();
+
+/**
+ * Opens a link in the user's browser
+ * @param link
+ */
+export const openLink = (link: string): void => {
+  shell.openExternal(link);
+};