Convert .defaultProps to ES default parameters

awx/ui/eslint.config.mjs

@@ -214,6 +214,10 @@ export default defineConfig([
       'react/jsx-props-no-spreading': ['off'],
       'react/prefer-stateless-function': 'off',
       'react/prop-types': 'off',
+      // default values are expressed via ES default parameters (the React
+      // 18.3/19 migration away from the deprecated defaultProps), so accept a
+      // destructured default argument in place of a defaultProps entry
+      'react/require-default-props': ['error', { functions: 'defaultArguments' }],
       'react/sort-comp': ['error', {}],
       'jsx-a11y/label-has-for': 'off',
       'jsx-a11y/label-has-associated-control': 'off',

awx/ui/src/components/About/About.js

@@ -8,7 +8,7 @@ import { useLingui } from '@lingui/react/macro';
 import { AboutModal } from '@patternfly/react-core';
 import useBrandName from 'hooks/useBrandName';
 
-function About({ version, isOpen, onClose }) {
+function About({ version = null, isOpen = false, onClose }) {
   const { t } = useLingui();
   const brandName = useBrandName();
 
@@ -76,9 +76,4 @@ About.propTypes = {
   version: PropTypes.string,
 };
 
-About.defaultProps = {
-  isOpen: false,
-  version: null,
-};
-
 export default About;

awx/ui/src/components/AddRole/AddResourceRole.js

@@ -18,7 +18,13 @@ const readTeams = async (queryParams) => TeamsAPI.read(queryParams);
 
 const readTeamsOptions = async () => TeamsAPI.readOptions();
 
-function AddResourceRole({ onSave, onClose, roles, resource, onError }) {
+function AddResourceRole({
+  onSave,
+  onClose,
+  roles = {},
+  resource = {},
+  onError,
+}) {
   const { t } = useLingui();
 
   const userSearchColumns = useMemo(() => [
@@ -285,10 +291,5 @@ AddResourceRole.propTypes = {
   resource: PropTypes.shape(),
 };
 
-AddResourceRole.defaultProps = {
-  roles: {},
-  resource: {},
-};
-
 export { AddResourceRole as _AddResourceRole };
 export default AddResourceRole;

awx/ui/src/components/AddRole/CheckboxCard.js

@@ -17,8 +17,13 @@ const Checkbox = styled(PFCheckbox)`
   }
 `;
 
-function CheckboxCard(props) {
-  const { name, description, isSelected, onSelect, itemId } = props;
+function CheckboxCard({
+  name,
+  description = '',
+  isSelected = false,
+  onSelect = null,
+  itemId,
+}) {
   return (
     <CheckboxWrapper>
       <Checkbox
@@ -47,10 +52,4 @@ CheckboxCard.propTypes = {
   itemId: PropTypes.number.isRequired,
 };
 
-CheckboxCard.defaultProps = {
-  description: '',
-  isSelected: false,
-  onSelect: null,
-};
-
 export default CheckboxCard;

awx/ui/src/components/AddRole/SelectResourceStep.js

@@ -25,12 +25,12 @@ const QS_Config = (sortColumns) =>
     }`,
   });
 function SelectResourceStep({
-  searchColumns,
-  sortColumns,
-  displayKey,
-  onRowClick,
-  selectedLabel,
-  selectedResourceRows,
+  searchColumns = null,
+  sortColumns = null,
+  displayKey = 'name',
+  onRowClick = () => {},
+  selectedLabel = null,
+  selectedResourceRows = [],
   fetchItems,
   fetchOptions,
 }) {
@@ -150,14 +150,5 @@ SelectResourceStep.propTypes = {
   selectedResourceRows: PropTypes.arrayOf(PropTypes.object),
 };
 
-SelectResourceStep.defaultProps = {
-  searchColumns: null,
-  sortColumns: null,
-  displayKey: 'name',
-  onRowClick: () => {},
-  selectedLabel: null,
-  selectedResourceRows: [],
-};
-
 export { SelectResourceStep as _SelectResourceStep };
 export default SelectResourceStep;

awx/ui/src/components/AddRole/SelectRoleStep.js

@@ -7,12 +7,12 @@ import CheckboxCard from './CheckboxCard';
 import { SelectedList } from '../SelectedList';
 
 function RolesStep({
-  onRolesClick,
+  onRolesClick = () => {},
   roles,
-  selectedListKey,
-  selectedListLabel,
-  selectedResourceRows,
-  selectedRoleRows,
+  selectedListKey = 'name',
+  selectedListLabel = null,
+  selectedResourceRows = [],
+  selectedRoleRows = [],
 }) {
   const { t } = useLingui();
 
@@ -65,12 +65,4 @@ RolesStep.propTypes = {
   selectedRoleRows: PropTypes.arrayOf(PropTypes.object),
 };
 
-RolesStep.defaultProps = {
-  onRolesClick: () => {},
-  selectedListKey: 'name',
-  selectedListLabel: null,
-  selectedResourceRows: [],
-  selectedRoleRows: [],
-};
-
 export default RolesStep;

awx/ui/src/components/AnsibleSelect/AnsibleSelect.js

@@ -14,12 +14,12 @@ import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 function AnsibleSelect({
   id,
-  data,
-  isValid,
-  onBlur,
+  data = [],
+  isValid = true,
+  onBlur = () => {},
   value,
-  className,
-  isDisabled,
+  className = '',
+  isDisabled = false,
   onChange,
   name,
 }) {
@@ -62,14 +62,6 @@ const Option = shape({
   isDisabled: bool,
 });
 
-AnsibleSelect.defaultProps = {
-  data: [],
-  isValid: true,
-  onBlur: () => {},
-  className: '',
-  isDisabled: false,
-};
-
 AnsibleSelect.propTypes = {
   data: arrayOf(Option),
   id: string.isRequired,

awx/ui/src/components/AppContainer/PageHeaderToolbar.js

@@ -39,7 +39,7 @@ const UserName = styled.span`
 `;
 
 function PageHeaderToolbar({
-  isAboutDisabled,
+  isAboutDisabled = false,
   onAboutClick,
   onLogoutClick,
   loggedInUser,
@@ -239,8 +239,4 @@ PageHeaderToolbar.propTypes = {
   onLogoutClick: PropTypes.func.isRequired,
 };
 
-PageHeaderToolbar.defaultProps = {
-  isAboutDisabled: false,
-};
-
 export default PageHeaderToolbar;

awx/ui/src/components/CheckboxListItem/CheckboxListItem.js

@@ -79,7 +79,7 @@ const CheckboxListItem = ({
 };
 
 CheckboxListItem.propTypes = {
-  isSelected: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
   itemId: PropTypes.number.isRequired,
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,

awx/ui/src/components/CodeEditor/CodeEditor.js

@@ -86,15 +86,15 @@ AceEditor.displayName = 'AceEditor';
 function CodeEditor({
   id,
   value,
-  onChange,
+  onChange = () => {},
   onFocus,
   onBlur,
   mode,
-  readOnly,
-  hasErrors,
-  rows,
-  fullHeight,
-  className,
+  readOnly = false,
+  hasErrors = false,
+  rows = 6,
+  fullHeight = false,
+  className = '',
 }) {
   const { t } = useLingui();
   if (rows && typeof rows !== 'number' && rows !== 'auto') {
@@ -213,13 +213,4 @@ CodeEditor.propTypes = {
   rows: oneOfType([number, string]),
   className: string,
 };
-CodeEditor.defaultProps = {
-  readOnly: false,
-  onChange: () => {},
-  rows: 6,
-  fullHeight: false,
-  hasErrors: false,
-  className: '',
-};
-
 export default CodeEditor;

awx/ui/src/components/CodeEditor/CodeEditorField.js

@@ -18,11 +18,12 @@ function CodeEditorField({
   id,
   name,
   label,
-  tooltip,
-  helperText,
-  validate,
-  isRequired,
+  tooltip = null,
+  helperText = '',
+  validate = () => {},
+  isRequired = false,
   mode,
+  rows = 5,
   ...rest
 }) {
   const [field, meta, helpers] = useField({ name, validate });
@@ -47,6 +48,7 @@ function CodeEditorField({
           helpers.setValue(value);
         }}
         mode={mode}
+        rows={rows}
       />
     </FormGroup>
   );
@@ -63,12 +65,4 @@ CodeEditorField.propTypes = {
   rows: number,
 };
 
-CodeEditorField.defaultProps = {
-  helperText: '',
-  validate: () => {},
-  isRequired: false,
-  tooltip: null,
-  rows: 5,
-};
-
 export default CodeEditorField;

awx/ui/src/components/CodeEditor/VariablesDetail.js

@@ -18,11 +18,11 @@ import CodeEditor from './CodeEditor';
 import { JSON_MODE, YAML_MODE } from './constants';
 
 function VariablesDetail({
-  dataCy,
-  helpText,
+  dataCy = '',
+  helpText = '',
   value,
   label,
-  rows,
+  rows = null,
   fullHeight,
   name,
 }) {
@@ -158,12 +158,6 @@ VariablesDetail.propTypes = {
   helpText: oneOfType([node, string]),
   name: string.isRequired,
 };
-VariablesDetail.defaultProps = {
-  rows: null,
-  dataCy: '',
-  helpText: '',
-};
-
 function ModeToggle({
   id,
   label,

awx/ui/src/components/CodeEditor/VariablesField.js

@@ -29,17 +29,19 @@ const StyledCheckboxField = styled(CheckboxField)`
   margin-left: auto;
 `;
 
+const defaultValidators = {};
+
 function VariablesField({
   id,
   name,
   label,
-  readOnly,
-  promptId,
+  readOnly = false,
+  promptId = null,
   tooltip,
-  initialMode,
-  onModeChange,
-  isRequired,
-  validators,
+  initialMode = YAML_MODE,
+  onModeChange = () => {},
+  isRequired = false,
+  validators = defaultValidators,
 }) {
   const { t } = useLingui();
   // track focus manually, because the Code Editor library doesn't wire
@@ -192,15 +194,6 @@ VariablesField.propTypes = {
   isRequired: bool,
   validators: shape({}),
 };
-VariablesField.defaultProps = {
-  readOnly: false,
-  promptId: null,
-  initialMode: YAML_MODE,
-  onModeChange: () => {},
-  isRequired: false,
-  validators: {},
-};
-
 function VariablesFieldInternals({
   id,
   name,

awx/ui/src/components/ContentError/ContentError.js

@@ -15,7 +15,7 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { useSession } from 'contexts/Session';
 import ErrorDetail from '../ErrorDetail';
 
-function ContentError({ error, children, isNotFound }) {
+function ContentError({ error = null, children, isNotFound = false }) {
   const { t } = useLingui();
   const { logout } = useSession();
 
@@ -58,10 +58,5 @@ ContentError.propTypes = {
   error: instanceOf(Error),
   isNotFound: bool,
 };
-ContentError.defaultProps = {
-  error: null,
-  isNotFound: false,
-};
-
 export { ContentError as _ContentError };
 export default ContentError;

awx/ui/src/components/CopyButton/CopyButton.js

@@ -10,11 +10,11 @@ import ErrorDetail from '../ErrorDetail';
 function CopyButton({
   id,
   copyItem,
-  isDisabled,
+  isDisabled = false,
   onCopyStart,
   onCopyFinish,
   errorMessage,
-  ouiaId,
+  ouiaId = null,
 }) {
   const { t } = useLingui();
   const {
@@ -69,9 +69,4 @@ CopyButton.propTypes = {
   ouiaId: PropTypes.string,
 };
 
-CopyButton.defaultProps = {
-  isDisabled: false,
-  ouiaId: null,
-};
-
 export default CopyButton;