Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Fleet UI: API only badge (#10881)

Browse Source
This commit is contained in:
RachelElysia
2023-03-31 09:19:40 -04:00
committed by GitHub
parent 56187894e6
commit 93dfa82fa3
6 changed files with 124 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changes/10879-api-only-user-badge
+1
View File
@@ -0,0 +1 @@
- User management table informs which users only have API accesss
frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPageTableConfig.tsx
+51 -3
View File
@@ -1,6 +1,8 @@
import React from "react";
import ReactTooltip from "react-tooltip";
import TextCell from "components/TableContainer/DataTable/TextCell/TextCell";
import DropdownCell from "components/TableContainer/DataTable/DropdownCell";
import CustomLink from "components/CustomLink";
import { IUser } from "interfaces/user";
import { ITeam } from "interfaces/team";
import { IDropdownOption } from "interfaces/dropdownOption";
@@ -64,9 +66,54 @@ const generateTableHeaders = (
disableSortBy: true,
sortType: "caseInsensitive",
accessor: "name",
Cell: (cellProps: ICellProps) => (
<TextCell value={cellProps.cell.value} />
),
Cell: (cellProps: ICellProps) => {
const formatter = (val: string) => {
const apiOnlyUser =
"api_only" in cellProps.row.original
? cellProps.row.original.api_only
: false;
return (
<>
{val}
{apiOnlyUser && (
<>
<span
className="members__api-only-user"
data-tip
data-for={`api-only-tooltip-${cellProps.row.original.id}`}
>
API
</span>
<ReactTooltip
className="api-only-tooltip"
place="top"
type="dark"
effect="solid"
id={`api-only-tooltip-${cellProps.row.original.id}`}
backgroundColor="#3e4771"
clickable
delayHide={200} // need delay set to hover using clickable
>
<>
This user was created using fleetctl and
<br /> only has API access.{" "}
<CustomLink
text="Learn more"
newTab
url="https://fleetdm.com/docs/using-fleet/fleetctl-cli#using-fleetctl-with-an-api-only-user"
iconColor="core-fleet-white"
/>
</>
</ReactTooltip>
</>
)}
</>
);
};
return <TextCell value={cellProps.cell.value} formatter={formatter} />;
},
},
{
title: "Role",
@@ -137,6 +184,7 @@ const enhanceMembersData = (
global_role: user.global_role,
actions: generateActionDropdownOptions(),
id: user.id,
api_only: user.api_only,
};
});
};
frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
+4
View File
@@ -6,6 +6,10 @@
margin: 0;
}
&__api-only-user {
@include grey-badge;
}
.data-table-block {
.data-table__table {
thead {
frontend/pages/admin/UserManagementPage/_styles.scss
+4
View File
@@ -9,4 +9,8 @@
&__sandbox-demo-message {
margin-top: 3.5rem;
}
&__api-only-user {
@include grey-badge;
}
}
frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx
+53 -3
View File
@@ -1,8 +1,10 @@
import React from "react";
import ReactTooltip from "react-tooltip";
import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell";
import StatusIndicator from "components/StatusIndicator";
import TextCell from "components/TableContainer/DataTable/TextCell/TextCell";
import CustomLink from "components/CustomLink";
import { IInvite } from "interfaces/invite";
import { IUser } from "interfaces/user";
import { IDropdownOption } from "interfaces/dropdownOption";
@@ -55,6 +57,7 @@ export interface IUserTableData {
actions: IDropdownOption[];
id: number;
type: string;
api_only: boolean;
}
// NOTE: cellProps come from react-table
@@ -69,9 +72,54 @@ const generateTableHeaders = (
Header: "Name",
disableSortBy: true,
accessor: "name",
Cell: (cellProps: ICellProps) => (
<TextCell value={cellProps.cell.value} />
),
Cell: (cellProps: ICellProps) => {
const formatter = (val: string) => {
const apiOnlyUser =
"api_only" in cellProps.row.original
? cellProps.row.original.api_only
: false;
return (
<>
{val}
{apiOnlyUser && (
<>
<span
className="user-management__api-only-user"
data-tip
data-for={`api-only-tooltip-${cellProps.row.original.id}`}
>
API
</span>
<ReactTooltip
className="api-only-tooltip"
place="top"
type="dark"
effect="solid"
id={`api-only-tooltip-${cellProps.row.original.id}`}
backgroundColor="#3e4771"
clickable
delayHide={200} // need delay set to hover using clickable
>
<>
This user was created using fleetctl and
<br /> only has API access.{" "}
<CustomLink
text="Learn more"
newTab
url="https://fleetdm.com/docs/using-fleet/fleetctl-cli#using-fleetctl-with-an-api-only-user"
iconColor="core-fleet-white"
/>
</>
</ReactTooltip>
</>
)}
</>
);
};
return <TextCell value={cellProps.cell.value} formatter={formatter} />;
},
},
{
title: "Role",
@@ -206,6 +254,7 @@ const enhanceUserData = (
),
id: user.id,
type: "user",
api_only: user.api_only,
};
});
};
@@ -221,6 +270,7 @@ const enhanceInviteData = (invites: IInvite[]): IUserTableData[] => {
actions: generateActionDropdownOptions(false, true, invite.sso_enabled),
id: invite.id,
type: "invite",
api_only: false, // api only users are created through fleetctl and not invites
};
});
};
frontend/styles/var/mixins.scss
+11
View File
@@ -36,3 +36,14 @@ $max-width: 2560px;
margin: 0;
padding: $pad-xxlarge 0 54px 0;
}
@mixin grey-badge {
background-color: $ui-fleet-black-25;
color: $core-white;
font-size: $xx-small;
font-weight: 700;
padding: 0 $pad-xsmall;
border-radius: $border-radius;
position: relative;
margin-left: $pad-xsmall;
}