Merge pull request #690 from nickgros/add-no-object-type-as-default-prop

.eslintrc.cjs

@@ -36,6 +36,7 @@ module.exports = {
         additionalHooks: "useDebouncedEffect",
       },
     ],
+    "react/no-object-type-as-default-prop": "error",
     "no-extra-semi": "off",
     "prefer-const": "warn",
     "jest/expect-expect": "off",

apps/portals/src/portal-components/crc-researcher/ParticipantsBarPlot.tsx

@@ -158,9 +158,15 @@ export function fetchData(token: string): Promise<RowSet> {
   )
 }
 
+const DEFAULT_PARTICIPANTS_BAR_PLOT_STYLE: React.CSSProperties = {
+  width: '100%',
+  height: '100%',
+  margin: '30px 10px',
+}
+
 const ParticipantsBarPlot: FunctionComponent<ParticipantsBarPlotProps> = ({
   token,
-  style = { width: '100%', height: '100%', margin: '30px 10px' },
+  style = DEFAULT_PARTICIPANTS_BAR_PLOT_STYLE,
 }: ParticipantsBarPlotProps) => {
   // get plot data!
   const [isLoaded, setIsLoaded] = useState(false)

apps/portals/src/portal-components/crc-researcher/StatusLineChart.tsx

@@ -160,9 +160,11 @@ export function fetchData(
   )
 }
 
+const DEFAULT_STATUSLINECHART_STYLE: React.CSSProperties = { width: '100%' }
+
 const StatusLineChart: FunctionComponent<StatusLineChartProps> = ({
   token,
-  style = { width: '100%' },
+  style = DEFAULT_STATUSLINECHART_STYLE,
 }: StatusLineChartProps) => {
   const [isLoaded, setIsLoaded] = useState(false)
   const [plotData, setPlotData] = useState<PlotData | null>(null)

apps/portals/src/portal-components/crc-researcher/SurveysCompletedPlots.tsx

@@ -101,9 +101,15 @@ export function fetchData(
   )
 }
 
+const DEFAULT_SURVEYS_COMPLETED_PLOTS_STYLE: React.CSSProperties = {
+  width: '100%',
+  height: '400px',
+  padding: '100px 50px',
+}
+
 const SurveysCompletedPlots: FunctionComponent<SurveysCompletedPlotsProps> = ({
   token,
-  style = { width: '100%', height: '400px', padding: '100px 50px' },
+  style = DEFAULT_SURVEYS_COMPLETED_PLOTS_STYLE,
 }: SurveysCompletedPlotsProps) => {
   const [isLoaded, setIsLoaded] = useState(false)
   const [plotData, setPlotData] = useState<PlotData | null>(null)

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "prepare": "husky install",
     "build": "nx run-many --target=build",
-    "lint": "nx run-many --target=lint",
+    "lint": "nx run-many --target=lint --quiet",
     "test": "nx run-many --target=test:ci",
     "clean": "nx run-many --target=clean",
     "type-check": "nx run-many --target=type-check"

packages/synapse-react-client/src/components/DialogBase.tsx

@@ -14,15 +14,18 @@ import {
 import React from 'react'
 import { HelpPopover, HelpPopoverProps } from './HelpPopover/HelpPopover'
 
+const EMPTY_OBJECT = {}
+
 export type CloseButtonProps = {
   sx?: SxProps
   onClick?: () => void
 }
 
 export const CLOSE_BUTTON_LABEL = 'close'
+const DEFAULT_CLOSEBUTTON_SX: SxProps = { color: 'grey.700' }
 
 export const CloseButton: React.FC<CloseButtonProps> = ({
-  sx = { color: 'grey.700' },
+  sx = DEFAULT_CLOSEBUTTON_SX,
   onClick,
 }) => {
   return (
@@ -62,7 +65,7 @@ export const DialogBase = ({
   maxWidth = 'sm',
   fullWidth = true,
   sx,
-  contentProps = {},
+  contentProps = EMPTY_OBJECT,
 }: DialogBaseProps) => {
   return (
     <Dialog

packages/synapse-react-client/src/components/DownloadCart/RequestDownloadCard.tsx

@@ -11,17 +11,20 @@ export type RequestDownloadCardProps = {
   onViewSharingSettingsClicked?: (benefactorId: string) => void
 }
 
+const DEFAULT_ON_VIEW_SHARING_SETTINGS_CLICKED: RequestDownloadCardProps['onViewSharingSettingsClicked'] =
+  benefactorEntityId =>
+    window.open(
+      `https://www.synapse.org/#!Synapse:${benefactorEntityId}`,
+      '_blank',
+    )
+
 export const REQUEST_DOWNLOAD_TITLE = 'Download Permission Required'
 export const RequestDownloadCard: React.FunctionComponent<
   RequestDownloadCardProps
 > = ({
   entityId,
   count,
-  onViewSharingSettingsClicked = benefactorEntityId =>
-    window.open(
-      `https://www.synapse.org/#!Synapse:${benefactorEntityId}`,
-      '_blank',
-    ),
+  onViewSharingSettingsClicked = DEFAULT_ON_VIEW_SHARING_SETTINGS_CLICKED,
 }: RequestDownloadCardProps) => {
   const { data: entityHeader, isLoading } = useGetEntityHeader(
     entityId,

packages/synapse-react-client/src/components/Forum/DiscussionReply.tsx

@@ -26,9 +26,12 @@ export type DiscussionReplyProps = {
   onClickLink?: () => void
 }
 
+const DEFAULT_ON_CLICK_LINK: DiscussionReplyProps['onClickLink'] = () =>
+  alert('This functionality has not been implemented yet')
+
 export const DiscussionReply: React.FC<DiscussionReplyProps> = ({
   reply,
-  onClickLink = () => alert('This functionality has not been implemented yet'),
+  onClickLink = DEFAULT_ON_CLICK_LINK,
 }) => {
   const [showReplyModal, setShowReplyModal] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)

packages/synapse-react-client/src/components/Plot/BarPlot.tsx

@@ -84,6 +84,12 @@ function getLayout(
   return layout
 }
 
+const DEFAULT_BARPLOT_PLOTSTYLE: PlotStyle = { backgroundColor: 'transparent' }
+const DEFAULT_BARPLOT_STYLE: React.CSSProperties = {
+  width: '100%',
+  height: '100%',
+}
+
 const BarPlot: FunctionComponent<BarPlotProps> = ({
   plotData,
   optionsConfig,
@@ -92,8 +98,8 @@ const BarPlot: FunctionComponent<BarPlotProps> = ({
   label,
   xMax,
   colors,
-  plotStyle = { backgroundColor: 'transparent' },
-  style = { width: '100%', height: '100%' },
+  plotStyle = DEFAULT_BARPLOT_PLOTSTYLE,
+  style = DEFAULT_BARPLOT_STYLE,
   onClick,
 }: BarPlotProps) => {
   return (

packages/synapse-react-client/src/components/Plot/DotPlot.tsx

@@ -140,21 +140,27 @@ function getPlotDataPoints(
   return data
 }
 
+const DEFAULT_DOTPLOT_PLOTSTYLE: PlotStyle = {
+  markerFill: '#515359',
+  markerLine: '#515359',
+  markerSize: 9,
+  backgroundColor: 'transparent',
+}
+const DEFAULT_DOTPLOT_STYLE: React.CSSProperties = {
+  width: '100%',
+  height: '100%',
+}
+
 const DotPlot: FunctionComponent<DotPlotProps> = ({
   plotData,
   optionsConfig,
   layoutConfig,
   label,
   id,
   xMax,
-  style = { width: '100%', height: '100%' },
+  style = DEFAULT_DOTPLOT_STYLE,
   markerSymbols,
-  plotStyle = {
-    markerFill: '#515359',
-    markerLine: '#515359',
-    markerSize: 9,
-    backgroundColor: 'transparent',
-  },
+  plotStyle = DEFAULT_DOTPLOT_PLOTSTYLE,
   onClick,
   isLegend = false,
   isXAxis = false,

packages/synapse-react-client/src/components/SynapseHomepage/SynapsePriceTableCell.tsx

@@ -8,7 +8,7 @@ export type SynapsePriceTableCellProps = {
 
 export const SynapsePriceTableCell: React.FunctionComponent<
   React.PropsWithChildren<SynapsePriceTableCellProps>
-> = ({ children, sx = {}, role = 'cell' }) => {
+> = ({ children, sx, role = 'cell' }) => {
   return (
     <Box
       sx={{

packages/synapse-react-client/src/components/TimelinePlot/TimelinePlotSpeciesSelector.tsx

@@ -15,7 +15,7 @@ export type TimelinePlotSpeciesSelectorProps = {
 }
 export const TimelinePlotSpeciesSelector = ({
   sql,
-  additionalFilters = [],
+  additionalFilters,
   species,
   setSpecies,
 }: TimelinePlotSpeciesSelectorProps) => {

packages/synapse-react-client/src/components/widgets/ElementWithTooltip.tsx

@@ -18,6 +18,10 @@ export type TooltipVisualProps = {
   border?: boolean
 }
 
+const DEFAULT_TOOLTIP_VISUAL_PROPS: Partial<TooltipVisualProps> = {
+  place: 'top',
+}
+
 /*****************************************
  *  The control needs to either have a child element or needs to have an image supplied
  *  If the child element is supplied the control renders the child applying additional properties
@@ -55,7 +59,7 @@ export const ElementWithTooltip = ({
   tooltipText,
   className = '',
   imageColor,
-  tooltipVisualProps = { place: 'top' },
+  tooltipVisualProps = DEFAULT_TOOLTIP_VISUAL_PROPS,
   children,
   darkTheme,
   size,