issue-138 add known issues tooltip and other helper text

resolves #138

web/src/components/IdeToolbar/IdeToolbar.js

@@ -1,22 +1,35 @@
 import { useState } from 'react'
 import Popover from '@material-ui/core/Popover'
+import OutBound from 'src/components/OutBound'
 import { Link, routes, navigate } from '@redwoodjs/router'
 
 import Button from 'src/components/Button'
 import ImageUploader from 'src/components/ImageUploader'
+import Svg from '../Svg/Svg'
 
 const IdeToolbar = ({ canEdit, isChanges, onSave, onExport, userNamePart }) => {
   const [anchorEl, setAnchorEl] = useState(null)
+  const [whichPopup, setWhichPopup] = useState(null)
 
-  const handleClick = (event) => {
+  const handleClick = ({ event, whichPopup }) => {
     setAnchorEl(event.currentTarget)
+    setWhichPopup(whichPopup)
   }
 
   const handleClose = () => {
     setAnchorEl(null)
+    setWhichPopup(null)
+  }
+
+  const anchorOrigin = {
+    vertical: 'bottom',
+    horizontal: 'center',
+  }
+  const transformOrigin = {
+    vertical: 'top',
+    horizontal: 'center',
   }
 
-  const open = Boolean(anchorEl)
   const id = open ? 'simple-popover' : undefined
 
   return (
@@ -71,23 +84,17 @@ const IdeToolbar = ({ canEdit, isChanges, onSave, onExport, userNamePart }) => {
           className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
           shouldAnimateHover
           aria-describedby={id}
-          onClick={handleClick}
+          onClick={(event) => handleClick({ event, whichPopup: 'export' })}
         >
           Export
         </Button>
         <Popover
           id={id}
-          open={open}
+          open={whichPopup === 'export'}
           anchorEl={anchorEl}
           onClose={handleClose}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'center',
-          }}
-          transformOrigin={{
-            vertical: 'top',
-            horizontal: 'center',
-          }}
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
           className="material-ui-overrides transform translate-y-4"
         >
           <ul className="text-sm py-2 text-gray-500">
@@ -104,6 +111,106 @@ const IdeToolbar = ({ canEdit, isChanges, onSave, onExport, userNamePart }) => {
           </ul>
         </Popover>
       </div>
+      <div className="ml-auto flex items-center">
+        <div>
+          <button
+            onClick={(event) => handleClick({ event, whichPopup: 'tips' })}
+            className="text-indigo-300 flex items-center pr-6"
+          >
+            Tips <Svg name="lightbulb" className="pl-2 w-8" />
+          </button>
+          <Popover
+            id={id}
+            open={whichPopup === 'tips'}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            className="material-ui-overrides transform translate-y-4"
+          >
+            <div className="text-sm p-2 text-gray-500">
+              Press F5 to regenerate model
+            </div>
+          </Popover>
+        </div>
+        <div>
+          <button
+            onClick={(event) => handleClick({ event, whichPopup: 'feedback' })}
+            className="text-indigo-300 flex items-center pr-6"
+          >
+            Feedback <Svg name="flag" className="pl-2 w-8" />
+          </button>
+          <Popover
+            id={id}
+            open={whichPopup === 'feedback'}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            className="material-ui-overrides transform translate-y-4"
+          >
+            <div className="text-sm p-2 text-gray-500 max-w-md">
+              If there's a feature you really want or you found a bug, either
+              make a{' '}
+              <OutBound
+                className="text-gray-600 underline"
+                to="https://github.com/Irev-Dev/cadhub/issues"
+              >
+                github issue
+              </OutBound>{' '}
+              or swing by the{' '}
+              <OutBound
+                className="text-gray-600 underline"
+                to="https://discord.gg/SD7zFRNjGH"
+              >
+                discord server
+              </OutBound>
+              .
+            </div>
+          </Popover>
+        </div>
+        <div>
+          <button
+            onClick={(event) => handleClick({ event, whichPopup: 'issues' })}
+            className="text-indigo-300 flex items-center pr-6"
+          >
+            Known issues <Svg name="exclamation-circle" className="pl-2 w-8" />
+          </button>
+          <Popover
+            id={id}
+            open={whichPopup === 'issues'}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            className="material-ui-overrides transform translate-y-4"
+          >
+            <div className="text-sm p-2 text-gray-500 max-w-md">
+              <div className="text-base text-gray-700 py-2">
+                Model never generating?
+              </div>
+              Due to the current integration with CascadeStudio and the order in
+              which the code initialise sometimes the 3d model never generates
+              <div className="text-base text-gray-700 py-2">Work around</div>
+              <p>
+                Usually going to the <a href="/">homepage</a>, then refreshing,
+                waiting a good 10 seconds before navigating back to the part
+                your interested in should fix the issue.
+              </p>
+              <p>
+                If this problem is frustrating to you, leave a comment on its{' '}
+                <OutBound
+                  className="text-gray-600 underline"
+                  to="https://github.com/Irev-Dev/cadhub/issues/139"
+                >
+                  github issue
+                </OutBound>{' '}
+                to help prioritize it.
+              </p>
+            </div>
+          </Popover>
+        </div>
+      </div>
     </div>
   )
 }

web/src/components/Svg/Svg.js

@@ -60,6 +60,21 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    'exclamation-circle': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    ),
     favicon: (
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2667 2667">
         <defs>
@@ -159,6 +174,21 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         </g>
       </svg>
     ),
+    flag: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"
+        />
+      </svg>
+    ),
     fork: (
       <svg
         viewBox="-3 -3 32 32" // TODO size this properly, or get a better icon
@@ -172,6 +202,21 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    lightbulb: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+        />
+      </svg>
+    ),
     logout: (
       <svg
         xmlns="http://www.w3.org/2000/svg"