From 43bf1a6a5c08da3aaedc75e76bf0c7a7c433df90 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Mon, 24 Nov 2025 17:20:33 -0800 Subject: [PATCH 1/3] improvements: styling and labeling additions to improve scope context --- frontend/public/locales/en/translations.json | 2 +- .../components/v2/PageHeader/PageHeader.tsx | 68 ++++++++----------- .../components/NavBar/Navbar.tsx | 6 +- .../AccessManagementPage.tsx | 2 +- .../components/OrganizationsTable.tsx | 6 +- .../IntegrationsListPage.tsx | 4 +- .../SettingsPage/SettingsPage.tsx | 16 ++++- .../pages/kms/OverviewPage/OverviewPage.tsx | 2 +- .../pages/kms/SettingsPage/SettingsPage.tsx | 19 +++++- .../AccessManagementPage.tsx | 10 +-- .../OrgGroupsSection/OrgGroupsSection.tsx | 6 +- .../OrgGroupsSection/OrgGroupsTable.tsx | 6 +- .../IdentitySection/IdentitySection.tsx | 8 ++- .../IdentitySection/IdentityTable.tsx | 6 +- .../OrgMembersSection/OrgMembersSection.tsx | 10 +-- .../OrgMembersSection/OrgMembersTable.tsx | 12 ++-- .../OrgRoleTabSection/OrgRoleTable.tsx | 10 +-- .../AppConnectionsPage/AppConnectionsPage.tsx | 4 +- .../AuditLogsPage/AuditLogsPage.tsx | 2 +- .../GroupDetailsByIDPage.tsx | 6 +- .../IdentityDetailsByIDPage.tsx | 6 +- .../ProjectsPage/ProjectsPage.tsx | 4 +- .../SettingsPage/SettingsPage.tsx | 2 +- .../UserDetailsByIDPage.tsx | 8 +-- .../pages/pam/SettingsPage/SettingsPage.tsx | 19 +++++- .../AccessControlPage/AccessControlPage.tsx | 17 ++++- .../GroupsSection/GroupsSection.tsx | 6 +- .../components/GroupsSection/GroupsTable.tsx | 6 +- .../components/IdentityTab/IdentityTab.tsx | 10 +-- .../MembersTab/components/MembersSection.tsx | 6 +- .../MembersTab/components/MembersTable.tsx | 12 ++-- .../ProjectRoleList/ProjectRoleList.tsx | 6 +- .../ServiceTokenSection.tsx | 4 +- .../AppConnectionsPage/AppConnectionsPage.tsx | 2 +- .../project/AuditLogsPage/AuditLogsPage.tsx | 16 ++++- .../GroupDetailsByIDPage.tsx | 6 +- .../IdentityDetailsByIDPage.tsx | 6 +- .../IdentityRoleModify.tsx | 2 +- .../MemberDetailsByIDPage.tsx | 6 +- .../RoleDetailsBySlugPage.tsx | 6 +- .../IntegrationsListPage.tsx | 4 +- .../OverviewPage/OverviewPage.tsx | 8 +-- .../SettingsPage/SettingsPage.tsx | 16 ++++- .../SettingsPage/SettingsPage.tsx | 19 +++++- .../pages/ssh/SettingsPage/SettingsPage.tsx | 20 +++++- 45 files changed, 262 insertions(+), 160 deletions(-) diff --git a/frontend/public/locales/en/translations.json b/frontend/public/locales/en/translations.json index fa23b9630b..a290a28a3f 100644 --- a/frontend/public/locales/en/translations.json +++ b/frontend/public/locales/en/translations.json @@ -289,7 +289,7 @@ } }, "project": { - "title": "Settings", + "title": "Project Settings", "description": "These settings only apply to the currently selected Project.", "danger-zone": "Danger Zone", "delete-project": "Delete Project", diff --git a/frontend/src/components/v2/PageHeader/PageHeader.tsx b/frontend/src/components/v2/PageHeader/PageHeader.tsx index f84edfcd27..61f8afaa60 100644 --- a/frontend/src/components/v2/PageHeader/PageHeader.tsx +++ b/frontend/src/components/v2/PageHeader/PageHeader.tsx @@ -1,17 +1,10 @@ -import { createElement } from "react"; import { ReactNode } from "@tanstack/react-router"; import { LucideIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; -import { - Badge, - InstanceIcon, - OrgIcon, - ProjectIcon, - SubOrgIcon, - TBadgeProps -} from "@app/components/v3"; +import { InstanceIcon, OrgIcon, ProjectIcon, SubOrgIcon } from "@app/components/v3"; import { ProjectType } from "@app/hooks/api/projects/types"; +import { createElement } from "react"; type Props = { title: ReactNode; @@ -21,41 +14,40 @@ type Props = { scope: "org" | "namespace" | "instance" | ProjectType | null; }; -const SCOPE_NAME: Record, { label: string; icon: LucideIcon }> = { - org: { label: "Organization", icon: OrgIcon }, - [ProjectType.SecretManager]: { label: "Project", icon: ProjectIcon }, - [ProjectType.CertificateManager]: { label: "Project", icon: ProjectIcon }, - [ProjectType.SSH]: { label: "Project", icon: ProjectIcon }, - [ProjectType.KMS]: { label: "Project", icon: ProjectIcon }, - [ProjectType.PAM]: { label: "Project", icon: ProjectIcon }, - [ProjectType.SecretScanning]: { label: "Project", icon: ProjectIcon }, - namespace: { label: "Sub-Organization", icon: SubOrgIcon }, - instance: { label: "Server", icon: InstanceIcon } -}; - -const SCOPE_VARIANT: Record, TBadgeProps["variant"]> = { - org: "org", - [ProjectType.SecretManager]: "project", - [ProjectType.CertificateManager]: "project", - [ProjectType.SSH]: "project", - [ProjectType.KMS]: "project", - [ProjectType.PAM]: "project", - [ProjectType.SecretScanning]: "project", - namespace: "sub-org", - instance: "neutral" +const SCOPE_BADGE: Record, { icon: LucideIcon; className: string }> = { + org: { className: "text-org", icon: OrgIcon }, + [ProjectType.SecretManager]: { className: "text-project", icon: ProjectIcon }, + [ProjectType.CertificateManager]: { className: "text-project", icon: ProjectIcon }, + [ProjectType.SSH]: { className: "text-project", icon: ProjectIcon }, + [ProjectType.KMS]: { className: "text-project", icon: ProjectIcon }, + [ProjectType.PAM]: { className: "text-project", icon: ProjectIcon }, + [ProjectType.SecretScanning]: { className: "text-project", icon: ProjectIcon }, + namespace: { className: "text-sub-org", icon: SubOrgIcon }, + instance: { className: "text-neutral", icon: InstanceIcon } }; export const PageHeader = ({ title, description, children, className, scope }: Props) => (
-

{title}

- {scope && ( - - {createElement(SCOPE_NAME[scope].icon)} - {SCOPE_NAME[scope].label} - - )} +

+ {scope && + createElement(SCOPE_BADGE[scope].icon, { + size: 26, + className: twMerge(SCOPE_BADGE[scope].className, "mr-3 mb-1 inline-block") + })} + {title} +

{children}
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx index a3875ba496..37ee0cf18a 100644 --- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx +++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx @@ -1,4 +1,3 @@ -import { useEffect, useState } from "react"; import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons"; import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-icons"; import { @@ -24,6 +23,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router"; import { UserPlusIcon } from "lucide-react"; +import { useEffect, useState } from "react"; import { twMerge } from "tailwind-merge"; import { Mfa } from "@app/components/auth/Mfa"; @@ -601,7 +601,7 @@ export const Navbar = () => { }} > - Invite Members + Invite Users ) : null } @@ -705,7 +705,7 @@ export const Navbar = () => { }} > }> - Invite Members + Invite Users ) : null diff --git a/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx b/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx index 3dbfd365ee..5f6fdd5e3c 100644 --- a/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx +++ b/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx @@ -17,7 +17,7 @@ export const AccessManagementPage = () => {
diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx index 93d0253ff3..5b1a1b30a8 100644 --- a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx +++ b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx @@ -1,4 +1,3 @@ -import { useMemo, useState } from "react"; import { faArrowDown, faArrowUp, @@ -19,6 +18,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { CircleQuestionMarkIcon } from "lucide-react"; +import { useMemo, useState } from "react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; @@ -350,8 +350,8 @@ const ViewMembersModalContent = ({ className="my-auto bg-mineshaft-700" title={ members.length - ? "No organization members match search..." - : "No organization members found" + ? "No organization users match search..." + : "No organization users found" } icon={faUsers} /> diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx index 9387074eb5..7c9bc0dbbd 100644 --- a/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx +++ b/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx @@ -1,6 +1,6 @@ +import { useNavigate, useSearch } from "@tanstack/react-router"; import { Helmet } from "react-helmet"; import { useTranslation } from "react-i18next"; -import { useNavigate, useSearch } from "@tanstack/react-router"; import { ProjectPermissionCan } from "@app/components/permissions"; import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2"; @@ -49,7 +49,7 @@ export const IntegrationsListPage = () => {
diff --git a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx index b75ab2afc7..00e4e6733e 100644 --- a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx +++ b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx @@ -2,8 +2,11 @@ import { Helmet } from "react-helmet"; import { useTranslation } from "react-i18next"; import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2"; +import { useOrganization } from "@app/context"; import { ProjectType } from "@app/hooks/api/projects/types"; import { ProjectGeneralTab } from "@app/pages/project/SettingsPage/components/ProjectGeneralTab"; +import { Link } from "@tanstack/react-router"; +import { InfoIcon } from "lucide-react"; const tabs = [ { @@ -15,6 +18,7 @@ const tabs = [ export const SettingsPage = () => { const { t } = useTranslation(); + const { currentOrg } = useOrganization(); return (
@@ -22,7 +26,17 @@ export const SettingsPage = () => { {t("common.head-title", { title: t("settings.project.title") })}
- + + + Looking for organization settings? + + {tabs.map((tab) => ( diff --git a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx index be3be82862..3069772a18 100644 --- a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx +++ b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx @@ -20,7 +20,7 @@ export const OverviewPage = () => {
{ const { t } = useTranslation(); + const { currentOrg } = useOrganization(); + return (
@@ -24,9 +29,19 @@ export const SettingsPage = () => {
+ > + + Looking for organization settings? + + {tabs.map((tab) => ( diff --git a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx index 9b5a8e7d32..13b33ff4da 100644 --- a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx @@ -1,9 +1,9 @@ -import { useState } from "react"; -import { Helmet } from "react-helmet"; -import { useTranslation } from "react-i18next"; import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate, useSearch } from "@tanstack/react-router"; +import { useState } from "react"; +import { Helmet } from "react-helmet"; +import { useTranslation } from "react-i18next"; import { OrgPermissionGuardBanner } from "@app/components/permissions/OrgPermissionCan"; import { Button, PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2"; @@ -18,8 +18,8 @@ import { } from "@app/context"; import { OrgAccessControlTabSections } from "@app/types/org"; -import { UpgradePrivilegeSystemModal } from "./components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal"; import { OrgGroupsTab, OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components"; +import { UpgradePrivilegeSystemModal } from "./components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal"; export const AccessManagementPage = () => { const { t } = useTranslation(); @@ -83,7 +83,7 @@ export const AccessManagementPage = () => {
{!currentOrg.shouldUseNewPrivilegeSystem && ( diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx index a5e2e113cd..bf39f90bd8 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx @@ -51,19 +51,19 @@ export const OrgGroupsSection = () => {
-

Groups

+

Organization Groups

{(isAllowed) => ( )} diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx index 5b4698ec9b..935b1ba384 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx @@ -1,4 +1,3 @@ -import { useMemo } from "react"; import { faArrowDown, faArrowUp, @@ -13,6 +12,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; +import { useMemo } from "react"; import { createNotification } from "@app/components/notifications"; import { OrgPermissionCan } from "@app/components/permissions"; @@ -159,7 +159,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => { value={search} onChange={(e) => setSearch(e.target.value)} leftIcon={} - placeholder="Search groups..." + placeholder="Search organization groups..." /> @@ -205,7 +205,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
- Role + Organization Role
-

Machine Identities

+

+ Organization Machine Identities +

@@ -129,7 +131,9 @@ export const IdentitySection = withPermission( }} isDisabled={!isAllowed} > - Add Machine Identity + {isSubOrganization + ? "Add Machine Identity to Sub-Organization" + : "Create Organization Machine Identity"} )} diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx index 40ca72f46c..451f2c7457 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx @@ -1,4 +1,3 @@ -import { useCallback, useState } from "react"; import { faArrowDown, faArrowUp, @@ -14,6 +13,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; +import { useCallback, useState } from "react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; @@ -200,7 +200,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => { - Filter Machine Identities by Role + Filter Organization Machine Identities by Role {roles?.map(({ id, slug, name }) => ( {
- Role + Organization Role {
-

Users

+

Organization Users

{(isAllowed) => ( )} diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx index d81c0a3eb8..fcde13f94d 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx @@ -1,4 +1,3 @@ -import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react"; import { faArrowDown, faArrowUp, @@ -17,6 +16,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { UserCogIcon } from "lucide-react"; +import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; @@ -336,7 +336,7 @@ export const OrgMembersTable = ({ - Apply Roles to Filter Users + Filter Organization Users by Role {roles?.map(({ id, slug, name }) => ( setSearch(e.target.value)} leftIcon={} - placeholder="Search members..." + placeholder="Search organization users..." />
@@ -434,7 +434,7 @@ export const OrgMembersTable = ({
- Role + Organization Role diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx index ee3c536e89..78dc293e6f 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx @@ -1,4 +1,3 @@ -import { useMemo } from "react"; import { faArrowDown, faArrowUp, @@ -15,6 +14,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { ServerIcon, WrenchIcon } from "lucide-react"; +import { useMemo } from "react"; import { twMerge } from "tailwind-merge"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; @@ -199,7 +199,7 @@ export const OrgRoleTable = () => { {(isAllowed) => ( )} @@ -216,7 +216,7 @@ export const OrgRoleTable = () => { value={search} onChange={(e) => setSearch(e.target.value)} leftIcon={} - placeholder="Search roles..." + placeholder="Search organization roles..." className="flex-1" containerClassName="mb-4" /> @@ -441,7 +441,7 @@ export const OrgRoleTable = () => {
diff --git a/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx b/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx index 37d73125cf..5f2290ab38 100644 --- a/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx +++ b/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx @@ -19,7 +19,7 @@ export const AuditLogsPage = () => {
diff --git a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx index 055adfedc3..5bc8da4878 100644 --- a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx +++ b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx @@ -1,8 +1,8 @@ -import { Helmet } from "react-helmet"; -import { useTranslation } from "react-i18next"; import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Link, useNavigate, useParams } from "@tanstack/react-router"; +import { Helmet } from "react-helmet"; +import { useTranslation } from "react-i18next"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; @@ -88,7 +88,7 @@ const Page = () => { className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400" > - Groups + Organization Groups { className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400" > - Machine Identities + Organization Machine Identities { {projectListView === ProjectListView.MyProjects ? ( diff --git a/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx b/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx index b3a7c10437..cec33b2896 100644 --- a/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx +++ b/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx @@ -20,7 +20,7 @@ export const SettingsPage = () => {
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx index 3b26f80f05..713ba2e050 100644 --- a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx +++ b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx @@ -1,8 +1,8 @@ -import { Helmet } from "react-helmet"; -import { useTranslation } from "react-i18next"; import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Link, useNavigate, useParams } from "@tanstack/react-router"; +import { Helmet } from "react-helmet"; +import { useTranslation } from "react-i18next"; import { twMerge } from "tailwind-merge"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; @@ -34,9 +34,9 @@ import { import { usePopUp } from "@app/hooks/usePopUp"; import { OrgAccessControlTabSections } from "@app/types/org"; +import { UserDetailsSection, UserOrgMembershipModal, UserProjectsSection } from "./components"; import { UserAuditLogsSection } from "./components/UserProjectsSection/UserAuditLogsSection"; import { UserGroupsSection } from "./components/UserProjectsSection/UserGroupsSection"; -import { UserDetailsSection, UserOrgMembershipModal, UserProjectsSection } from "./components"; const Page = withPermission( () => { @@ -112,7 +112,7 @@ const Page = withPermission( className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400" > - Users + Organization Users { const { t } = useTranslation(); + const { currentOrg } = useOrganization(); + return (
@@ -16,9 +21,19 @@ export const SettingsPage = () => {
+ > + + Looking for organization settings? + + diff --git a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx index 98d47a08a7..42daf794b3 100644 --- a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx +++ b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx @@ -1,6 +1,6 @@ +import { Link, useNavigate, useSearch } from "@tanstack/react-router"; import { Helmet } from "react-helmet"; import { useTranslation } from "react-i18next"; -import { useNavigate, useSearch } from "@tanstack/react-router"; import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2"; import { useOrganization, useProject } from "@app/context"; @@ -8,6 +8,7 @@ import { getProjectBaseURL } from "@app/helpers/project"; import { ProjectType } from "@app/hooks/api/projects/types"; import { ProjectAccessControlTabs } from "@app/types/project"; +import { InfoIcon } from "lucide-react"; import { GroupsTab, IdentityTab, @@ -43,9 +44,19 @@ const Page = () => {
+ > + + Looking for organization access control? + + diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx index 8415a5e886..b6c0574cca 100644 --- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx @@ -59,19 +59,19 @@ export const GroupsSection = () => {
-

User Groups

+

Project Groups

{(isAllowed) => ( )} diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx index c3d850c6b9..0aa22d30f1 100644 --- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx @@ -1,4 +1,3 @@ -import { useMemo } from "react"; import { faArrowDown, faArrowUp, @@ -11,6 +10,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { format } from "date-fns"; +import { useMemo } from "react"; import { ProjectPermissionCan } from "@app/components/permissions"; import { @@ -122,7 +122,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => { value={search} onChange={(e) => setSearch(e.target.value)} leftIcon={} - placeholder="Search members..." + placeholder="Search project groups..." /> @@ -143,7 +143,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => { - + diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx index 18df31e94f..4159827555 100644 --- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx @@ -1,4 +1,3 @@ -import { useState } from "react"; import { subject } from "@casl/ability"; import { faArrowDown, @@ -14,6 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { AnimatePresence, motion } from "framer-motion"; import { LinkIcon, PlusIcon } from "lucide-react"; +import { useState } from "react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; @@ -197,7 +197,7 @@ export const IdentityTab = withProjectPermission(
-

Machine Identities

+

Project Machine Identities

@@ -212,7 +212,7 @@ export const IdentityTab = withProjectPermission( onClick={() => handlePopUpOpen("createIdentity")} isDisabled={!isAllowed} > - Add Machine Identity + Add Machine Identity to Project )} @@ -223,7 +223,7 @@ export const IdentityTab = withProjectPermission( value={search} onChange={(e) => setSearch(e.target.value)} leftIcon={} - placeholder="Search machine identities by name..." + placeholder="Search project machine identities by name..." />
RoleProject Role Added on
@@ -251,7 +251,7 @@ export const IdentityTab = withProjectPermission( - + diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx index 38dc5e47e9..5801812353 100644 --- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx @@ -49,19 +49,19 @@ export const MembersSection = () => {
-

Users

+

Project Users

{(isAllowed) => ( )} diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx index d554f12fb4..51573f8cbf 100644 --- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx @@ -1,4 +1,3 @@ -import { useCallback, useMemo, useState } from "react"; import { faArrowDown, faArrowUp, @@ -14,6 +13,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; +import { useCallback, useMemo, useState } from "react"; import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; @@ -208,7 +208,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => { - Apply Roles to Filter Users + Filter Project Users by Role {projectRoles?.map(({ id, slug, name }) => ( { value={search} onChange={(e) => setSearch(e.target.value)} leftIcon={} - placeholder="Search members..." + placeholder="Search project users..." />
@@ -282,7 +282,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
- + @@ -462,9 +462,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => { )} {!isMembersLoading && !filteredUsers?.length && ( )} diff --git a/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx index eeb29725f4..adca1b7ec4 100644 --- a/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx @@ -1,4 +1,3 @@ -import { useMemo } from "react"; import { faArrowDown, faArrowUp, @@ -14,6 +13,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useNavigate } from "@tanstack/react-router"; import { ServerIcon, WrenchIcon } from "lucide-react"; +import { useMemo } from "react"; import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; @@ -170,13 +170,13 @@ export const ProjectRoleList = () => { {(isAllowed) => ( )} diff --git a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx index 6f2e82e02e..3d5ec31c41 100644 --- a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx @@ -1,6 +1,6 @@ -import { useTranslation } from "react-i18next"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useTranslation } from "react-i18next"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; @@ -57,7 +57,7 @@ export const ServiceTokenSection = withProjectPermission( > {(isAllowed) => (
RoleProject Role Managed by {isFetching ? : null}
RoleProject Role