feat: add missing propTypes

packages/web/src/components/PowerInput/Popper.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import Paper from '@mui/material/Paper';
 import MuiPopper from '@mui/material/Popper';
 import Tab from '@mui/material/Tab';
@@ -5,8 +6,10 @@ import * as React from 'react';
 import Suggestions from 'components/PowerInput/Suggestions';
 import TabPanel from 'components/TabPanel';
 import { Tabs } from './style';
+
 const Popper = (props) => {
   const { open, anchorEl, data, onSuggestionClick } = props;
+
   return (
     <MuiPopper
       open={open}
@@ -34,4 +37,15 @@ const Popper = (props) => {
     </MuiPopper>
   );
 };
+
+Popper.propTypes = {
+  open: PropTypes.bool.isRequired,
+  anchorEl: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
+  data: PropTypes.array.isRequired,
+  onSuggestionClick: PropTypes.func,
+};
+
 export default Popper;

packages/web/src/components/PowerInput/SuggestionItem.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+
+const SuggestionItem = (props) => {
+  const { index, style, data, onSuggestionClick } = props;
+  const suboption = data[index];
+  return (
+    <ListItemButton
+      sx={{ pl: 4 }}
+      divider
+      onClick={() => onSuggestionClick(suboption)}
+      data-test="power-input-suggestion-item"
+      key={index}
+      style={style}
+    >
+      <ListItemText
+        primary={suboption.label}
+        primaryTypographyProps={{
+          variant: 'subtitle1',
+          title: 'Property name',
+          sx: { fontWeight: 700 },
+        }}
+        secondary={suboption.sampleValue || ''}
+        secondaryTypographyProps={{
+          variant: 'subtitle2',
+          title: 'Sample value',
+          noWrap: true,
+        }}
+      />
+    </ListItemButton>
+  );
+};
+
+SuggestionItem.propTypes = {
+  index: PropTypes.number.isRequired,
+  style: PropTypes.object,
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      sampleValue: PropTypes.string,
+    }),
+  ).isRequired,
+  onSuggestionClick: PropTypes.func.isRequired,
+};
+
+export default SuggestionItem;

packages/web/src/components/PowerInput/Suggestions.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Box from '@mui/material/Box';
@@ -13,52 +14,33 @@ import * as React from 'react';
 import { FixedSizeList } from 'react-window';
 import SearchInput from 'components/SearchInput';
 import useFormatMessage from 'hooks/useFormatMessage';
+import SuggestionItem from './SuggestionItem';
+
 const SHORT_LIST_LENGTH = 4;
 const LIST_ITEM_HEIGHT = 64;
+
 const computeListHeight = (currentLength) => {
   const numberOfRenderedItems = Math.min(SHORT_LIST_LENGTH, currentLength);
   return LIST_ITEM_HEIGHT * numberOfRenderedItems;
 };
+
 const getPartialArray = (array, length = array.length) => {
   return array.slice(0, length);
 };
+
 const renderItemFactory =
   ({ onSuggestionClick }) =>
-  (props) => {
-    const { index, style, data } = props;
-    const suboption = data[index];
-    return (
-      <ListItemButton
-        sx={{ pl: 4 }}
-        divider
-        onClick={() => onSuggestionClick(suboption)}
-        data-test="power-input-suggestion-item"
-        key={index}
-        style={style}
-      >
-        <ListItemText
-          primary={suboption.label}
-          primaryTypographyProps={{
-            variant: 'subtitle1',
-            title: 'Property name',
-            sx: { fontWeight: 700 },
-          }}
-          secondary={suboption.sampleValue || ''}
-          secondaryTypographyProps={{
-            variant: 'subtitle2',
-            title: 'Sample value',
-            noWrap: true,
-          }}
-        />
-      </ListItemButton>
-    );
-  };
+  (props) => (
+    <SuggestionItem {...props} onSuggestionClick={onSuggestionClick} />
+  );
+
 const Suggestions = (props) => {
   const formatMessage = useFormatMessage();
   const { data, onSuggestionClick = () => null } = props;
   const [current, setCurrent] = React.useState(0);
   const [listLength, setListLength] = React.useState(SHORT_LIST_LENGTH);
   const [filteredData, setFilteredData] = React.useState(data);
+
   React.useEffect(
     function syncOptions() {
       setFilteredData((filteredData) => {
@@ -70,6 +52,7 @@ const Suggestions = (props) => {
     },
     [data],
   );
+
   const renderItem = React.useMemo(
     () =>
       renderItemFactory({
@@ -77,15 +60,19 @@ const Suggestions = (props) => {
       }),
     [onSuggestionClick],
   );
+
   const expandList = () => {
     setListLength(Infinity);
   };
+
   const collapseList = () => {
     setListLength(SHORT_LIST_LENGTH);
   };
+
   React.useEffect(() => {
     setListLength(SHORT_LIST_LENGTH);
   }, [current]);
+
   const onSearchChange = React.useMemo(
     () =>
       throttle((event) => {
@@ -111,6 +98,7 @@ const Suggestions = (props) => {
       }, 400),
     [data],
   );
+
   return (
     <Paper elevation={0} sx={{ width: '100%' }}>
       <Box px={2} pb={2}>
@@ -182,4 +170,16 @@ const Suggestions = (props) => {
     </Paper>
   );
 };
+
+Suggestions.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      output: PropTypes.arrayOf(PropTypes.object).isRequired,
+    }),
+  ).isRequired,
+  onSuggestionClick: PropTypes.func,
+};
+
 export default Suggestions;

packages/web/src/components/PowerInput/data.js

@@ -1,5 +1,6 @@
 const joinBy = (delimiter = '.', ...args) =>
   args.filter(Boolean).join(delimiter);
+
 const process = ({ data, parentKey, index, parentLabel = '' }) => {
   if (typeof data !== 'object') {
     return [
@@ -10,10 +11,13 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
       },
     ];
   }
+
   const entries = Object.entries(data);
+
   return entries.flatMap(([name, sampleValue]) => {
     const label = joinBy('.', parentLabel, index?.toString(), name);
     const value = joinBy('.', parentKey, index?.toString(), name);
+
     if (Array.isArray(sampleValue)) {
       return sampleValue.flatMap((item, index) =>
         process({
@@ -21,9 +25,10 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
           parentKey: value,
           index,
           parentLabel: label,
-        })
+        }),
       );
     }
+
     if (typeof sampleValue === 'object' && sampleValue !== null) {
       return process({
         data: sampleValue,
@@ -40,8 +45,10 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
     ];
   });
 };
+
 export const processStepWithExecutions = (steps) => {
   if (!steps) return [];
+
   return steps
     .filter((step) => {
       const hasExecutionSteps = !!step.executionSteps?.length;

packages/web/src/components/PowerInput/index.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import FormHelperText from '@mui/material/FormHelperText';
 import InputLabel from '@mui/material/InputLabel';
@@ -147,4 +148,21 @@ const PowerInput = (props) => {
     />
   );
 };
+
+PowerInput.propTypes = {
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  defaultValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  description: PropTypes.string,
+  docUrl: PropTypes.string,
+  clickToCopy: PropTypes.bool,
+  disabled: PropTypes.bool,
+  shouldUnregister: PropTypes.bool,
+};
+
 export default PowerInput;