From c6d565983cc7dedbd2660cc75b99926c1afe39d1 Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Mon, 21 Oct 2024 10:02:51 -0700
Subject: [PATCH 01/10] 5 buttons on browse tools page for submitting forms,
 possible modal component for observations tab on tools details page

---
 .../nf/src/config/synapseConfigs/tools.ts     | 12 ++-
 .../src/components/index.ts                   |  4 +
 .../src/components/nf/FormModal.tsx           | 50 +++++++++++++
 .../src/components/nf/NFBrowseToolsPage.tsx   | 73 ++++++++++++++++++-
 .../src/types/portal-config.ts                | 13 ++++
 5 files changed, 143 insertions(+), 9 deletions(-)
 create mode 100644 apps/synapse-portal-framework/src/components/nf/FormModal.tsx

diff --git a/apps/portals/nf/src/config/synapseConfigs/tools.ts b/apps/portals/nf/src/config/synapseConfigs/tools.ts
index 4191168565..56ec40a85c 100644
--- a/apps/portals/nf/src/config/synapseConfigs/tools.ts
+++ b/apps/portals/nf/src/config/synapseConfigs/tools.ts
@@ -277,13 +277,11 @@ export const toolDetailsPageConfig: DetailsPageProps = {
           columnName: 'resourceId',
         },
         {
-          name: 'Markdown',
-          title: 'Submit an Observation',
-          standalone: true,
-          props: {
-            ownerId: 'syn26338068',
-            wikiId: '613438',
-          },
+          name: 'FormModal',
+          outsideContainerClassName: 'home-spacer',
+          props: undefined,
+          tableSqlKeys: ['resourceId'],
+          columnName: 'resourceId',
         },
       ],
     },
diff --git a/apps/synapse-portal-framework/src/components/index.ts b/apps/synapse-portal-framework/src/components/index.ts
index 09ee71f341..2c39f6c8d5 100644
--- a/apps/synapse-portal-framework/src/components/index.ts
+++ b/apps/synapse-portal-framework/src/components/index.ts
@@ -26,6 +26,8 @@ import ChallengeDataDownloadWrapper from './challengeportal/ChallengeDataDownloa
 import ProjectDiscussionForum from './ProjectDiscussionForum'
 import SynapseComponentCollapse from './SynapseComponentCollapse'
 import SurveyToast from './SurveyToast'
+import { WideButton } from 'synapse-react-client'
+import FormModal from './nf/FormModal'
 
 const PortalComponents = {
   RouteControlWrapper,
@@ -56,6 +58,8 @@ const PortalComponents = {
   ChallengeDataDownloadWrapper,
   SynapseComponentCollapse,
   SurveyToast,
+  WideButton,
+  FormModal,
 }
 
 export default PortalComponents
diff --git a/apps/synapse-portal-framework/src/components/nf/FormModal.tsx b/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
new file mode 100644
index 0000000000..428fdedc78
--- /dev/null
+++ b/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import { DynamicForm, SynapseComponents } from 'synapse-react-client'
+import { Box } from '@mui/material'
+
+const FormModal = () => {
+  const [open, setOpen] = useState(false)
+  const form = (
+    <DynamicForm
+      schemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json"
+      uiSchemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json"
+      postUrl="https://submit-form.com/KwZ46H4T"
+    />
+  )
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <Box sx={{ margin: '15px 0px' }}>
+      <SynapseComponents.WideButton
+        variant="contained"
+        onClick={handleClickOpen}
+      >
+        Submit Observation
+      </SynapseComponents.WideButton>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogContent>
+          <DialogContentText>{form}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default FormModal
diff --git a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
index aecfaedda6..9de728e5b0 100644
--- a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
+++ b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
@@ -12,6 +12,7 @@ import PopularSearches from '../PopularSearches'
 import pluralize from 'pluralize'
 import Ecosystem from '../csbc-home-page/Ecosystem'
 import Search from '../Search'
+import { DynamicForm } from 'synapse-react-client'
 
 type Category = {
   resourceName: string
@@ -26,6 +27,58 @@ const categories: Category[] = [
   { resourceName: 'Biobank', image: <Biobanks /> },
 ]
 
+const host = window.location.host
+const base = 'Research%20Tools%20Central/Submit%20'
+const createHref = path => `http://${host}/${base}${path}`
+
+const submitToolButtons = [
+  {
+    label: 'Submit Animal Model',
+    href: createHref('Animal%20Model'),
+    schemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/animal-model/submitAnimalModel.json',
+    uiSchemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/animal-model/SubmitAnimalModelUiSchema.json',
+    postUrl: 'https://submit-form.com/KwZ46H4T',
+  },
+  {
+    label: 'Submit Observation',
+    href: createHref('Observation'),
+    schemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json',
+    uiSchemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json',
+    postUrl: 'https://submit-form.com/KwZ46H4T',
+  },
+  {
+    label: 'Submit Cell Line',
+    href: createHref('Cell%20Line'),
+    schemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/cell-line/submitCellLine.json',
+    uiSchemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/cell-line/submitCellLineUiSchema.json',
+    postUrl: 'https://submit-form.com/KwZ46H4T',
+  },
+  {
+    label: 'Submit Genetic Reagents',
+    href: createHref('Genetic%20Reagent'),
+    schemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/genetic-reagent/submitGeneticReagent.json',
+    uiSchemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/genetic-reagent/submitGeneticReagentUiSchema.json',
+    postUrl: 'https://submit-form.com/KwZ46H4T',
+  },
+  {
+    label: 'Submit Antibody',
+    href: createHref('Antibody'),
+    schemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/antibody/submitAntibody.json',
+    uiSchemaUrl:
+      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/antibody/SubmitAntibodyUiSchema.json',
+    postUrl: 'https://submit-form.com/KwZ46H4T',
+  },
+]
+
 export type NFBrowseToolsPageProps = {
   popularSearchesSql: string
   toolsSql: string
@@ -238,7 +291,7 @@ const NFBrowseToolsPage = (props: NFBrowseToolsPageProps) => {
           </div>
         </div>
         <div className="center-content">
-          <SynapseComponents.WideButton
+          {/* <SynapseComponents.WideButton
             sx={wideButtonSx}
             href="https://forms.gle/htFkH5yewLzP1RAu7"
             className="highlightSubmitToolButton"
@@ -247,7 +300,23 @@ const NFBrowseToolsPage = (props: NFBrowseToolsPageProps) => {
             target="_blank"
           >
             Submit A Tool
-          </SynapseComponents.WideButton>
+          </SynapseComponents.WideButton> */}
+
+          {/*  new */}
+          {submitToolButtons.map(button => (
+            <SynapseComponents.WideButton
+              // sx={wideButtonSx}
+              sx={{ ...wideButtonSx, marginLeft: '10px', marginRight: '10px' }}
+              href={button.href}
+              className="highlightSubmitToolButton"
+              variant="contained"
+              // @ts-expect-error - target prop exists, but TS doesn't recognize on styled component
+              target="_blank"
+            >
+              {button.label}
+            </SynapseComponents.WideButton>
+          ))}
+          {/* new */}
         </div>
       </Layout>
     </div>
diff --git a/apps/synapse-portal-framework/src/types/portal-config.ts b/apps/synapse-portal-framework/src/types/portal-config.ts
index 864a1736b0..d03bb0cfd8 100644
--- a/apps/synapse-portal-framework/src/types/portal-config.ts
+++ b/apps/synapse-portal-framework/src/types/portal-config.ts
@@ -48,6 +48,7 @@ import { NFBrowseToolsPageProps } from '../components/nf/NFBrowseToolsPage'
 import { ELBrowseToolsPageProps } from '../components/elportal/ELBrowseToolsPage'
 import { EcosystemProps } from '../components/csbc-home-page/Ecosystem'
 import { SurveyToastProps } from '../components/SurveyToast'
+import { ButtonProps } from '@mui/material'
 
 // For styling the header on the home page -- the main title and the summary text
 export type HomePageHeaderConfig = {
@@ -58,6 +59,16 @@ export type HomePageHeaderConfig = {
   HeaderSvg?: any
 }
 
+type WideButton = {
+  name: 'WideButton'
+  props: ButtonProps
+}
+
+type FormModal = {
+  name: 'FormModal'
+  props: undefined
+}
+
 // Generic SynapseConfigArray Representation -- maps each component to its props
 type CardContainerLogic = {
   props: CardContainerLogicProps
@@ -401,6 +412,8 @@ export type SynapseConfig = (
   | DatasetJsonLdScript
   | DynamicForm
   | SharePageLinkButton
+  | WideButton
+  | FormModal
 ) &
   Metadata
 

From 22b45dfd25095ce6214b94d44e74729f7cf67ab7 Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Mon, 21 Oct 2024 23:51:30 -0700
Subject: [PATCH 02/10] cleanup, styling

---
 .../src/components/nf/NFBrowseToolsPage.tsx   | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
index 9de728e5b0..0adc6546c3 100644
--- a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
+++ b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
@@ -12,7 +12,6 @@ import PopularSearches from '../PopularSearches'
 import pluralize from 'pluralize'
 import Ecosystem from '../csbc-home-page/Ecosystem'
 import Search from '../Search'
-import { DynamicForm } from 'synapse-react-client'
 
 type Category = {
   resourceName: string
@@ -28,8 +27,10 @@ const categories: Category[] = [
 ]
 
 const host = window.location.host
-const base = 'Research%20Tools%20Central/Submit%20'
-const createHref = path => `http://${host}/${base}${path}`
+const baseUrl = 'Research%20Tools%20Central/Submit%20'
+const postUrl = 'https://submit-form.com/KwZ46H4T'
+
+const createHref = path => `http://${host}/${baseUrl}${path}`
 
 const submitToolButtons = [
   {
@@ -39,7 +40,7 @@ const submitToolButtons = [
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/animal-model/submitAnimalModel.json',
     uiSchemaUrl:
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/animal-model/SubmitAnimalModelUiSchema.json',
-    postUrl: 'https://submit-form.com/KwZ46H4T',
+    postUrl: postUrl,
   },
   {
     label: 'Submit Observation',
@@ -48,7 +49,7 @@ const submitToolButtons = [
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json',
     uiSchemaUrl:
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json',
-    postUrl: 'https://submit-form.com/KwZ46H4T',
+    postUrl: postUrl,
   },
   {
     label: 'Submit Cell Line',
@@ -57,7 +58,7 @@ const submitToolButtons = [
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/cell-line/submitCellLine.json',
     uiSchemaUrl:
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/cell-line/submitCellLineUiSchema.json',
-    postUrl: 'https://submit-form.com/KwZ46H4T',
+    postUrl: postUrl,
   },
   {
     label: 'Submit Genetic Reagents',
@@ -66,7 +67,7 @@ const submitToolButtons = [
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/genetic-reagent/submitGeneticReagent.json',
     uiSchemaUrl:
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/genetic-reagent/submitGeneticReagentUiSchema.json',
-    postUrl: 'https://submit-form.com/KwZ46H4T',
+    postUrl: postUrl,
   },
   {
     label: 'Submit Antibody',
@@ -75,7 +76,7 @@ const submitToolButtons = [
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/antibody/submitAntibody.json',
     uiSchemaUrl:
       'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/antibody/SubmitAntibodyUiSchema.json',
-    postUrl: 'https://submit-form.com/KwZ46H4T',
+    postUrl: postUrl,
   },
 ]
 
@@ -291,32 +292,31 @@ const NFBrowseToolsPage = (props: NFBrowseToolsPageProps) => {
           </div>
         </div>
         <div className="center-content">
-          {/* <SynapseComponents.WideButton
-            sx={wideButtonSx}
-            href="https://forms.gle/htFkH5yewLzP1RAu7"
-            className="highlightSubmitToolButton"
-            variant="contained"
-            // @ts-expect-error - target prop exists, but TS doesn't recognize on styled component
-            target="_blank"
+          <Box
+            sx={{
+              display: 'flex',
+              marginTop: '50px',
+              gap: '16px',
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+            }}
           >
-            Submit A Tool
-          </SynapseComponents.WideButton> */}
-
-          {/*  new */}
-          {submitToolButtons.map(button => (
-            <SynapseComponents.WideButton
-              // sx={wideButtonSx}
-              sx={{ ...wideButtonSx, marginLeft: '10px', marginRight: '10px' }}
-              href={button.href}
-              className="highlightSubmitToolButton"
-              variant="contained"
-              // @ts-expect-error - target prop exists, but TS doesn't recognize on styled component
-              target="_blank"
-            >
-              {button.label}
-            </SynapseComponents.WideButton>
-          ))}
-          {/* new */}
+            {submitToolButtons.map(button => (
+              <SynapseComponents.WideButton
+                sx={{
+                  ...wideButtonSx,
+                  margin: '0px',
+                }}
+                href={button.href}
+                className="highlightSubmitToolButton"
+                variant="contained"
+                // @ts-expect-error - target prop exists, but TS doesn't recognize on styled component
+                target="_blank"
+              >
+                {button.label}
+              </SynapseComponents.WideButton>
+            ))}
+          </Box>
         </div>
       </Layout>
     </div>

From 459ef642caea9df9e64177edb244bef043f04cad Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Tue, 22 Oct 2024 16:15:59 -0700
Subject: [PATCH 03/10] use confirmation dialog component instead, cleanup

---
 .../nf/src/config/synapseConfigs/tools.ts     | 10 +++-
 .../src/components/nf/FormModal.tsx           | 53 ++++++++++---------
 .../src/types/portal-config.ts                |  1 -
 3 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/apps/portals/nf/src/config/synapseConfigs/tools.ts b/apps/portals/nf/src/config/synapseConfigs/tools.ts
index 56ec40a85c..1f4937e3f2 100644
--- a/apps/portals/nf/src/config/synapseConfigs/tools.ts
+++ b/apps/portals/nf/src/config/synapseConfigs/tools.ts
@@ -276,10 +276,18 @@ export const toolDetailsPageConfig: DetailsPageProps = {
           tableSqlKeys: ['resourceId'],
           columnName: 'resourceId',
         },
+        {
+          name: 'Markdown',
+          title: 'Share Your Observation',
+          standalone: true,
+          props: {
+            ownerId: 'syn63814796',
+            wikiId: '629919',
+          },
+        },
         {
           name: 'FormModal',
           outsideContainerClassName: 'home-spacer',
-          props: undefined,
           tableSqlKeys: ['resourceId'],
           columnName: 'resourceId',
         },
diff --git a/apps/synapse-portal-framework/src/components/nf/FormModal.tsx b/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
index 428fdedc78..fa4dd2e409 100644
--- a/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
+++ b/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
-import Button from '@mui/material/Button'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogContentText from '@mui/material/DialogContentText'
-import { DynamicForm, SynapseComponents } from 'synapse-react-client'
+import {
+  ConfirmationDialog,
+  DynamicForm,
+  SynapseComponents,
+} from 'synapse-react-client'
 import { Box } from '@mui/material'
 
 const FormModal = () => {
@@ -26,24 +25,30 @@ const FormModal = () => {
   }
 
   return (
-    <Box sx={{ margin: '15px 0px' }}>
-      <SynapseComponents.WideButton
-        variant="contained"
-        onClick={handleClickOpen}
-      >
-        Submit Observation
-      </SynapseComponents.WideButton>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogContent>
-          <DialogContentText>{form}</DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose} color="primary">
-            Close
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
+    <div className="browse-tools-page">
+      <Box sx={{ margin: '10px 0px 50px 0px' }}>
+        <SynapseComponents.WideButton
+          className="highlightSubmitToolButton"
+          variant="contained"
+          onClick={handleClickOpen}
+        >
+          Submit Observation
+        </SynapseComponents.WideButton>
+        <ConfirmationDialog
+          open={open}
+          title=""
+          content={form}
+          onCancel={handleClose}
+          onConfirm={() => {}}
+          confirmButtonProps={{
+            sx: { display: 'none' },
+          }}
+          cancelButtonProps={{
+            children: 'cancel',
+          }}
+        />
+      </Box>
+    </div>
   )
 }
 
diff --git a/apps/synapse-portal-framework/src/types/portal-config.ts b/apps/synapse-portal-framework/src/types/portal-config.ts
index d03bb0cfd8..1ab137479d 100644
--- a/apps/synapse-portal-framework/src/types/portal-config.ts
+++ b/apps/synapse-portal-framework/src/types/portal-config.ts
@@ -66,7 +66,6 @@ type WideButton = {
 
 type FormModal = {
   name: 'FormModal'
-  props: undefined
 }
 
 // Generic SynapseConfigArray Representation -- maps each component to its props

From b4b4ff1246a3222382a9ccace8afb53134e14c94 Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Sun, 27 Oct 2024 01:31:52 -0700
Subject: [PATCH 04/10] update wiki, cleanup

---
 .../nf/src/config/synapseConfigs/tools.ts     |  4 +--
 .../src/components/nf/NFBrowseToolsPage.tsx   | 32 +++++++------------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/apps/portals/nf/src/config/synapseConfigs/tools.ts b/apps/portals/nf/src/config/synapseConfigs/tools.ts
index 1f4937e3f2..7120ae4ee6 100644
--- a/apps/portals/nf/src/config/synapseConfigs/tools.ts
+++ b/apps/portals/nf/src/config/synapseConfigs/tools.ts
@@ -281,8 +281,8 @@ export const toolDetailsPageConfig: DetailsPageProps = {
           title: 'Share Your Observation',
           standalone: true,
           props: {
-            ownerId: 'syn63814796',
-            wikiId: '629919',
+            ownerId: 'syn26338068',
+            wikiId: '629946',
           },
         },
         {
diff --git a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
index 0adc6546c3..efd3db9bdd 100644
--- a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
+++ b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
@@ -28,6 +28,8 @@ const categories: Category[] = [
 
 const host = window.location.host
 const baseUrl = 'Research%20Tools%20Central/Submit%20'
+const baseSchemaUrl =
+  'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/'
 const postUrl = 'https://submit-form.com/KwZ46H4T'
 
 const createHref = path => `http://${host}/${baseUrl}${path}`
@@ -36,46 +38,36 @@ const submitToolButtons = [
   {
     label: 'Submit Animal Model',
     href: createHref('Animal%20Model'),
-    schemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/animal-model/submitAnimalModel.json',
-    uiSchemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/animal-model/SubmitAnimalModelUiSchema.json',
+    schemaUrl: `${baseSchemaUrl}animal-model/submitAnimalModel.json`,
+    uiSchemaUrl: `${baseSchemaUrl}animal-model/SubmitAnimalModelUiSchema.json`,
     postUrl: postUrl,
   },
   {
     label: 'Submit Observation',
     href: createHref('Observation'),
-    schemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json',
-    uiSchemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json',
+    schemaUrl: `${baseSchemaUrl}observations/SubmitObservationSchema.json`,
+    uiSchemaUrl: `${baseSchemaUrl}observations/SubmitObservationUiSchema.json`,
     postUrl: postUrl,
   },
   {
     label: 'Submit Cell Line',
     href: createHref('Cell%20Line'),
-    schemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/cell-line/submitCellLine.json',
-    uiSchemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/cell-line/submitCellLineUiSchema.json',
+    schemaUrl: `${baseSchemaUrl}cell-line/submitCellLine.json`,
+    uiSchemaUrl: `${baseSchemaUrl}cell-line/submitCellLineUiSchema.json`,
     postUrl: postUrl,
   },
   {
     label: 'Submit Genetic Reagents',
     href: createHref('Genetic%20Reagent'),
-    schemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/genetic-reagent/submitGeneticReagent.json',
-    uiSchemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/genetic-reagent/submitGeneticReagentUiSchema.json',
+    schemaUrl: `${baseSchemaUrl}genetic-reagent/submitGeneticReagent.json`,
+    uiSchemaUrl: `${baseSchemaUrl}genetic-reagent/submitGeneticReagentUiSchema.json`,
     postUrl: postUrl,
   },
   {
     label: 'Submit Antibody',
     href: createHref('Antibody'),
-    schemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/antibody/submitAntibody.json',
-    uiSchemaUrl:
-      'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/antibody/SubmitAntibodyUiSchema.json',
+    schemaUrl: `${baseSchemaUrl}antibody/submitAntibody.json`,
+    uiSchemaUrl: `${baseSchemaUrl}antibody/SubmitAntibodyUiSchema.json`,
     postUrl: postUrl,
   },
 ]

From 63ba41c1c233960a193557c942963035ba3dc94d Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Sun, 27 Oct 2024 01:36:48 -0700
Subject: [PATCH 05/10] do not need that component in portal-config

---
 apps/synapse-portal-framework/src/types/portal-config.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/apps/synapse-portal-framework/src/types/portal-config.ts b/apps/synapse-portal-framework/src/types/portal-config.ts
index 1ab137479d..62e9d8d9d6 100644
--- a/apps/synapse-portal-framework/src/types/portal-config.ts
+++ b/apps/synapse-portal-framework/src/types/portal-config.ts
@@ -48,7 +48,6 @@ import { NFBrowseToolsPageProps } from '../components/nf/NFBrowseToolsPage'
 import { ELBrowseToolsPageProps } from '../components/elportal/ELBrowseToolsPage'
 import { EcosystemProps } from '../components/csbc-home-page/Ecosystem'
 import { SurveyToastProps } from '../components/SurveyToast'
-import { ButtonProps } from '@mui/material'
 
 // For styling the header on the home page -- the main title and the summary text
 export type HomePageHeaderConfig = {
@@ -59,11 +58,6 @@ export type HomePageHeaderConfig = {
   HeaderSvg?: any
 }
 
-type WideButton = {
-  name: 'WideButton'
-  props: ButtonProps
-}
-
 type FormModal = {
   name: 'FormModal'
 }
@@ -411,7 +405,6 @@ export type SynapseConfig = (
   | DatasetJsonLdScript
   | DynamicForm
   | SharePageLinkButton
-  | WideButton
   | FormModal
 ) &
   Metadata

From 50867dfe8c6ddc05d0286229e4a4e830e68261bf Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Sun, 27 Oct 2024 02:04:59 -0700
Subject: [PATCH 06/10] fix props does not exist on form modal error

---
 apps/synapse-portal-framework/src/types/portal-config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/synapse-portal-framework/src/types/portal-config.ts b/apps/synapse-portal-framework/src/types/portal-config.ts
index 62e9d8d9d6..83148186b1 100644
--- a/apps/synapse-portal-framework/src/types/portal-config.ts
+++ b/apps/synapse-portal-framework/src/types/portal-config.ts
@@ -60,6 +60,7 @@ export type HomePageHeaderConfig = {
 
 type FormModal = {
   name: 'FormModal'
+  props: undefined
 }
 
 // Generic SynapseConfigArray Representation -- maps each component to its props

From bae0f2498b16b0f86891fe3777701ef34869d2af Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Sun, 27 Oct 2024 02:20:58 -0700
Subject: [PATCH 07/10] form modal props, key for button mapping

---
 apps/portals/nf/src/config/synapseConfigs/tools.ts               | 1 +
 .../src/components/nf/NFBrowseToolsPage.tsx                      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/portals/nf/src/config/synapseConfigs/tools.ts b/apps/portals/nf/src/config/synapseConfigs/tools.ts
index 7120ae4ee6..e83beff2d6 100644
--- a/apps/portals/nf/src/config/synapseConfigs/tools.ts
+++ b/apps/portals/nf/src/config/synapseConfigs/tools.ts
@@ -287,6 +287,7 @@ export const toolDetailsPageConfig: DetailsPageProps = {
         },
         {
           name: 'FormModal',
+          props: undefined,
           outsideContainerClassName: 'home-spacer',
           tableSqlKeys: ['resourceId'],
           columnName: 'resourceId',
diff --git a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
index efd3db9bdd..a97f13c382 100644
--- a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
+++ b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
@@ -295,6 +295,7 @@ const NFBrowseToolsPage = (props: NFBrowseToolsPageProps) => {
           >
             {submitToolButtons.map(button => (
               <SynapseComponents.WideButton
+                key={button.label}
                 sx={{
                   ...wideButtonSx,
                   margin: '0px',

From db341e1f9c89b59fe964273f307ccbec0c8d06f4 Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Thu, 31 Oct 2024 15:55:11 -0700
Subject: [PATCH 08/10] encodeuricomponent instead of hardcoding %s, close
 popup after successful form submit

---
 .../src/components/nf/FormModal.tsx              | 16 +++++++++-------
 .../src/components/nf/NFBrowseToolsPage.tsx      | 13 ++++++++-----
 .../src/components/DynamicForm/DynamicForm.tsx   |  5 +++++
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/synapse-portal-framework/src/components/nf/FormModal.tsx b/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
index fa4dd2e409..55922d89c6 100644
--- a/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
+++ b/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
@@ -8,13 +8,6 @@ import { Box } from '@mui/material'
 
 const FormModal = () => {
   const [open, setOpen] = useState(false)
-  const form = (
-    <DynamicForm
-      schemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json"
-      uiSchemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json"
-      postUrl="https://submit-form.com/KwZ46H4T"
-    />
-  )
 
   const handleClickOpen = () => {
     setOpen(true)
@@ -24,6 +17,15 @@ const FormModal = () => {
     setOpen(false)
   }
 
+  const form = (
+    <DynamicForm
+      schemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json"
+      uiSchemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json"
+      postUrl="https://submit-form.com/KwZ46H4T"
+      onCustomSuccess={handleClose}
+    />
+  )
+
   return (
     <div className="browse-tools-page">
       <Box sx={{ margin: '10px 0px 50px 0px' }}>
diff --git a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
index a97f13c382..ef633cee80 100644
--- a/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
+++ b/apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx
@@ -27,17 +27,20 @@ const categories: Category[] = [
 ]
 
 const host = window.location.host
-const baseUrl = 'Research%20Tools%20Central/Submit%20'
+const baseUrl = `${encodeURIComponent(
+  'Research Tools Central',
+)}/${encodeURIComponent('Submit ')}`
 const baseSchemaUrl =
   'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/'
 const postUrl = 'https://submit-form.com/KwZ46H4T'
 
-const createHref = path => `http://${host}/${baseUrl}${path}`
+const createHref = path =>
+  `http://${host}/${baseUrl}${encodeURIComponent(path)}`
 
 const submitToolButtons = [
   {
     label: 'Submit Animal Model',
-    href: createHref('Animal%20Model'),
+    href: createHref('Animal Model'),
     schemaUrl: `${baseSchemaUrl}animal-model/submitAnimalModel.json`,
     uiSchemaUrl: `${baseSchemaUrl}animal-model/SubmitAnimalModelUiSchema.json`,
     postUrl: postUrl,
@@ -51,14 +54,14 @@ const submitToolButtons = [
   },
   {
     label: 'Submit Cell Line',
-    href: createHref('Cell%20Line'),
+    href: createHref('Cell Line'),
     schemaUrl: `${baseSchemaUrl}cell-line/submitCellLine.json`,
     uiSchemaUrl: `${baseSchemaUrl}cell-line/submitCellLineUiSchema.json`,
     postUrl: postUrl,
   },
   {
     label: 'Submit Genetic Reagents',
-    href: createHref('Genetic%20Reagent'),
+    href: createHref('Genetic Reagent'),
     schemaUrl: `${baseSchemaUrl}genetic-reagent/submitGeneticReagent.json`,
     uiSchemaUrl: `${baseSchemaUrl}genetic-reagent/submitGeneticReagentUiSchema.json`,
     postUrl: postUrl,
diff --git a/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx b/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx
index 8bd167d7fc..342ae3c850 100644
--- a/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx
+++ b/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx
@@ -12,6 +12,7 @@ export type DynamicFormProps = {
   postUrl: string
   mutateFormDataBeforePost?: (formData: any) => any // allow caller to embed formdata into custom request body object
   onCancel?: () => void
+  onCustomSuccess?: () => void
 }
 
 function DynamicForm(props: DynamicFormProps) {
@@ -21,6 +22,7 @@ function DynamicForm(props: DynamicFormProps) {
     postUrl,
     mutateFormDataBeforePost,
     onCancel,
+    onCustomSuccess,
   } = props
   const [formData, setFormData] = useState({})
 
@@ -80,6 +82,9 @@ function DynamicForm(props: DynamicFormProps) {
     },
     onSuccess: () => {
       displayToast('Form submitted successfully!', 'success')
+      if (onCustomSuccess) {
+        onCustomSuccess()
+      }
     },
     onError: error => {
       displayToast(`Error submitting form: ${error.message}`, 'danger')

From 754f969c6a6479c4f4dddadba7c72b1a2f67ef45 Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Fri, 1 Nov 2024 13:46:43 -0700
Subject: [PATCH 09/10] moving dynamicformmodal inside synapse-react-client

---
 .../nf/src/config/synapseConfigs/tools.ts     | 11 ++++--
 .../src/components/index.ts                   |  2 --
 .../src/types/portal-config.ts                | 14 ++++----
 .../components/DynamicForm/DynamicForm.tsx    |  8 ++---
 .../DynamicForm/DynamicFormModal.tsx          | 35 ++++++++++++-------
 .../src/components/DynamicForm/index.ts       |  9 ++++-
 6 files changed, 52 insertions(+), 27 deletions(-)
 rename apps/synapse-portal-framework/src/components/nf/FormModal.tsx => packages/synapse-react-client/src/components/DynamicForm/DynamicFormModal.tsx (61%)

diff --git a/apps/portals/nf/src/config/synapseConfigs/tools.ts b/apps/portals/nf/src/config/synapseConfigs/tools.ts
index 437f02ce7a..f1e7d70f84 100644
--- a/apps/portals/nf/src/config/synapseConfigs/tools.ts
+++ b/apps/portals/nf/src/config/synapseConfigs/tools.ts
@@ -286,8 +286,15 @@ export const toolDetailsPageConfig: DetailsPageProps = {
           },
         },
         {
-          name: 'FormModal',
-          props: undefined,
+          name: 'DynamicFormModal',
+          props: {
+            schemaUrl:
+              'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json',
+            uiSchemaUrl:
+              'https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json',
+            postUrl: 'https://submit-form.com/KwZ46H4T',
+            submitButtonText: 'Submit Observation',
+          },
           outsideContainerClassName: 'home-spacer',
           tableSqlKeys: ['resourceId'],
           columnName: 'resourceId',
diff --git a/apps/synapse-portal-framework/src/components/index.ts b/apps/synapse-portal-framework/src/components/index.ts
index 2c39f6c8d5..8094c89f9d 100644
--- a/apps/synapse-portal-framework/src/components/index.ts
+++ b/apps/synapse-portal-framework/src/components/index.ts
@@ -27,7 +27,6 @@ import ProjectDiscussionForum from './ProjectDiscussionForum'
 import SynapseComponentCollapse from './SynapseComponentCollapse'
 import SurveyToast from './SurveyToast'
 import { WideButton } from 'synapse-react-client'
-import FormModal from './nf/FormModal'
 
 const PortalComponents = {
   RouteControlWrapper,
@@ -59,7 +58,6 @@ const PortalComponents = {
   SynapseComponentCollapse,
   SurveyToast,
   WideButton,
-  FormModal,
 }
 
 export default PortalComponents
diff --git a/apps/synapse-portal-framework/src/types/portal-config.ts b/apps/synapse-portal-framework/src/types/portal-config.ts
index 83148186b1..c50c2468ee 100644
--- a/apps/synapse-portal-framework/src/types/portal-config.ts
+++ b/apps/synapse-portal-framework/src/types/portal-config.ts
@@ -27,6 +27,8 @@ import {
   UserCardListRotateProps,
   UserCardProps,
   DynamicFormProps,
+  DynamicFormModalProps,
+  DynamicFormModal,
   SharePageLinkButtonProps,
 } from 'synapse-react-client'
 import { RouteControlWrapperProps } from '../components/RouteControlWrapper'
@@ -58,11 +60,6 @@ export type HomePageHeaderConfig = {
   HeaderSvg?: any
 }
 
-type FormModal = {
-  name: 'FormModal'
-  props: undefined
-}
-
 // Generic SynapseConfigArray Representation -- maps each component to its props
 type CardContainerLogic = {
   props: CardContainerLogicProps
@@ -89,6 +86,11 @@ type DynamicForm = {
   props: DynamicFormProps
 }
 
+type DynamicFormModal = {
+  name: 'DynamicFormModal'
+  props: DynamicFormModalProps
+}
+
 type Markdown = {
   name: 'Markdown'
   props: MarkdownSynapseProps
@@ -406,7 +408,7 @@ export type SynapseConfig = (
   | DatasetJsonLdScript
   | DynamicForm
   | SharePageLinkButton
-  | FormModal
+  | DynamicFormModal
 ) &
   Metadata
 
diff --git a/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx b/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx
index 342ae3c850..9879ebdeb2 100644
--- a/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx
+++ b/packages/synapse-react-client/src/components/DynamicForm/DynamicForm.tsx
@@ -12,7 +12,7 @@ export type DynamicFormProps = {
   postUrl: string
   mutateFormDataBeforePost?: (formData: any) => any // allow caller to embed formdata into custom request body object
   onCancel?: () => void
-  onCustomSuccess?: () => void
+  onSubmit?: () => void
 }
 
 function DynamicForm(props: DynamicFormProps) {
@@ -22,7 +22,7 @@ function DynamicForm(props: DynamicFormProps) {
     postUrl,
     mutateFormDataBeforePost,
     onCancel,
-    onCustomSuccess,
+    onSubmit,
   } = props
   const [formData, setFormData] = useState({})
 
@@ -82,8 +82,8 @@ function DynamicForm(props: DynamicFormProps) {
     },
     onSuccess: () => {
       displayToast('Form submitted successfully!', 'success')
-      if (onCustomSuccess) {
-        onCustomSuccess()
+      if (onSubmit) {
+        onSubmit()
       }
     },
     onError: error => {
diff --git a/apps/synapse-portal-framework/src/components/nf/FormModal.tsx b/packages/synapse-react-client/src/components/DynamicForm/DynamicFormModal.tsx
similarity index 61%
rename from apps/synapse-portal-framework/src/components/nf/FormModal.tsx
rename to packages/synapse-react-client/src/components/DynamicForm/DynamicFormModal.tsx
index 55922d89c6..436258742d 100644
--- a/apps/synapse-portal-framework/src/components/nf/FormModal.tsx
+++ b/packages/synapse-react-client/src/components/DynamicForm/DynamicFormModal.tsx
@@ -1,12 +1,21 @@
 import React, { useState } from 'react'
-import {
-  ConfirmationDialog,
-  DynamicForm,
-  SynapseComponents,
-} from 'synapse-react-client'
+import ConfirmationDialog from '../ConfirmationDialog'
+import { SynapseComponents } from '../..'
 import { Box } from '@mui/material'
+import DynamicForm, { DynamicFormProps } from '.'
 
-const FormModal = () => {
+type ModalProps = {
+  submitButtonText?: string
+}
+
+export type DynamicFormModalProps = DynamicFormProps & ModalProps
+
+const DynamicFormModal = ({
+  schemaUrl,
+  uiSchemaUrl,
+  postUrl,
+  submitButtonText,
+}: DynamicFormModalProps) => {
   const [open, setOpen] = useState(false)
 
   const handleClickOpen = () => {
@@ -19,10 +28,12 @@ const FormModal = () => {
 
   const form = (
     <DynamicForm
-      schemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationSchema.json"
-      uiSchemaUrl="https://raw.githubusercontent.com/nf-osi/nf-research-tools-schema/refs/heads/main/NF-Tools-Schemas/observations/SubmitObservationUiSchema.json"
-      postUrl="https://submit-form.com/KwZ46H4T"
-      onCustomSuccess={handleClose}
+      schemaUrl={schemaUrl}
+      uiSchemaUrl={uiSchemaUrl}
+      postUrl={postUrl}
+      onSubmit={() => {
+        handleClose()
+      }}
     />
   )
 
@@ -34,7 +45,7 @@ const FormModal = () => {
           variant="contained"
           onClick={handleClickOpen}
         >
-          Submit Observation
+          {submitButtonText}
         </SynapseComponents.WideButton>
         <ConfirmationDialog
           open={open}
@@ -54,4 +65,4 @@ const FormModal = () => {
   )
 }
 
-export default FormModal
+export default DynamicFormModal
diff --git a/packages/synapse-react-client/src/components/DynamicForm/index.ts b/packages/synapse-react-client/src/components/DynamicForm/index.ts
index 771db05a17..43e6d502dd 100644
--- a/packages/synapse-react-client/src/components/DynamicForm/index.ts
+++ b/packages/synapse-react-client/src/components/DynamicForm/index.ts
@@ -1,4 +1,11 @@
 import DynamicForm from './DynamicForm'
+import DynamicFormModal from './DynamicFormModal'
 import type { DynamicFormProps } from './DynamicForm'
-export { DynamicForm, DynamicFormProps }
+import type { DynamicFormModalProps } from './DynamicFormModal'
+export {
+  DynamicForm,
+  DynamicFormModal,
+  DynamicFormProps,
+  DynamicFormModalProps,
+}
 export default DynamicForm

From 3d70868ca1492f971ba331ce752e3f1a38bae3ed Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Fri, 1 Nov 2024 14:03:55 -0700
Subject: [PATCH 10/10] cleanup

---
 apps/synapse-portal-framework/src/components/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/synapse-portal-framework/src/components/index.ts b/apps/synapse-portal-framework/src/components/index.ts
index 8094c89f9d..09ee71f341 100644
--- a/apps/synapse-portal-framework/src/components/index.ts
+++ b/apps/synapse-portal-framework/src/components/index.ts
@@ -26,7 +26,6 @@ import ChallengeDataDownloadWrapper from './challengeportal/ChallengeDataDownloa
 import ProjectDiscussionForum from './ProjectDiscussionForum'
 import SynapseComponentCollapse from './SynapseComponentCollapse'
 import SurveyToast from './SurveyToast'
-import { WideButton } from 'synapse-react-client'
 
 const PortalComponents = {
   RouteControlWrapper,
@@ -57,7 +56,6 @@ const PortalComponents = {
   ChallengeDataDownloadWrapper,
   SynapseComponentCollapse,
   SurveyToast,
-  WideButton,
 }
 
 export default PortalComponents