diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesListWrapper.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesListWrapper.tsx index 6c9aab30b..b70fd352e 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesListWrapper.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesListWrapper.tsx @@ -102,7 +102,7 @@ const PoliciesListWrapper = ({ resultsTitle={resultsTitle || "policies"} columns={generateTableHeaders({ selectedTeamId: currentTeam?.id, - showSelectionColumn: canAddOrRemovePolicy, + canAddOrRemovePolicy, tableType, })} data={generateDataSet(policiesList, currentAutomatedPolicies)} diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesTableConfig.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesTableConfig.tsx index 08f6b07bd..ef08de43a 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesTableConfig.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesTableConfig.tsx @@ -70,10 +70,10 @@ interface IDataColumn { // more info here https://react-table.tanstack.com/docs/api/useTable#cell-properties const generateTableHeaders = (options: { selectedTeamId: number | undefined | null; - showSelectionColumn: boolean | undefined; + canAddOrRemovePolicy: boolean | undefined; tableType: string | undefined; }): IDataColumn[] => { - const { selectedTeamId, tableType, showSelectionColumn } = options; + const { selectedTeamId, tableType, canAddOrRemovePolicy } = options; switch (tableType) { case "inheritedPolicies": @@ -154,6 +154,33 @@ const generateTableHeaders = (options: { ), }, ]; + + if (!canAddOrRemovePolicy) { + return tableHeaders; + } + + tableHeaders.unshift({ + id: "selection", + Header: (cellProps: IHeaderProps): JSX.Element => { + const props = cellProps.getToggleAllRowsSelectedProps(); + const checkboxProps = { + value: props.checked, + indeterminate: props.indeterminate, + onChange: () => cellProps.toggleAllRowsSelected(), + }; + return ; + }, + Cell: (cellProps: ICellProps): JSX.Element => { + const props = cellProps.row.getToggleRowSelectedProps(); + const checkboxProps = { + value: props.checked, + onChange: () => cellProps.row.toggleRowSelected(), + }; + return ; + }, + disableHidden: true, + }); + if (!selectedTeamId) { tableHeaders.push({ title: "Automations", @@ -165,29 +192,7 @@ const generateTableHeaders = (options: { ), }); } - if (showSelectionColumn) { - tableHeaders.splice(0, 0, { - id: "selection", - Header: (cellProps: IHeaderProps): JSX.Element => { - const props = cellProps.getToggleAllRowsSelectedProps(); - const checkboxProps = { - value: props.checked, - indeterminate: props.indeterminate, - onChange: () => cellProps.toggleAllRowsSelected(), - }; - return ; - }, - Cell: (cellProps: ICellProps): JSX.Element => { - const props = cellProps.row.getToggleRowSelectedProps(); - const checkboxProps = { - value: props.checked, - onChange: () => cellProps.row.toggleRowSelected(), - }; - return ; - }, - disableHidden: true, - }); - } + return tableHeaders; } } diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/_styles.scss index 889e25c08..183c80825 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/_styles.scss +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/_styles.scss @@ -1,4 +1,4 @@ -.policy-list-wrapper { +.policies-list-wrapper { border-collapse: collapse; a { @@ -23,23 +23,11 @@ font-weight: $bold; text-align: left; padding: $pad-medium $pad-large; - - &:nth-child(2) { - width: calc(49% - 20px); - } - - &:nth-child(3) { + &:not(.name__header) { width: 20%; - max-width: 150px; - } - - &:nth-last-child(2) { - border-right: 0; - } - - &:last-child { - width: 150px; - border-left: 0; + @media (min-width: $medium-width) { + width: 15%; + } } } }