diff --git a/changes/47339-single-action-dropdown b/changes/47339-single-action-dropdown new file mode 100644 index 0000000000..0f82c39da7 --- /dev/null +++ b/changes/47339-single-action-dropdown @@ -0,0 +1 @@ +- Fixed UI to show a direct button instead of a single-item dropdown on the Labels page (for users without edit/delete permissions) and the Integrations page (Jira/Zendesk). diff --git a/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx b/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx index 23f810de3d..1991c0529e 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx @@ -1,7 +1,8 @@ import React from "react"; import TextCell from "components/TableContainer/DataTable/TextCell"; -import ActionsDropdown from "components/ActionsDropdown"; +import Button from "components/buttons/Button"; +import Icon from "components/Icon"; import { IJiraIntegration, @@ -31,7 +32,7 @@ interface ICellProps extends IRowProps { }; } -interface IActionsDropdownProps extends IRowProps { +interface IActionsCellProps extends IRowProps { cell: { value: IDropdownOption[]; }; @@ -43,7 +44,7 @@ interface IDataColumn { accessor: string; Cell: | ((props: ICellProps) => JSX.Element) - | ((props: IActionsDropdownProps) => JSX.Element); + | ((props: IActionsCellProps) => JSX.Element); disableHidden?: boolean; disableSortBy?: boolean; sortType?: string; @@ -98,21 +99,21 @@ const generateTableHeaders = ( Header: "", disableSortBy: true, accessor: "actions", - Cell: (cellProps: IActionsDropdownProps) => ( - - actionSelectHandler(value, cellProps.row.original) - } - placeholder="Actions" - variant="secondary" - /> + Cell: (cellProps: IActionsCellProps) => ( + ), }, ]; }; -// NOTE: may need current user ID later for permission on actions. const generateActionDropdownOptions = (): IDropdownOption[] => { return [ { diff --git a/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss index f3699fd222..4f8ba708a7 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss +++ b/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss @@ -76,6 +76,7 @@ width: 24px; } } + .empty-table__container { h3 { margin-bottom: px-to-rem(10); diff --git a/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTable.tests.tsx b/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTable.tests.tsx index b73aef2cb3..46d055bcb7 100644 --- a/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTable.tests.tsx +++ b/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTable.tests.tsx @@ -104,4 +104,29 @@ describe("LabelsTable", () => { expect(screen.getByText("Description")).toBeInTheDocument(); expect(screen.getByText("Type")).toBeInTheDocument(); }); + + it("Renders a 'View all hosts' button instead of an actions dropdown for users without edit permission", () => { + const labels = [ + createMockLabel({ + id: 1, + name: "Custom label 1", + label_type: "regular", + label_membership_type: "dynamic", + }), + ]; + + const observerUser = createMockUser({ global_role: "observer" }); + + const render = createCustomRenderer(); + render( + + ); + + expect(screen.getByText("View all hosts")).toBeInTheDocument(); + expect(screen.queryByText("Actions")).not.toBeInTheDocument(); + }); }); diff --git a/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTableConfig.tsx b/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTableConfig.tsx index 6f549cafcc..7a3b1122c4 100644 --- a/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTableConfig.tsx +++ b/frontend/pages/labels/ManageLabelsPage/LabelsTable/LabelsTableConfig.tsx @@ -4,6 +4,7 @@ import { IDropdownOption } from "interfaces/dropdownOption"; import { getGitOpsModeTipContent } from "utilities/helpers"; import TextCell from "components/TableContainer/DataTable/TextCell"; +import ViewAllHostsButton from "components/ViewAllHostsLink"; import { isGlobalAdmin, isGlobalMaintainer, @@ -174,6 +175,14 @@ const generateTableHeaders = ( labelsGitOpsManaged, repoURL ); + + if ( + dropdownOptions.length === 1 && + dropdownOptions[0].value === "view_hosts" + ) { + return ; + } + return (