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

This commit is contained in:
RachelElysia 2021-10-22 11:34:45 -04:00 committed by GitHub
parent 70dc68f329
commit 403ef5cc59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 195 additions and 204 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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,

View File

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

View File

@ -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;
};

View File

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

View File

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

View File

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

View File

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

View File

@ -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 {
params: { team_id },
} = props;
const MembersPage = ({
params: { team_id },
}: IMembersPageProps): JSX.Element => {
const teamId = parseInt(team_id, 10);
const dispatch = useDispatch();

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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