awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-09 16:28:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement: design revisions and various overflow handling

Browse Source
This commit is contained in:
Scott Wilson
2025-07-23 14:31:54 +05:30
committed by =
parent dfecaae560
commit cb4cb922b9
6 changed files with 110 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
+2 -2
View File
@@ -1,12 +1,12 @@
import { import {
faBook, faBook,
faCog, faCog,
faCubes,
faDoorClosed, faDoorClosed,
faInfinity, faInfinity,
faMoneyBill, faMoneyBill,
faPlug, faPlug,
faShare, faShare,
faTable,
faUserCog, faUserCog,
faUsers, faUsers,
faUserTie faUserTie
@@ -56,7 +56,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
<MenuItem isSelected={isActive}> <MenuItem isSelected={isActive}>
<div className="mx-1 flex gap-2"> <div className="mx-1 flex gap-2">
<div className="w-6"> <div className="w-6">
<FontAwesomeIcon icon={faCubes} /> <FontAwesomeIcon icon={faTable} />
</div> </div>
Projects Projects
</div> </div>
frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ export const ProjectSelect = () => {
<div> <div>
<FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" /> <FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
</div> </div>
<Tooltip content={currentWorkspace.name} className="max-w-96"> <Tooltip content={currentWorkspace.name} className="max-w-96 break-words">
<div className="max-w-44 overflow-hidden text-ellipsis whitespace-nowrap"> <div className="max-w-44 overflow-hidden text-ellipsis whitespace-nowrap">
{currentWorkspace?.name} {currentWorkspace?.name}
</div> </div>
frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
+27 -20
View File
@@ -17,6 +17,7 @@ import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan } from "@app/components/permissions";
import { import {
Badge,
Button, Button,
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@@ -26,6 +27,7 @@ import {
FormControl, FormControl,
IconButton, IconButton,
Input, Input,
Lottie,
Modal, Modal,
ModalContent, ModalContent,
Pagination, Pagination,
@@ -33,7 +35,7 @@ import {
Tooltip Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context"; import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { getProjectHomePage, getProjectTitle } from "@app/helpers/project"; import { getProjectHomePage, getProjectLottieIcon, getProjectTitle } from "@app/helpers/project";
import { import {
getUserTablePreference, getUserTablePreference,
PreferenceKey, PreferenceKey,
@@ -216,14 +218,17 @@ export const AllProjectView = ({
</DropdownMenu> </DropdownMenu>
<div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1"> <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
<Tooltip content="Disabled across All Project view."> <Tooltip content="Disabled across All Project view.">
<div className="flex cursor-not-allowed items-center justify-center">
<IconButton <IconButton
variant="outline_bg" variant="outline_bg"
ariaLabel="grid" ariaLabel="grid"
size="xs" size="xs"
className="min-w-[2.4rem] border-none bg-transparent hover:bg-mineshaft-600" isDisabled
className="pointer-events-none min-w-[2.4rem] border-none bg-transparent hover:bg-mineshaft-600"
> >
<FontAwesomeIcon icon={faBorderAll} /> <FontAwesomeIcon icon={faBorderAll} />
</IconButton> </IconButton>
</div>
</Tooltip> </Tooltip>
<IconButton <IconButton
variant="outline_bg" variant="outline_bg"
@@ -238,7 +243,7 @@ export const AllProjectView = ({
{(isAllowed) => ( {(isAllowed) => (
<Button <Button
isDisabled={!isAllowed} isDisabled={!isAllowed}
colorSchema="primary" colorSchema="secondary"
leftIcon={<FontAwesomeIcon icon={faPlus} />} leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() => { onClick={() => {
if (isAddingProjectsAllowed) { if (isAddingProjectsAllowed) {
@@ -295,21 +300,30 @@ export const AllProjectView = ({
}} }}
key={workspace.id} key={workspace.id}
className={twMerge( className={twMerge(
"group flex min-w-72 grid-cols-6 items-center justify-center border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 py-3 first:rounded-t-md", "group flex min-w-72 items-center justify-center border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 py-3 first:rounded-t-md",
workspace.isMember ? "cursor-pointer hover:bg-mineshaft-700" : "cursor-default" workspace.isMember ? "cursor-pointer hover:bg-mineshaft-700" : "cursor-default"
)} )}
> >
<div className="w-full items-center"> <div className="mr-3 flex min-w-0 flex-1 items-center gap-3">
<div className="flex flex-grow items-center"> <div className="rounded border border-mineshaft-500 bg-mineshaft-600 p-1 shadow-inner">
<div className="flex-grow truncate text-sm text-mineshaft-100"> <Lottie
{workspace.name} className="h-[1.35rem] w-[1.35rem] shrink-0"
icon={getProjectLottieIcon(workspace.type)}
/>
</div>
<div className="-mt-0.5 flex min-w-0 flex-col">
<p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
<p className="truncate text-xs leading-4 text-mineshaft-300">
{getProjectTitle(workspace.type)}{" "}
{workspace.description ? `- ${workspace.description}` : ""}
</p>
</div>
</div> </div>
<div className="flex items-center">
{workspace.isMember ? ( {workspace.isMember ? (
<div className="flex items-center text-center text-sm text-primary"> <Badge className="flex items-center" variant="success">
<FontAwesomeIcon icon={faCheck} className="mr-2" /> <FontAwesomeIcon icon={faCheck} className="mr-1" />
Joined <span>Joined</span>
</div> </Badge>
) : ( ) : (
<div className="opacity-0 transition-all group-hover:opacity-100"> <div className="opacity-0 transition-all group-hover:opacity-100">
<Button <Button
@@ -322,13 +336,6 @@ export const AllProjectView = ({
</div> </div>
)} )}
</div> </div>
</div>
<div className="mt-1 max-w-lg overflow-hidden text-ellipsis whitespace-nowrap text-xs text-mineshaft-300">
{getProjectTitle(workspace.type)}{" "}
{workspace.description ? `- ${workspace.description}` : ""}
</div>
</div>
</div>
))} ))}
</div> </div>
{!isProjectLoading && Boolean(searchedProjects?.totalCount) && ( {!isProjectLoading && Boolean(searchedProjects?.totalCount) && (
frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
+40 -22
View File
@@ -192,18 +192,22 @@ export const MyProjectView = ({
}); });
}} }}
key={workspace.id} key={workspace.id}
className="relative flex h-36 min-w-72 cursor-pointer flex-col rounded-md border border-mineshaft-500 bg-mineshaft-800 p-4 transition-all hover:border-mineshaft-400" className="cursor-pointer overflow-clip rounded border border-l-[4px] border-mineshaft-600 border-l-mineshaft-400 bg-mineshaft-800 p-4 transition-transform duration-100 hover:scale-[103%] hover:border-l-primary hover:bg-mineshaft-700"
> >
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="h-12 w-12 rounded bg-mineshaft-600 p-2"> <div className="rounded border border-mineshaft-500 bg-mineshaft-600 p-1.5 shadow-inner">
<Lottie icon={getProjectLottieIcon(workspace.type)} className="h-full w-full" /> <Lottie
className="h-[1.75rem] w-[1.75rem] shrink-0"
icon={getProjectLottieIcon(workspace.type)}
/>
</div> </div>
<div className="flex-1"> <div className="min-w-0 flex-1">
<div className="flex"> <p className="truncate text-lg font-semibold text-mineshaft-100">{workspace.name}</p>
<div className="flex-1 text-lg font-semibold text-mineshaft-100"> <p className="truncate text-sm leading-4 text-mineshaft-300">
<div className="max-w-72 truncate">{workspace.name}</div> {getProjectTitle(workspace.type)}
</p>
</div> </div>
<div className="flex-shrink-0"> <div className="mt-0.5 self-start">
{isFavorite ? ( {isFavorite ? (
<FontAwesomeIcon <FontAwesomeIcon
icon={faSolidStar} icon={faSolidStar}
@@ -225,14 +229,9 @@ export const MyProjectView = ({
)} )}
</div> </div>
</div> </div>
<div className="truncate text-sm text-mineshaft-300"> <p className="mt-4 truncate text-sm text-mineshaft-400">
{getProjectTitle(workspace.type)}
</div>
</div>
</div>
<div className="mt-4 truncate text-sm text-mineshaft-400">
{workspace.description || "No description"} {workspace.description || "No description"}
</div> </p>
</div> </div>
); );
const renderProjectListItem = (workspace: Workspace, isFavorite: boolean, index: number) => ( const renderProjectListItem = (workspace: Workspace, isFavorite: boolean, index: number) => (
@@ -247,18 +246,26 @@ export const MyProjectView = ({
}); });
}} }}
key={workspace.id} key={workspace.id}
className={`group grid h-16 min-w-72 cursor-pointer grid-cols-6 border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${ className={`group flex min-w-72 cursor-pointer border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 py-3 hover:bg-mineshaft-700 ${
index === 0 && "rounded-t-md" index === 0 && "rounded-t-md"
}`} }`}
> >
<div className="flex flex-col justify-center sm:col-span-3 lg:col-span-4"> <div className="flex min-w-0 flex-1 items-center gap-3">
<div className="truncate text-sm text-mineshaft-100">{workspace.name}</div> <div className="rounded border border-mineshaft-500 bg-mineshaft-600 p-1 shadow-inner">
<div className="mt-1 text-xs text-mineshaft-300"> <Lottie
className="h-[1.35rem] w-[1.35rem] shrink-0"
icon={getProjectLottieIcon(workspace.type)}
/>
</div>
<div className="-mt-0.5 flex min-w-0 flex-col">
<p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
<p className="truncate text-xs leading-4 text-mineshaft-300">
{getProjectTitle(workspace.type)}{" "} {getProjectTitle(workspace.type)}{" "}
{workspace.description ? `- ${workspace.description}` : ""} {workspace.description ? `- ${workspace.description}` : ""}
</p>
</div> </div>
</div> </div>
<div className="flex items-center justify-end sm:col-span-3 lg:col-span-2"> <div className="flex items-center justify-end">
{isFavorite ? ( {isFavorite ? (
<FontAwesomeIcon <FontAwesomeIcon
icon={faSolidStar} icon={faSolidStar}
@@ -287,7 +294,7 @@ export const MyProjectView = ({
switch (projectsViewMode) { switch (projectsViewMode) {
case ProjectsViewMode.GRID: case ProjectsViewMode.GRID:
projectsComponents = ( projectsComponents = (
<div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3"> <div className="mt-4 grid w-full grid-cols-1 gap-5 lg:grid-cols-2 xl:grid-cols-3">
{isProjectViewLoading && {isProjectViewLoading &&
Array.apply(0, Array(3)).map((_x, i) => ( Array.apply(0, Array(3)).map((_x, i) => (
<div <div
@@ -349,7 +356,18 @@ export const MyProjectView = ({
<div className="text-center font-light">No projects match search...</div> <div className="text-center font-light">No projects match search...</div>
</div> </div>
); );
} else if (filteredWorkspaces.length === 0) {
projectsComponents = (
<div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
<FontAwesomeIcon
icon={faSearch}
className="mb-4 mt-2 w-full text-center text-5xl text-mineshaft-400"
/>
<div className="text-center font-light">No projects match filters...</div>
</div>
);
} }
return ( return (
<div> <div>
<div className="flex w-full flex-row"> <div className="flex w-full flex-row">
@@ -457,7 +475,7 @@ export const MyProjectView = ({
{(isAllowed) => ( {(isAllowed) => (
<Button <Button
isDisabled={!isAllowed} isDisabled={!isAllowed}
colorSchema="primary" colorSchema="secondary"
leftIcon={<FontAwesomeIcon icon={faPlus} />} leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() => { onClick={() => {
if (isAddingProjectsAllowed) { if (isAddingProjectsAllowed) {
frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const ProjectListToggle = ({ value, onChange }: Props) => {
value={value} value={value}
onValueChange={onChange} onValueChange={onChange}
className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0" className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
dropdownContainerClassName="mt-10 ml-5" position="popper"
> >
<SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem> <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
<SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem> <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
frontend/src/pages/secret-manager/OverviewPage/components/utils/index.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export const getExpandedRowStyle = (scrollOffset: number) => ({ export const getExpandedRowStyle = (scrollOffset: number) => ({
marginLeft: scrollOffset, marginLeft: scrollOffset,
width: "calc(100vw - 355px)", // 350px accounts for sidebar and margin width: "calc(100vw - 275px)", // accounts for sidebar and margin
maxWidth: "1270px" // largest width of table on ultra-wide maxWidth: "1270px" // largest width of table on ultra-wide
}); });