awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 00:27:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixing ui/ux bugs

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-07-12 11:18:42 -07:00
parent f9110cedfa
commit d3aeb729e0
2 changed files with 181 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layouts/AppLayout/AppLayout.tsx
+85 -67
View File
@@ -163,7 +163,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
if (currentOrg && ( if (currentOrg && (
(workspaces?.length === 0 && router.asPath.includes("project")) (workspaces?.length === 0 && router.asPath.includes("project"))
|| router.asPath.includes("/project/undefined") || router.asPath.includes("/project/undefined")
|| (!orgs?.map(org => org._id)?.includes(router.query.id) && !router.asPath.includes("project") && !router.asPath.includes("integration")) || (!orgs?.map(org => org._id)?.includes(router.query.id) && !router.asPath.includes("project") && !router.asPath.includes("personal") && !router.asPath.includes("integration"))
)) { )) {
router.push(`/org/${currentOrg?._id}/overview`); router.push(`/org/${currentOrg?._id}/overview`);
} }
@@ -259,7 +259,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
<div className="pl-3 text-mineshaft-100 text-sm">{currentOrg?.name} <FontAwesomeIcon icon={faAngleDown} className="text-xs pl-1 pt-1 text-mineshaft-300" /></div> <div className="pl-3 text-mineshaft-100 text-sm">{currentOrg?.name} <FontAwesomeIcon icon={faAngleDown} className="text-xs pl-1 pt-1 text-mineshaft-300" /></div>
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" className=""> <DropdownMenuContent align="start" className="p-1">
<div className="text-xs text-mineshaft-400 px-2 py-1">{user?.email}</div> <div className="text-xs text-mineshaft-400 px-2 py-1">{user?.email}</div>
{orgs?.map(org => <DropdownMenuItem key={org._id}> {orgs?.map(org => <DropdownMenuItem key={org._id}>
<Button <Button
@@ -267,7 +267,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
variant="plain" variant="plain"
colorSchema="secondary" colorSchema="secondary"
size="xs" size="xs"
className="w-full flex items-center justify-start" className="w-full flex items-center justify-start p-0 font-normal"
leftIcon={currentOrg._id === org._id && <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary"/>} leftIcon={currentOrg._id === org._id && <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary"/>}
> >
<div className="w-full flex justify-between items-center">{org.name}</div> <div className="w-full flex justify-between items-center">{org.name}</div>
@@ -285,8 +285,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600 p-1"> <DropdownMenuTrigger asChild className="hover:bg-primary-400 hover:text-black data-[state=open]:text-black data-[state=open]:bg-primary-400 p-1">
<div className="w-6 h-6 rounded-full bg-mineshaft hover:bg-mineshaft-400 pr-1 text-xs text-mineshaft-300 flex justify-center"> <div className="child w-6 h-6 rounded-full bg-mineshaft hover:bg-mineshaft-500 pr-1 text-xs text-mineshaft-300 flex justify-center items-center">
{user?.firstName?.charAt(0)}{user?.lastName && user?.lastName?.charAt(0)} {user?.firstName?.charAt(0)}{user?.lastName && user?.lastName?.charAt(0)}
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@@ -369,64 +369,76 @@ export const AppLayout = ({ children }: LayoutProps) => {
</div> </div>
</Select> </Select>
</div> </div>
) : <div className="pr-2 my-6 flex justify-center items-center text-mineshaft-300 hover:text-mineshaft-100 cursor-default text-sm"> ) : <Link href={`/org/${currentOrg?._id}/overview`}><div className="pr-2 my-6 flex justify-center items-center text-mineshaft-300 hover:text-mineshaft-100 cursor-default text-sm">
<FontAwesomeIcon icon={faArrowLeft} className="pr-3"/> <FontAwesomeIcon icon={faArrowLeft} className="pr-3"/>
<Link href={`/org/${currentOrg?._id}/overview`}>Back to organization</Link> Back to organization
</div>)} </div></Link>)}
<div className={`px-1 ${!router.asPath.includes("personal") ? "block" : "hidden"}`}> <div className={`px-1 ${!router.asPath.includes("personal") ? "block" : "hidden"}`}>
{((router.asPath.includes("project") || router.asPath.includes("integrations")) && currentWorkspace) ? <Menu> {((router.asPath.includes("project") || router.asPath.includes("integrations")) && currentWorkspace) ? <Menu>
<Link href={`/project/${currentWorkspace?._id}/secrets`} passHref> <Link href={`/project/${currentWorkspace?._id}/secrets`} passHref>
<MenuItem <a>
isSelected={router.asPath.includes(`/project/${currentWorkspace?._id}/secrets`)} <MenuItem
icon="system-outline-90-lock-closed" isSelected={router.asPath.includes(`/project/${currentWorkspace?._id}/secrets`)}
> icon="system-outline-90-lock-closed"
{t("nav.menu.secrets")} >
</MenuItem> {t("nav.menu.secrets")}
</MenuItem>
</a>
</Link> </Link>
<Link href={`/project/${currentWorkspace?._id}/members`} passHref> <Link href={`/project/${currentWorkspace?._id}/members`} passHref>
<MenuItem <a>
isSelected={router.asPath === `/project/${currentWorkspace?._id}/members`} <MenuItem
icon="system-outline-96-groups" isSelected={router.asPath === `/project/${currentWorkspace?._id}/members`}
> icon="system-outline-96-groups"
{t("nav.menu.members")} >
</MenuItem> {t("nav.menu.members")}
</MenuItem>
</a>
</Link> </Link>
<Link href={`/integrations/${currentWorkspace?._id}`} passHref> <Link href={`/integrations/${currentWorkspace?._id}`} passHref>
<MenuItem <a>
isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`} <MenuItem
icon="system-outline-82-extension" isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`}
> icon="system-outline-82-extension"
{t("nav.menu.integrations")} >
</MenuItem> {t("nav.menu.integrations")}
</MenuItem>
</a>
</Link> </Link>
<Link href={`/project/${currentWorkspace?._id}/audit-logs`} passHref> <Link href={`/project/${currentWorkspace?._id}/audit-logs`} passHref>
<MenuItem <a>
isSelected={router.asPath === `/project/${currentWorkspace?._id}/audit-logs`} <MenuItem
// icon={<FontAwesomeIcon icon={faFileLines} size="lg" />} isSelected={router.asPath === `/project/${currentWorkspace?._id}/audit-logs`}
icon="system-outline-168-view-headline" // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
> icon="system-outline-168-view-headline"
Audit Logs >
</MenuItem> Audit Logs
</MenuItem>
</a>
</Link> </Link>
<Link href={`/project/${currentWorkspace?._id}/settings`} passHref> <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>
<MenuItem <a>
isSelected={ <MenuItem
router.asPath === `/project/${currentWorkspace?._id}/settings` isSelected={
} router.asPath === `/project/${currentWorkspace?._id}/settings`
icon="system-outline-109-slider-toggle-settings" }
> icon="system-outline-109-slider-toggle-settings"
{t("nav.menu.project-settings")} >
</MenuItem> {t("nav.menu.project-settings")}
</MenuItem>
</a>
</Link> </Link>
</Menu> </Menu>
: <Menu className="mt-4"> : <Menu className="mt-4">
<Link href={`/org/${currentOrg?._id}/overview`} passHref> <Link href={`/org/${currentOrg?._id}/overview`} passHref>
<MenuItem <a>
isSelected={router.asPath.includes("/overview")} <MenuItem
icon="system-outline-165-view-carousel" isSelected={router.asPath.includes("/overview")}
> icon="system-outline-165-view-carousel"
Overview >
</MenuItem> Overview
</MenuItem>
</a>
</Link> </Link>
{/* {workspaces.map(project => <Link key={project._id} href={`/project/${project?._id}/secrets`} passHref> {/* {workspaces.map(project => <Link key={project._id} href={`/project/${project?._id}/secrets`} passHref>
<a> <a>
@@ -442,30 +454,36 @@ export const AppLayout = ({ children }: LayoutProps) => {
</div> </div>
</Link>)} */} </Link>)} */}
<Link href={`/org/${currentOrg?._id}/members`} passHref> <Link href={`/org/${currentOrg?._id}/members`} passHref>
<MenuItem <a>
isSelected={router.asPath === `/org/${currentOrg?._id}/members`} <MenuItem
icon="system-outline-96-groups" isSelected={router.asPath === `/org/${currentOrg?._id}/members`}
> icon="system-outline-96-groups"
Members >
</MenuItem> Members
</MenuItem>
</a>
</Link> </Link>
<Link href={`/org/${currentOrg?._id}/billing`} passHref> <Link href={`/org/${currentOrg?._id}/billing`} passHref>
<MenuItem <a>
isSelected={router.asPath === `/org/${currentOrg?._id}/billing`} <MenuItem
icon="system-outline-103-coin-cash-monetization" isSelected={router.asPath === `/org/${currentOrg?._id}/billing`}
> icon="system-outline-103-coin-cash-monetization"
Usage & Billing >
</MenuItem> Usage & Billing
</MenuItem>
</a>
</Link> </Link>
<Link href={`/org/${currentOrg?._id}/settings`} passHref> <Link href={`/org/${currentOrg?._id}/settings`} passHref>
<MenuItem <a>
isSelected={ <MenuItem
router.asPath === `/org/${currentOrg?._id}/settings` isSelected={
} router.asPath === `/org/${currentOrg?._id}/settings`
icon="system-outline-109-slider-toggle-settings" }
> icon="system-outline-109-slider-toggle-settings"
Organization Settings >
</MenuItem> Organization Settings
</MenuItem>
</a>
</Link> </Link>
</Menu>} </Menu>}
</div> </div>
frontend/src/pages/org/[id]/overview/index.tsx
+96 -39
View File
@@ -133,6 +133,61 @@ const learningItem = ({
); );
}; };
const learningItemSquare = ({
text,
subText,
complete,
icon,
time,
userAction,
link
}: ItemProps): JSX.Element => {
return (
<a
target={`${link?.includes("https") ? "_blank" : "_self"}`}
rel="noopener noreferrer"
className={`w-full ${complete && "opacity-30 duration-200 hover:opacity-100"}`}
href={link}
>
<div className={`${complete ? "bg-gradient-to-r from-primary-500/70 p-[0.07rem]" : ""} rounded-md w-full`}>
<div
onKeyDown={() => null}
role="button"
tabIndex={0}
onClick={async () => {
if (userAction && userAction !== "first_time_secrets_pushed") {
await registerUserAction({
action: userAction
});
}
}}
className={`group relative flex w-full items-center justify-between overflow-hidden rounded-md border ${complete? "bg-gradient-to-r from-[#0e1f01] to-mineshaft-700 border-mineshaft-900 cursor-default" : "bg-mineshaft-800 hover:bg-mineshaft-700 border-mineshaft-600 shadow-xl cursor-pointer"} duration-200 text-mineshaft-100`}
>
<div className="flex flex-col items-center w-full px-6 py-4">
<div className="flex flex-row items-start justify-between w-full">
<FontAwesomeIcon icon={icon} className="w-16 text-5xl text-mineshaft-200 group-hover:text-mineshaft-100 duration-100 pt-2" />
{complete && (
<div className="absolute left-14 top-12 flex h-7 w-7 items-center justify-center rounded-full bg-bunker-500 p-2 group-hover:bg-mineshaft-700">
<FontAwesomeIcon icon={faCheckCircle} className="h-5 w-5 text-4xl text-primary" />
</div>
)}
<div
className={`text-right text-sm font-normal text-mineshaft-300 ${complete ? "text-primary font-semibold" : ""}`}
>
{complete ? "Complete!" : `About ${time}`}
</div>
</div>
<div className="flex flex-col items-start justify-start w-full pt-4">
<div className="mt-0.5 text-lg font-medium">{text}</div>
<div className="text-sm font-normal text-mineshaft-300">{subText}</div>
</div>
</div>
</div>
</div>
</a>
);
};
const formSchema = yup.object({ const formSchema = yup.object({
name: yup.string().required().label("Project Name").trim(), name: yup.string().required().label("Project Name").trim(),
addMembers: yup.bool().required().label("Add Members") addMembers: yup.bool().required().label("Add Members")
@@ -242,7 +297,7 @@ export default function Organization() {
<link rel="icon" href="/infisical.ico" /> <link rel="icon" href="/infisical.ico" />
</Head> </Head>
<div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4"> <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4">
<p className="mr-4 font-semibold text-white">Projects {orgWorkspaces.map(ws => ws?.name).join("")}</p> <p className="mr-4 font-semibold text-white">Projects</p>
<div className="w-full flex flex-row mt-6"> <div className="w-full flex flex-row mt-6">
<Input <Input
className="h-[2.3rem] text-sm bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80" className="h-[2.3rem] text-sm bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
@@ -266,10 +321,10 @@ export default function Organization() {
Add New Project Add New Project
</Button> </Button>
</div> </div>
<div className="mt-4 w-full grid gap-4 grid-cols-3 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> <div className="mt-4 w-full grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{orgWorkspaces.filter(ws => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())).map(workspace => <div key={workspace._id} className="h-32 lg:h-40 min-w-72 rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4 flex flex-col justify-between"> {orgWorkspaces.filter(ws => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())).map(workspace => <div key={workspace._id} className="h-40 min-w-72 rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4 flex flex-col justify-between">
<div className="text-lg text-mineshaft-100 mt-0">{workspace.name}</div> <div className="text-lg text-mineshaft-100 mt-0">{workspace.name}</div>
<div className="text-sm text-mineshaft-300 mt-0 lg:pb-6">{(workspace.environments?.length || 0)} environments</div> <div className="text-sm text-mineshaft-300 mt-0 pb-6">{(workspace.environments?.length || 0)} environments</div>
<Link href={`/project/${workspace._id}/secrets`}> <Link href={`/project/${workspace._id}/secrets`}>
<div className="group cursor-default ml-auto hover:bg-primary-800/20 text-sm text-mineshaft-300 hover:text-mineshaft-200 bg-mineshaft-900 py-2 px-4 rounded-full w-max border border-mineshaft-600 hover:border-primary-500/80">Explore <FontAwesomeIcon icon={faArrowRight} className="pl-1.5 pr-0.5 group-hover:pl-2 group-hover:pr-0 duration-200" /></div> <div className="group cursor-default ml-auto hover:bg-primary-800/20 text-sm text-mineshaft-300 hover:text-mineshaft-200 bg-mineshaft-900 py-2 px-4 rounded-full w-max border border-mineshaft-600 hover:border-primary-500/80">Explore <FontAwesomeIcon icon={faArrowRight} className="pl-1.5 pr-0.5 group-hover:pl-2 group-hover:pr-0 duration-200" /></div>
</Link> </Link>
@@ -290,24 +345,43 @@ export default function Organization() {
</div> </div>
{((new Date()).getTime() - (new Date(user?.createdAt)).getTime()) < 30 * 24 * 60 * 60 * 1000 && <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4"> {((new Date()).getTime() - (new Date(user?.createdAt)).getTime()) < 30 * 24 * 60 * 60 * 1000 && <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4">
<p className="mr-4 font-semibold text-white mb-4">Onboarding Guide</p> <p className="mr-4 font-semibold text-white mb-4">Onboarding Guide</p>
{learningItem({ <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 w-full mb-3">
text: "Watch a video about Infisical", {learningItemSquare({
subText: "", text: "Watch Infisical demo",
complete: hasUserClickedIntro, subText: "Set up Infisical in 3 min.",
icon: faHandPeace, complete: hasUserClickedIntro,
time: "3 min", icon: faHandPeace,
userAction: "intro_cta_clicked", time: "3 min",
link: "https://www.youtube.com/watch?v=PK23097-25I" userAction: "intro_cta_clicked",
})} link: "https://www.youtube.com/watch?v=PK23097-25I"
{orgWorkspaces.length !== 0 && learningItem({ })}
text: "Add your secrets", {orgWorkspaces.length !== 0 && learningItemSquare({
subText: "Click to see example secrets, and add your own.", text: "Add your secrets",
complete: hasUserPushedSecrets, subText: "Drop a .env file or type your secrets.",
icon: faPlus, complete: hasUserPushedSecrets,
time: "1 min", icon: faPlus,
userAction: "first_time_secrets_pushed", time: "1 min",
link: `/project/${orgWorkspaces[0]?._id}/secrets` userAction: "first_time_secrets_pushed",
})} link: `/project/${orgWorkspaces[0]?._id}/secrets`
})}
{learningItemSquare({
text: "Invite your teammates",
subText: "Infisical is better used as a team.",
complete: usersInOrg,
icon: faUserPlus,
time: "2 min",
link: `/org/${router.query.id}/members?action=invite`
})}
<div className="block xl:hidden 2xl:block">{learningItemSquare({
text: "Join Infisical Slack",
subText: "Have any questions? Ask us!",
complete: hasUserClickedSlack,
icon: faSlack,
time: "1 min",
userAction: "slack_cta_clicked",
link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1ye0tm8ab-899qZ6ZbpfESuo6TEikyOQ"
})}</div>
</div>
{orgWorkspaces.length !== 0 && <div className="group text-mineshaft-100 relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-800 pl-2 pr-2 pt-4 pb-2 shadow-xl duration-200"> {orgWorkspaces.length !== 0 && <div className="group text-mineshaft-100 relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-800 pl-2 pr-2 pt-4 pb-2 shadow-xl duration-200">
<div className="mb-4 flex w-full flex-row items-center pr-4"> <div className="mb-4 flex w-full flex-row items-center pr-4">
<div className="mr-4 flex w-full flex-row items-center"> <div className="mr-4 flex w-full flex-row items-center">
@@ -339,23 +413,6 @@ export default function Organization() {
time: "15 min", time: "15 min",
link: "https://infisical.com/docs/integrations/overview" link: "https://infisical.com/docs/integrations/overview"
})} })}
{learningItem({
text: "Invite your teammates",
subText: "",
complete: usersInOrg,
icon: faUserPlus,
time: "2 min",
link: `/org/${router.query.id}/members?action=invite`
})}
{learningItem({
text: "Join Infisical Slack",
subText: "Have any questions? Ask us!",
complete: hasUserClickedSlack,
icon: faSlack,
time: "1 min",
userAction: "slack_cta_clicked",
link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1ye0tm8ab-899qZ6ZbpfESuo6TEikyOQ"
})}
</div>} </div>}
<div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4 pb-6"> <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4 pb-6">
<p className="mr-4 font-semibold text-white">Explore More</p> <p className="mr-4 font-semibold text-white">Explore More</p>