Merge pull request #433 from bento-platform/refact/rm-defaultprops

refact: remove use of deprecated defaultProps

src/components/ForbiddenContent.tsx

@@ -2,18 +2,16 @@ import type { ReactNode } from "react";
 import { Layout, Result } from "antd";
 import { LAYOUT_CONTENT_STYLE } from "@/styles/layoutContent";
 
-export type ForbiddenContentProps = { message: ReactNode };
+export type ForbiddenContentProps = { message?: ReactNode };
+
+const DEFAULT_MESSAGE = "You do not have permission to view this content.";
 
 const ForbiddenContent = ({ message }: ForbiddenContentProps) => (
   <Layout>
     <Layout.Content style={LAYOUT_CONTENT_STYLE}>
-      <Result status="error" title="Forbidden" subTitle={message} />
+      <Result status="error" title="Forbidden" subTitle={message ?? DEFAULT_MESSAGE} />
     </Layout.Content>
   </Layout>
 );
 
-ForbiddenContent.defaultProps = {
-  message: "You do not have permission to view this content.",
-};
-
 export default ForbiddenContent;

src/components/datasets/DatasetFormModal.js

@@ -92,12 +92,8 @@ const DatasetFormModal = ({ project, mode, initialValue, onCancel, onOk, open })
   );
 };
 
-DatasetFormModal.defaultProps = {
-  mode: FORM_MODE_ADD,
-};
-
 DatasetFormModal.propTypes = {
-  mode: propTypesFormMode,
+  mode: propTypesFormMode.isRequired,
   initialValue: datasetPropTypesShape,
 
   onOk: PropTypes.func,

src/components/datasets/linked_field_set/LinkedFieldSetModal.js

@@ -84,11 +84,8 @@ const LinkedFieldSetModal = ({ dataset, linkedFieldSetIndex, linkedFieldSet, mod
     </Modal>
   );
 };
-LinkedFieldSetModal.defaultProps = {
-  mode: FORM_MODE_ADD,
-};
 LinkedFieldSetModal.propTypes = {
-  mode: propTypesFormMode,
+  mode: propTypesFormMode.isRequired,
   open: PropTypes.bool,
   dataset: datasetPropTypesShape,
   onSubmit: PropTypes.func,

src/components/explorer/OntologyTerm.js

@@ -19,7 +19,7 @@ export const conditionalOntologyRender = (field) => (_, record) => {
   return EM_DASH;
 };
 
-const OntologyTerm = memo(({ term, renderLabel, br }) => {
+const OntologyTerm = memo(({ term, renderLabel = id, br = false }) => {
   const { resourcesTuple } = useContext(ExplorerIndividualContext);
 
   // TODO: perf: might be slow to generate this over and over
@@ -76,10 +76,6 @@ OntologyTerm.propTypes = {
   renderLabel: PropTypes.func,
   br: PropTypes.bool,
 };
-OntologyTerm.defaultProps = {
-  renderLabel: id,
-  br: false,
-};
 
 export const OntologyTermList = (items) => {
   if (!Array.isArray(items)) {

src/components/manager/DatasetTitleDisplay.tsx

@@ -7,10 +7,10 @@ import MonospaceText from "@/components/common/MonospaceText";
 
 export type DatasetTitleDisplayProps = {
   datasetID: string;
-  link: boolean;
+  link?: boolean;
 };
 
-const DatasetTitleDisplay = ({ datasetID, link }: DatasetTitleDisplayProps) => {
+const DatasetTitleDisplay = ({ datasetID, link = false }: DatasetTitleDisplayProps) => {
   // @ts-expect-error We have not typed the state yet
   const datasetsByID = useSelector((state) => state.projects.datasetsByID);
 
@@ -30,8 +30,5 @@ const DatasetTitleDisplay = ({ datasetID, link }: DatasetTitleDisplayProps) => {
   if (!link) return title;
   return <Link to={`/data/manager/projects/${project}#dataset-${datasetID}`}>{title}</Link>;
 };
-DatasetTitleDisplay.defaultProps = {
-  link: false,
-};
 
 export default DatasetTitleDisplay;

src/components/manager/DatasetTreeSelect.js

@@ -62,15 +62,11 @@ const DatasetTreeSelect = forwardRef(({ value, onChange, style, idFormat }, ref)
   );
 });
 
-DatasetTreeSelect.defaultProps = {
-  idFormat: ID_FORMAT_PROJECT_DATASET,
-};
-
 DatasetTreeSelect.propTypes = {
   style: PropTypes.object,
   value: PropTypes.string,
   onChange: PropTypes.func,
-  idFormat: PropTypes.oneOf([ID_FORMAT_PROJECT_DATASET, ID_FORMAT_DATASET]),
+  idFormat: PropTypes.oneOf([ID_FORMAT_PROJECT_DATASET, ID_FORMAT_DATASET]).isRequired,
 };
 
 export default DatasetTreeSelect;

src/components/manager/DropBoxTreeSelect.js

@@ -35,7 +35,7 @@ const generateFileTree = (directory, valid, folderMode, basePrefix) =>
       };
     });
 
-const DropBoxTreeSelect = forwardRef(({ folderMode, nodeEnabled, basePrefix, ...props }, ref) => {
+const DropBoxTreeSelect = forwardRef(({ folderMode = false, nodeEnabled, basePrefix, ...props }, ref) => {
   const { tree } = useDropBox();
 
   const fileTree = useMemo(
@@ -67,8 +67,4 @@ DropBoxTreeSelect.propTypes = {
   basePrefix: PropTypes.string,
 };
 
-DropBoxTreeSelect.defaultProps = {
-  folderMode: false,
-};
-
 export default DropBoxTreeSelect;

src/components/manager/ProjectTitleDisplay.tsx

@@ -7,7 +7,7 @@ import { useProjects } from "@/modules/metadata/hooks";
 
 export type ProjectTitleDisplayProps = {
   projectID: string;
-  link: boolean;
+  link?: boolean;
 };
 
 const ProjectTitleDisplay = ({ projectID, link }: ProjectTitleDisplayProps) => {
@@ -28,8 +28,4 @@ const ProjectTitleDisplay = ({ projectID, link }: ProjectTitleDisplayProps) => {
   return <Link to={`/data/manager/projects/${projectID}`}>{title}</Link>;
 };
 
-ProjectTitleDisplay.defaultProps = {
-  link: false,
-};
-
 export default ProjectTitleDisplay;

src/components/manager/projects/ProjectJsonSchema.js

@@ -22,7 +22,7 @@ const CODE_STYLE = {
   borderRadius: "3px",
 };
 
-export const ExtraPropertiesCode = ({ tooltip }) => {
+export const ExtraPropertiesCode = ({ tooltip = false }) => {
   if (tooltip) {
     return <span style={CODE_STYLE}>extra_properties</span>;
   }
@@ -33,10 +33,6 @@ ExtraPropertiesCode.propTypes = {
   tooltip: PropTypes.bool,
 };
 
-ExtraPropertiesCode.defaultProps = {
-  tooltip: false,
-};
-
 const ProjectJsonSchema = ({ projectSchema }) => {
   const dispatch = useDispatch();