Show button if there's only one action, instead of an actions dropdown (#48337)

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).

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) => (
-        <ActionsDropdown
-          options={cellProps.cell.value}
-          onChange={(value: string) =>
-            actionSelectHandler(value, cellProps.row.original)
-          }
-          placeholder="Actions"
-          variant="secondary"
-        />
+      Cell: (cellProps: IActionsCellProps) => (
+        <Button
+          className="row-hover-button"
+          variant="subdued"
+          size="small"
+          ariaLabel="Delete integration"
+          onClick={() => actionSelectHandler("delete", cellProps.row.original)}
+        >
+          <Icon name="trash" />
+        </Button>
       ),
     },
   ];
 };
 
-// NOTE: may need current user ID later for permission on actions.
 const generateActionDropdownOptions = (): IDropdownOption[] => {
   return [
     {

frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss

@@ -76,6 +76,7 @@
       width: 24px;
     }
   }
+
   .empty-table__container {
     h3 {
       margin-bottom: px-to-rem(10);

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(
+      <LabelsTable
+        labels={labels}
+        onClickAction={noop}
+        currentUser={observerUser}
+      />
+    );
+
+    expect(screen.getByText("View all hosts")).toBeInTheDocument();
+    expect(screen.queryByText("Actions")).not.toBeInTheDocument();
+  });
 });

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 <ViewAllHostsButton platformLabelId={label.id} rowHover />;
+        }
+
         return (
           <ActionsDropdown
             options={dropdownOptions}

frontend/pages/labels/ManageLabelsPage/LabelsTable/_styles.scss

@@ -23,4 +23,14 @@
     width: 100px;
     max-width: 100px;
   }
+
+  // Fixed width so the ViewAllHostsButton / ActionsDropdown column doesn't
+  // shrink under the base `max-width: 99px` cap and cause the widgets to
+  // overflow. `text-align: right` from the base .actions__cell rule keeps
+  // the cell as table-cell (needed for last-row border-radius to render).
+  .data-table-block .actions__header,
+  .data-table-block .actions__cell {
+    width: 170px;
+    max-width: 170px;
+  }
 }