Upgrade packages. Fixup mui styling change to Dialog button. Add fixt…

…ures for Dialog, About and fix ControlButton. (#682)

Signed-off-by: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>

package.json

@@ -33,15 +33,15 @@
     "@bldrs-ai/ifclib": "^5.3.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@iconscout/react-unicons": "^2.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@iconscout/react-unicons": "^1.1.6",
     "@mui/icons-material": "^5.11.9",
     "@mui/lab": "^5.0.0-alpha.95",
     "@mui/material": "^5.9.2",
     "@mui/styled-engine": "^5.8.7",
-    "@mui/styles": "^5.9.2",
+    "@mui/styles": "^5.11.13",
     "@octokit/rest": "^19.0.3",
     "@sentry/react": "^7.31.1",
     "@sentry/tracing": "^7.31.1",

src/Components/About/AboutControl.jsx

@@ -65,7 +65,7 @@ export default function AboutControl() {
  * @param {Function} setIsDialogDisplayed
  * @return {React.ReactElement} React component
  */
-function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
+export function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
   return (
     <Dialog
       icon={

src/Components/About/AboutDialog.fixture.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {HelmetProvider} from 'react-helmet-async'
+import {ThemeProvider} from '@mui/material/styles'
+import useShareTheme from '../../theme/Theme'
+import {AboutDialog} from './AboutControl'
+
+
+/** @return {React.Component} */
+export default function Example() {
+  return (
+    <HelmetProvider>
+      <ThemeProvider theme={useShareTheme()}>
+        <AboutDialog
+          isDialogDisplayed={true}
+          // eslint-disable-next-line no-empty-function
+          setIsDialogDisplayed={() => {}}
+        />
+      </ThemeProvider>
+    </HelmetProvider>
+  )
+}

src/Components/Dialog.fixture.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Dialog from './Dialog'
+import AttentionIcon from '../assets/icons/Attention.svg'
+
+
+export default (
+  <Dialog
+    icon={<AttentionIcon/>}
+    headerText={'Here\'s the thing!'}
+    isDialogDisplayed={true}
+    // eslint-disable-next-line no-empty-function
+    setIsDialogDisplayed={() => {}}
+    content={'What you should know about doing the thing'}
+    actionTitle={'Do do the thing?'}
+    actionCb={() => {
+      // eslint-disable-next-line no-alert
+      alert('You did the thing')
+    }}
+  />
+)

src/Components/Dialog.jsx

@@ -14,10 +14,10 @@ import {assertDefined} from '../utils/assert'
  * @property {string} headerText Short message describing the operation
  * @property {boolean} isDialogDisplayed React var
  * @property {Function} setIsDialogDisplayed React setter
+ * @property {React.ReactElement} content Content of the dialog
  * @property {string} actionTitle Title for the action button
  * @property {Function} actionCb Callback for action button
- * @property {React.ReactElement} content Content of the dialog
- * @property {React.ReactElement} actionIcon Optional icon for the action button
+ * @property {React.ReactElement} [actionIcon] Optional icon for the action button
  * @return {React.Component}
  */
 export default function Dialog({

src/Components/buttons/ControlButton.fixture.jsx

@@ -1,36 +1,32 @@
 import React, {useState} from 'react'
 import {ControlButton} from '../../Components/Buttons'
-import Announcement from '@mui/icons-material/Announcement'
-import Dialog from '../../Components/Dialog'
+import AnnouncementIcon from '@mui/icons-material/Announcement'
 
 
 /**
- * @property {string} title Title of the button
+ * Demo controlled component with open/close.
+ *
  * @return {React.Component}
  */
-export default function ControlButtonFixture({title}) {
-  const [isDialogDisplayed, setIsDialogDisplayed] = useState(true)
-  const dialog = (
-    <Dialog
-      icon={<Announcement/>}
-      headerText={'Example Dialog'}
-      isDialogDisplayed={isDialogDisplayed}
-      setIsDialogDisplayed={setIsDialogDisplayed}
-      content={'Example content.'}
-      actionTitle={'Action title.'}
-      actionCb={() => console.log('action callback')}
-      actionIcon={<Announcement/>}
-    />
-  )
-
-
+export default function Control() {
+  const [isDisplayed, setIsDisplayed] = useState(false)
   return (
     <ControlButton
-      title={title}
-      isDialogDisplayed={isDialogDisplayed}
-      setIsDialogDisplayed={setIsDialogDisplayed}
-      icon={<Announcement/>}
-      dialog={dialog}
+      title={'title'}
+      isDialogDisplayed={isDisplayed}
+      setIsDialogDisplayed={setIsDisplayed}
+      icon={<AnnouncementIcon/>}
+      dialog={
+        <div style={{border: 'solid 1px black'}}>
+          {isDisplayed ?
+           <div>
+             <h1>Controlled component</h1>
+             <button onClick={() => setIsDisplayed(false)}>Close</button>
+           </div> :
+           null}
+        </div>
+      }
       placement={'left'}
-    />)
+    />
+  )
 }

src/ShareMock.jsx

@@ -1,9 +1,9 @@
 import React, {useEffect} from 'react'
+import {HelmetProvider} from 'react-helmet-async'
 import {ThemeProvider} from '@mui/material/styles'
 import useStore from './store/useStore'
 import useShareTheme from './theme/Theme'
 import BaseRoutesMock from './BaseRoutesMock.test'
-import {HelmetProvider} from 'react-helmet-async'
 
 
 /**