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%;
+ }
}
}
}