Merge pull request #1321 from kianamcc/PORTALS-3266

PORTALS-3266: staging only: "submit a tool" button points to old google forms

apps/portals/nf/src/config/synapseConfigs/tools.ts

@@ -278,12 +278,26 @@ export const toolDetailsPageConfig: DetailsPageProps = {
         },
         {
           name: 'Markdown',
-          title: 'Submit an Observation',
+          title: 'Share Your Observation',
           standalone: true,
           props: {
             ownerId: 'syn26338068',
-            wikiId: '613438',
+            wikiId: '629946',
+          },
+        },
+        {
+          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',
         },
       ],
     },

apps/synapse-portal-framework/src/components/nf/NFBrowseToolsPage.tsx

@@ -26,6 +26,55 @@ const categories: Category[] = [
   { resourceName: 'Biobank', image: <Biobanks /> },
 ]
 
+const host = window.location.host
+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}${encodeURIComponent(path)}`
+
+const submitToolButtons = [
+  {
+    label: 'Submit Animal Model',
+    href: createHref('Animal Model'),
+    schemaUrl: `${baseSchemaUrl}animal-model/submitAnimalModel.json`,
+    uiSchemaUrl: `${baseSchemaUrl}animal-model/SubmitAnimalModelUiSchema.json`,
+    postUrl: postUrl,
+  },
+  {
+    label: 'Submit Observation',
+    href: createHref('Observation'),
+    schemaUrl: `${baseSchemaUrl}observations/SubmitObservationSchema.json`,
+    uiSchemaUrl: `${baseSchemaUrl}observations/SubmitObservationUiSchema.json`,
+    postUrl: postUrl,
+  },
+  {
+    label: 'Submit Cell Line',
+    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 Reagent'),
+    schemaUrl: `${baseSchemaUrl}genetic-reagent/submitGeneticReagent.json`,
+    uiSchemaUrl: `${baseSchemaUrl}genetic-reagent/submitGeneticReagentUiSchema.json`,
+    postUrl: postUrl,
+  },
+  {
+    label: 'Submit Antibody',
+    href: createHref('Antibody'),
+    schemaUrl: `${baseSchemaUrl}antibody/submitAntibody.json`,
+    uiSchemaUrl: `${baseSchemaUrl}antibody/SubmitAntibodyUiSchema.json`,
+    postUrl: postUrl,
+  },
+]
+
 export type NFBrowseToolsPageProps = {
   popularSearchesSql: string
   toolsSql: string
@@ -238,16 +287,32 @@ 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>
+            {submitToolButtons.map(button => (
+              <SynapseComponents.WideButton
+                key={button.label}
+                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>

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'
@@ -84,6 +86,11 @@ type DynamicForm = {
   props: DynamicFormProps
 }
 
+type DynamicFormModal = {
+  name: 'DynamicFormModal'
+  props: DynamicFormModalProps
+}
+
 type Markdown = {
   name: 'Markdown'
   props: MarkdownSynapseProps
@@ -401,6 +408,7 @@ export type SynapseConfig = (
   | DatasetJsonLdScript
   | DynamicForm
   | SharePageLinkButton
+  | DynamicFormModal
 ) &
   Metadata
 

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
+  onSubmit?: () => void
 }
 
 function DynamicForm(props: DynamicFormProps) {
@@ -21,6 +22,7 @@ function DynamicForm(props: DynamicFormProps) {
     postUrl,
     mutateFormDataBeforePost,
     onCancel,
+    onSubmit,
   } = props
   const [formData, setFormData] = useState({})
 
@@ -80,6 +82,9 @@ function DynamicForm(props: DynamicFormProps) {
     },
     onSuccess: () => {
       displayToast('Form submitted successfully!', 'success')
+      if (onSubmit) {
+        onSubmit()
+      }
     },
     onError: error => {
       displayToast(`Error submitting form: ${error.message}`, 'danger')

packages/synapse-react-client/src/components/DynamicForm/DynamicFormModal.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import ConfirmationDialog from '../ConfirmationDialog'
+import { SynapseComponents } from '../..'
+import { Box } from '@mui/material'
+import DynamicForm, { DynamicFormProps } from '.'
+
+type ModalProps = {
+  submitButtonText?: string
+}
+
+export type DynamicFormModalProps = DynamicFormProps & ModalProps
+
+const DynamicFormModal = ({
+  schemaUrl,
+  uiSchemaUrl,
+  postUrl,
+  submitButtonText,
+}: DynamicFormModalProps) => {
+  const [open, setOpen] = useState(false)
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const form = (
+    <DynamicForm
+      schemaUrl={schemaUrl}
+      uiSchemaUrl={uiSchemaUrl}
+      postUrl={postUrl}
+      onSubmit={() => {
+        handleClose()
+      }}
+    />
+  )
+
+  return (
+    <div className="browse-tools-page">
+      <Box sx={{ margin: '10px 0px 50px 0px' }}>
+        <SynapseComponents.WideButton
+          className="highlightSubmitToolButton"
+          variant="contained"
+          onClick={handleClickOpen}
+        >
+          {submitButtonText}
+        </SynapseComponents.WideButton>
+        <ConfirmationDialog
+          open={open}
+          title=""
+          content={form}
+          onCancel={handleClose}
+          onConfirm={() => {}}
+          confirmButtonProps={{
+            sx: { display: 'none' },
+          }}
+          cancelButtonProps={{
+            children: 'cancel',
+          }}
+        />
+      </Box>
+    </div>
+  )
+}
+
+export default DynamicFormModal

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