Dev X: Destructure props in functional component's argument (#2582)

frontend/components/AuthAnyMaintainerGlobalAdminRoutes/AuthAnyMaintainerGlobalAdminRoutes.tsx

@@ -23,11 +23,9 @@ const { HOME } = paths;
 /**
  * Checks if a user is a global admin or global maintainer when routing
  */
-const AuthAnyMaintainerGlobalAdminRoutes = (
+const AuthAnyMaintainerGlobalAdminRoutes = ({
-  props: IAuthAnyMaintainerGlobalAdminRoutesProps
+  children,
-): JSX.Element | null => {
+}: IAuthAnyMaintainerGlobalAdminRoutesProps): JSX.Element | null => {
-  const { children } = props;
-
   const dispatch = useDispatch();
   const user = useSelector((state: IRootState) => state.auth.user);
 

frontend/components/AuthGlobalAdminMaintainerRoutes/AuthGlobalAdminMaintainerRoutes.tsx

@@ -23,11 +23,9 @@ const { HOME } = paths;
 /**
  * Checks if a user is a global admin or global maintainer when routing
  */
-const AuthGlobalAdminMaintainerRoutes = (
+const AuthGlobalAdminMaintainerRoutes = ({
-  props: IAuthGlobalAdminMaintainerRoutesProps
+  children,
-) => {
+}: IAuthGlobalAdminMaintainerRoutesProps) => {
-  const { children } = props;
-
   const dispatch = useDispatch();
   const user = useSelector((state: IRootState) => state.auth.user);
 

frontend/components/IconToolTip/IconToolTip.tsx

@@ -8,8 +8,11 @@ interface IIconToolTipProps {
 }
 
 // TODO: handle html text better. possibly use 'children' prop for html
-const IconToolTip = (props: IIconToolTipProps): JSX.Element => {
+const IconToolTip = ({
-  const { text, isHtml, issue } = props;
+  text,
+  isHtml,
+  issue,
+}: IIconToolTipProps): JSX.Element => {
   let svgIcon = (
     <svg
       width="16"

frontend/components/InfoBanner/InfoBanner.tsx

@@ -8,8 +8,7 @@ interface IInfoBannerProps {
   className?: string;
 }
 
-const InfoBanner = (props: IInfoBannerProps): JSX.Element => {
+const InfoBanner = ({ children, className }: IInfoBannerProps): JSX.Element => {
-  const { children, className } = props;
   const wrapperClasses = classNames(baseClass, className);
 
   return <div className={wrapperClasses}>{children}</div>;

frontend/components/PremiumTierRoutes/PremiumTierRoutes.tsx

@@ -18,9 +18,9 @@ interface IRootState {
 
 const { FLEET_403 } = paths;
 
-const PremiumTierRoutes = (props: IPremiumTierRoutes): JSX.Element | null => {
+const PremiumTierRoutes = ({
-  const { children } = props;
+  children,
-
+}: IPremiumTierRoutes): JSX.Element | null => {
   const dispatch = useDispatch();
   const config = useSelector((state: IRootState) => state.app.config);
 

frontend/components/TableContainer/DataTable/DropdownCell/DropdownCell.tsx

@@ -14,8 +14,11 @@ interface IDropdownCellProps {
   onChange: (value: any) => void;
 }
 
-const DropdownCell = (props: IDropdownCellProps): JSX.Element => {
+const DropdownCell = ({
-  const { options, onChange, placeholder } = props;
+  options,
+  onChange,
+  placeholder,
+}: IDropdownCellProps): JSX.Element => {
   return (
     <div className={baseClass}>
       <Dropdown

frontend/components/TableContainer/DataTable/HeaderCell/HeaderCell.tsx

@@ -5,9 +5,7 @@ interface IHeaderCellProps {
   isSortedDesc?: boolean;
 }
 
-const HeaderCell = (props: IHeaderCellProps): JSX.Element => {
+const HeaderCell = ({ value, isSortedDesc }: IHeaderCellProps): JSX.Element => {
-  const { value, isSortedDesc } = props;
-
   let sortArrowClass = "";
   if (isSortedDesc === undefined) {
     sortArrowClass = "";

frontend/components/TableContainer/DataTable/IconCell/IconCell.tsx

@@ -7,11 +7,9 @@ interface IIconTooltipCellProps<T> {
   value: string;
 }
 
-const IconTooltipCell = (
+const IconTooltipCell = ({
-  props: IIconTooltipCellProps<any>
+  value,
-): JSX.Element | null => {
+}: IIconTooltipCellProps<any>): JSX.Element | null => {
-  const { value } = props;
-
   // The value passed in must be a valid FleetIcon name
   return <FleetIcon name={value} />;
 };

frontend/components/TableContainer/DataTable/IconTooltipCell/IconTooltipCell.tsx

@@ -7,11 +7,9 @@ interface IIconTooltipCellProps<T> {
   value: string;
 }
 
-const IconTooltipCell = (
+const IconTooltipCell = ({
-  props: IIconTooltipCellProps<any>
+  value,
-): JSX.Element | null => {
+}: IIconTooltipCellProps<any>): JSX.Element | null => {
-  const { value } = props;
-
   if (isEmpty(value)) {
     return null;
   }

frontend/components/TableContainer/DataTable/LinkCell/LinkCell.tsx

@@ -10,9 +10,7 @@ interface ILinkCellProps<T> {
   title?: string;
 }
 
-const LinkCell = (props: ILinkCellProps<any>): JSX.Element => {
+const LinkCell = ({ value, path, title }: ILinkCellProps<any>): JSX.Element => {
-  const { value, path, title } = props;
-
   const dispatch = useDispatch();
 
   const onClick = (): void => {

frontend/components/TableContainer/DataTable/PillCell/PillCell.tsx

@@ -12,8 +12,7 @@ const generateClassTag = (rawValue: string): string => {
   return rawValue.replace(" ", "-").toLowerCase();
 };
 
-const PillCell = (props: IPillCellProps): JSX.Element => {
+const PillCell = ({ value, customIdPrefix }: IPillCellProps): JSX.Element => {
-  const { value, customIdPrefix } = props;
   const [pillText, id] = value;
 
   const pillClassName = classnames(

frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx

@@ -9,9 +9,7 @@ const generateClassTag = (rawValue: string): string => {
   return rawValue.replace(" ", "-").toLowerCase();
 };
 
-const StatusCell = (props: IStatusCellProps): JSX.Element => {
+const StatusCell = ({ value }: IStatusCellProps): JSX.Element => {
-  const { value } = props;
-
   const statusClassName = classnames(
     "data-table__status",
     `data-table__status--${generateClassTag(value)}`

frontend/components/TableContainer/DataTable/TextCell/TextCell.tsx

@@ -6,13 +6,11 @@ interface ITextCellProps {
   greyed?: string;
 }
 
-const TextCell = (props: ITextCellProps): JSX.Element => {
+const TextCell = ({
-  const {
+  value,
-    value,
+  formatter = (val) => val, // identity function if no formatter is provided
-    formatter = (val) => val, // identity function if no formatter is provided
+  greyed,
-    greyed,
+}: ITextCellProps): JSX.Element => {
-  } = props;
-
   let val = value;
 
   if (typeof value === "boolean") {

frontend/components/forms/fields/Radio/Radio.tsx

@@ -14,17 +14,16 @@ interface IRadioProps {
   disabled?: boolean;
 }
 
-const Radio = (props: IRadioProps): JSX.Element => {
+const Radio = ({
-  const {
+  className,
-    className,
+  id,
-    id,
+  name,
-    name,
+  value,
-    value,
+  checked,
-    checked,
+  disabled,
-    disabled,
+  label,
-    label,
+  onChange,
-    onChange,
+}: IRadioProps): JSX.Element => {
-  } = props;
   const wrapperClasses = classnames(baseClass, className);
 
   const radioControlClass = classnames({

frontend/components/forms/fields/Slider/Slider.jsx

@@ -7,7 +7,7 @@ import FormField from "components/forms/FormField";
 
 const Slider = (props) => {
   const { onChange, value, inactiveText = "Off", activeText = "On" } = props;
-  const baseClass = "kolide-slider";
+  const baseClass = "fleet-slider";
 
   const sliderBtnClass = classnames(baseClass, {
     [`${baseClass}--active`]: value,

frontend/components/forms/fields/Slider/_styles.scss

@@ -1,4 +1,4 @@
-.kolide-slider {
+.fleet-slider {
   transition: background-color 150ms ease-in-out;
   background-color: $core-fleet-black;
   border-radius: 12px;

frontend/components/policies/PoliciesPageWrapper/PoliciesPageWrapper.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-const PoliciesPageWrapper = (props: {
+const PoliciesPageWrapper = ({
+  children,
+}: {
   children: React.ReactNode;
 }): React.ReactNode | null => {
-  const { children } = props;
-
   return children || null;
 };
 

frontend/components/side_panels/HostSidePanel/HostSidePanel.tsx

@@ -25,15 +25,13 @@ interface IHostSidePanelProps {
   canAddNewLabel: boolean;
 }
 
-const HostSidePanel = (props: IHostSidePanelProps): JSX.Element => {
+const HostSidePanel = ({
-  const {
+  labels,
-    labels,
+  onAddLabelClick,
-    onAddLabelClick,
+  onLabelClick,
-    onLabelClick,
+  selectedFilter,
-    selectedFilter,
+  canAddNewLabel,
-    canAddNewLabel,
+}: IHostSidePanelProps): JSX.Element => {
-  } = props;
-
   const [labelFilter, setLabelFilter] = useState<string>("");
 
   const onFilterLabels = useCallback(

frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.tsx

@@ -38,8 +38,11 @@ interface IPanelGroupItemProps {
   isSelected: boolean;
 }
 
-const PanelGroupItem = (props: IPanelGroupItemProps): JSX.Element => {
+const PanelGroupItem = ({
-  const { item, onLabelClick, isSelected } = props;
+  item,
+  onLabelClick,
+  isSelected,
+}: IPanelGroupItemProps): JSX.Element => {
   const {
     count,
     display_text: displayText,

frontend/pages/admin/SettingsWrapper/SettingsWrapper.tsx

@@ -45,12 +45,10 @@ const getTabIndex = (path: string): number => {
 
 const baseClass = "settings-wrapper";
 
-const SettingsWrapper = (props: ISettingsWrapperProp): JSX.Element => {
+const SettingsWrapper = ({
-  const {
+  children,
-    children,
+  location: { pathname },
-    location: { pathname },
+}: ISettingsWrapperProp): JSX.Element => {
-  } = props;
-
   // Add Teams tab for premium tier only
   const config = useSelector((state: IRootState) => state.app.config);
 

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/AgentOptionsPage/AgentOptionsPage.tsx

@@ -32,10 +32,9 @@ interface IRootState {
   };
 }
 
-const AgentOptionsPage = (props: IAgentOptionsPageProps): JSX.Element => {
+const AgentOptionsPage = ({
-  const {
+  params: { team_id },
-    params: { team_id },
+}: IAgentOptionsPageProps): JSX.Element => {
-  } = props;
   const teamId = parseInt(team_id, 10);
   const dispatch = useDispatch();
   const team = useSelector((state: IRootState) => {

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/MembersPage.tsx

@@ -72,10 +72,9 @@ const memoizedGetTeams = memoize(getTeams);
 // with the same table query params after we have made an edit to a user.
 let tableQueryData = {};
 
-const MembersPage = (props: IMembersPageProps): JSX.Element => {
+const MembersPage = ({
-  const {
+  params: { team_id },
-    params: { team_id },
+}: IMembersPageProps): JSX.Element => {
-  } = props;
   const teamId = parseInt(team_id, 10);
   const dispatch = useDispatch();
 

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/components/AddMemberModal/AddMemberModal.tsx

@@ -16,9 +16,12 @@ interface IAddMemberModal {
   onSubmit: (userIds: INewMembersBody) => void;
 }
 
-const AddMemberModal = (props: IAddMemberModal): JSX.Element => {
+const AddMemberModal = ({
-  const { disabledMembers, onCancel, onSubmit, team } = props;
+  disabledMembers,
-
+  onCancel,
+  onSubmit,
+  team,
+}: IAddMemberModal): JSX.Element => {
   const [selectedMembers, setSelectedMembers] = useState([]);
 
   const onChangeDropdown = useCallback(

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/components/AutocompleteDropdown/AutocompleteDropdown.tsx

@@ -56,21 +56,17 @@ const generateOptionLabel = (user: IUser, team: ITeam): string => {
   return user.name;
 };
 
-const AutocompleteDropdown = (
+const AutocompleteDropdown = ({
-  props: IAutocompleteDropdownProps
+  className,
-): JSX.Element => {
+  disabled,
-  const {
+  disabledOptions,
-    className,
+  placeholder,
-    disabled,
+  onChange,
-    disabledOptions,
+  id,
-    placeholder,
+  resourceUrl,
-    onChange,
+  value,
-    id,
+  team,
-    resourceUrl,
+}: IAutocompleteDropdownProps): JSX.Element => {
-    value,
-    team,
-  } = props;
-
   const wrapperClass = classnames(baseClass, className);
 
   // We disable any filtering client side as the server filters the results

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/components/RemoveMemberModal/RemoveMemberModal.tsx

@@ -12,9 +12,12 @@ interface IDeleteTeamModalProps {
   onCancel: () => void;
 }
 
-const RemoveMemberModal = (props: IDeleteTeamModalProps): JSX.Element => {
+const RemoveMemberModal = ({
-  const { memberName, teamName, onSubmit, onCancel } = props;
+  memberName,
-
+  teamName,
+  onSubmit,
+  onCancel,
+}: IDeleteTeamModalProps): JSX.Element => {
   return (
     <Modal title={"Delete team"} onExit={onCancel} className={baseClass}>
       <form className={`${baseClass}__form`}>

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx

@@ -77,13 +77,11 @@ const getTabIndex = (path: string, teamId: number): number => {
   });
 };
 
-const TeamDetailsWrapper = (props: ITeamDetailsPageProps): JSX.Element => {
+const TeamDetailsWrapper = ({
-  const {
+  children,
-    children,
+  location: { pathname },
-    location: { pathname },
+  params: { team_id },
-    params: { team_id },
+}: ITeamDetailsPageProps): JSX.Element => {
-  } = props;
-
   const isLoadingTeams = useSelector(
     (state: IRootState) => state.entities.teams.loading
   );

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/components/AddHostsModal/AddHostsRedirectModal.tsx

@@ -9,9 +9,10 @@ interface IAddHostsModalProps {
 
 const baseClass = "add-hosts-redirect-modal";
 
-const AddHostsRedirectModal = (props: IAddHostsModalProps): JSX.Element => {
+const AddHostsRedirectModal = ({
-  const { onCancel, onSubmit } = props;
+  onCancel,
-
+  onSubmit,
+}: IAddHostsModalProps): JSX.Element => {
   return (
     <Modal title={"Add hosts"} onExit={onCancel} className={baseClass}>
       <div className={`${baseClass}__modal-body`}>

frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/CreateTeamModal.tsx

@@ -17,9 +17,10 @@ interface ICreateTeamModalProps {
   onSubmit: (formData: ICreateTeamFormData) => void;
 }
 
-const CreateTeamModal = (props: ICreateTeamModalProps): JSX.Element => {
+const CreateTeamModal = ({
-  const { onCancel, onSubmit } = props;
+  onCancel,
-
+  onSubmit,
+}: ICreateTeamModalProps): JSX.Element => {
   const [name, setName] = useState("");
 
   const onInputChange = useCallback(

frontend/pages/admin/TeamManagementPage/components/DeleteTeamModal/DeleteTeamModal.tsx

@@ -11,9 +11,11 @@ interface IDeleteTeamModalProps {
   onCancel: () => void;
 }
 
-const DeleteTeamModal = (props: IDeleteTeamModalProps): JSX.Element => {
+const DeleteTeamModal = ({
-  const { name, onSubmit, onCancel } = props;
+  name,
-
+  onSubmit,
+  onCancel,
+}: IDeleteTeamModalProps): JSX.Element => {
   return (
     <Modal title={"Delete team"} onExit={onCancel} className={baseClass}>
       <form className={`${baseClass}__form`}>

frontend/pages/admin/TeamManagementPage/components/EditTeamModal/EditTeamModal.tsx

@@ -17,9 +17,11 @@ interface IEditTeamModalProps {
   defaultName: string;
 }
 
-const EditTeamModal = (props: IEditTeamModalProps): JSX.Element => {
+const EditTeamModal = ({
-  const { onCancel, onSubmit, defaultName } = props;
+  onCancel,
-
+  onSubmit,
+  defaultName,
+}: IEditTeamModalProps): JSX.Element => {
   const [name, setName] = useState(defaultName);
 
   const onInputChange = useCallback(

frontend/pages/admin/UserManagementPage/components/DeleteUserForm/DeleteUserForm.tsx

@@ -9,9 +9,11 @@ interface IDeleteUserForm {
   onCancel: () => void;
 }
 
-const DeleteUserForm = (props: IDeleteUserForm): JSX.Element => {
+const DeleteUserForm = ({
-  const { name, onDelete, onCancel } = props;
+  name,
-
+  onDelete,
+  onCancel,
+}: IDeleteUserForm): JSX.Element => {
   return (
     <div className={baseClass}>
       <p>

frontend/pages/admin/UserManagementPage/components/EditUserModal/EditUserModal.tsx

@@ -21,21 +21,19 @@ interface IEditUserModalProps {
 
 const baseClass = "edit-user-modal";
 
-const EditUserModal = (props: IEditUserModalProps): JSX.Element => {
+const EditUserModal = ({
-  const {
+  onCancel,
-    onCancel,
+  onSubmit,
-    onSubmit,
+  defaultName,
-    defaultName,
+  defaultEmail,
-    defaultEmail,
+  defaultGlobalRole,
-    defaultGlobalRole,
+  defaultTeams,
-    defaultTeams,
+  availableTeams,
-    availableTeams,
+  isPremiumTier,
-    isPremiumTier,
+  smtpConfigured,
-    smtpConfigured,
+  canUseSso,
-    canUseSso,
+  isSsoEnabled,
-    isSsoEnabled,
+}: IEditUserModalProps): JSX.Element => {
-  } = props;
-
   return (
     <Modal
       title="Edit user"

frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/SelectedTeamsForm.tsx

@@ -119,8 +119,11 @@ const useSelectedTeamState = (
   return [teamsFormList, updateSelectedTeams] as const;
 };
 
-const SelectedTeamsForm = (props: ISelectedTeamsFormProps): JSX.Element => {
+const SelectedTeamsForm = ({
-  const { availableTeams, usersCurrentTeams, onFormChange } = props;
+  availableTeams,
+  usersCurrentTeams,
+  onFormChange,
+}: ISelectedTeamsFormProps): JSX.Element => {
   const [teamsFormList, updateSelectedTeams] = useSelectedTeamState(
     availableTeams,
     usersCurrentTeams,

frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx

@@ -122,8 +122,6 @@ class UserForm extends Component<ICreateUserFormProps, ICreateUserFormState> {
       },
       isGlobalUser: props.defaultGlobalRole !== null,
     };
-
-    const { isPremiumTier } = props;
   }
 
   onInputChange = (formField: string): ((value: string) => void) => {

frontend/pages/hosts/HostDetailsPage/SelectQueryModal/SelectQueryModal.jsx

@@ -35,16 +35,14 @@ const onQueryHostSaved = (host, selectedQuery, dispatch) => {
   );
 };
 
-const SelectQueryModal = (props) => {
+const SelectQueryModal = ({
-  const {
+  host,
-    host,
+  onCancel,
-    onCancel,
+  dispatch,
-    dispatch,
+  queries,
-    queries,
+  queryErrors,
-    queryErrors,
+  isOnlyObserver,
-    isOnlyObserver,
+}) => {
-  } = props;
-
   let queriesAvailableToRun = queries;
 
   if (isOnlyObserver) {

frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx

@@ -45,9 +45,12 @@ const getHiddenColumns = (columns) => {
     .map((column) => column.accessor);
 };
 
-const EditColumnsModal = (props) => {
+const EditColumnsModal = ({
-  const { columns, hiddenColumns, onSaveColumns, onCancelColumns } = props;
+  columns,
-
+  hiddenColumns,
+  onSaveColumns,
+  onCancelColumns,
+}) => {
   const [columnItems, updateColumnItems] = useCheckboxListStateManagement(
     columns,
     hiddenColumns

frontend/pages/packs/EditPackPage/components/RemovePackQueryModal/RemovePackQueryModal.tsx

@@ -13,10 +13,12 @@ interface IRemovePackQueryModalProps {
   selectedQueryIds: number[];
 }
 
-const RemovePackQueryModal = (
+const RemovePackQueryModal = ({
-  props: IRemovePackQueryModalProps
+  onCancel,
-): JSX.Element => {
+  onSubmit,
-  const { onCancel, onSubmit, selectedQuery, selectedQueryIds } = props;
+  selectedQuery,
+  selectedQueryIds,
+}: IRemovePackQueryModalProps): JSX.Element => {
   const queryOrQueries =
     selectedQuery || selectedQueryIds?.length === 1 ? "query" : "queries";
   return (

frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesListWrapper.tsx

@@ -20,18 +20,16 @@ interface IPoliciesListWrapperProps {
   tableType?: string;
 }
 
-const PoliciesListWrapper = (props: IPoliciesListWrapperProps): JSX.Element => {
+const PoliciesListWrapper = ({
-  const {
+  policiesList,
-    policiesList,
+  isLoading,
-    isLoading,
+  onRemovePoliciesClick,
-    onRemovePoliciesClick,
+  toggleAddPolicyModal,
-    toggleAddPolicyModal,
+  resultsTitle,
-    resultsTitle,
+  selectedTeamId,
-    selectedTeamId,
+  canAddOrRemovePolicy,
-    canAddOrRemovePolicy,
+  tableType,
-    tableType,
+}: IPoliciesListWrapperProps): JSX.Element => {
-  } = props;
-
   const NoPolicies = () => {
     return (
       <div className={`${noPoliciesClass}`}>

frontend/pages/policies/ManagePoliciesPage/components/RemovePoliciesModal/RemovePoliciesModal.tsx

@@ -10,9 +10,10 @@ interface IRemovePoliciesModalProps {
   onSubmit: () => void;
 }
 
-const RemovePoliciesModal = (props: IRemovePoliciesModalProps): JSX.Element => {
+const RemovePoliciesModal = ({
-  const { onCancel, onSubmit } = props;
+  onCancel,
-
+  onSubmit,
+}: IRemovePoliciesModalProps): JSX.Element => {
   return (
     <Modal title={"Remove policies"} onExit={onCancel} className={baseClass}>
       <div className={baseClass}>

frontend/pages/queries/ManageQueriesPage/components/RemoveQueryModal/RemoveQueryModal.tsx

@@ -10,9 +10,10 @@ interface IRemoveQueryModalProps {
   onSubmit: () => void;
 }
 
-const RemoveQueryModal = (props: IRemoveQueryModalProps): JSX.Element => {
+const RemoveQueryModal = ({
-  const { onCancel, onSubmit } = props;
+  onCancel,
-
+  onSubmit,
+}: IRemoveQueryModalProps): JSX.Element => {
   return (
     <Modal title={"Delete query"} onExit={onCancel} className={baseClass}>
       <div className={baseClass}>

frontend/pages/schedule/ManageSchedulePage/ManageSchedulePage.tsx

@@ -135,10 +135,9 @@ interface ITeamOptions {
   value: string | number;
 }
 
-const ManageSchedulePage = (props: ITeamSchedulesPageProps): JSX.Element => {
+const ManageSchedulePage = ({
-  const {
+  params: { team_id },
-    params: { team_id },
+}: ITeamSchedulesPageProps): JSX.Element => {
-  } = props;
   const teamId = parseInt(team_id, 10);
   const dispatch = useDispatch();
   const { MANAGE_PACKS } = paths;

frontend/pages/schedule/ManageSchedulePage/components/RemoveScheduledQueryModal/RemoveScheduledQueryModal.tsx

@@ -10,11 +10,10 @@ interface IRemoveScheduledQueryModalProps {
   onSubmit: () => void;
 }
 
-const RemoveScheduledQueryModal = (
+const RemoveScheduledQueryModal = ({
-  props: IRemoveScheduledQueryModalProps
+  onCancel,
-): JSX.Element => {
+  onSubmit,
-  const { onCancel, onSubmit } = props;
+}: IRemoveScheduledQueryModalProps): JSX.Element => {
-
   return (
     <Modal
       title={"Remove scheduled query"}

frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/ScheduleListWrapper.tsx

@@ -48,16 +48,15 @@ interface IRootState {
   };
 }
 
-const ScheduleListWrapper = (props: IScheduleListWrapperProps): JSX.Element => {
+const ScheduleListWrapper = ({
-  const {
+  onRemoveScheduledQueryClick,
-    onRemoveScheduledQueryClick,
+  allScheduledQueriesList,
-    allScheduledQueriesList,
+  toggleScheduleEditorModal,
-    toggleScheduleEditorModal,
+  onEditScheduledQueryClick,
-    onEditScheduledQueryClick,
+  teamId,
-    teamId,
+  inheritedQueries,
-    inheritedQueries,
+  isTeamMaintainer,
-    isTeamMaintainer,
+}: IScheduleListWrapperProps): JSX.Element => {
-  } = props;
   const dispatch = useDispatch();
   const { MANAGE_PACKS } = paths;