synced/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2025-03-25 14:05:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1589 from Infisical/daniel/ui-improvements

Browse Source 
Fix: Select organization UX & project card enhancements
This commit is contained in:
Akhil Mohan
2024-03-18 20:14:39 +05:30
committed by GitHub
parent 1d3e03e308 d1dacd81aa
commit f73c807aa0
2 changed files with 25 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/pages/login/select-organization.tsx
View File

@ -1,5 +1,3 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { useCallback, useEffect } from "react";
import { useTranslation } from "react-i18next";
import Head from "next/head";
@ -76,25 +74,18 @@ export default function LoginPage() {
if (callbackPort) {
const privateKey = localStorage.getItem("PRIVATE_KEY");
if (!privateKey) {
createNotification({
text: "Private key not found",
type: "error"
});
}
let error: string | null = null;
if (!user.email) {
createNotification({
text: "User email not found",
type: "error"
});
}
if (!privateKey) error = "Private key not found";
if (!user.email) error = "User email not found";
if (!token) error = "No token found";
if (!token) {
if (error) {
createNotification({
text: "No token found",
text: error,
type: "error"
});
return;
}
const payload = {
@ -177,33 +168,22 @@ export default function LoginPage() {
<Spinner />
) : (
organizations.data?.map((org) => (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div
onClick={() => handleSelectOrganization(org)}
key={org.id}
className="group flex cursor-pointer items-center justify-between rounded-md bg-mineshaft-700 px-4 py-3 capitalize text-gray-200 shadow-md transition-colors hover:bg-mineshaft-600"
>
<p className="transition-colors">{org.name}</p>
<p className="truncate transition-colors">{org.name}</p>
<FontAwesomeIcon
icon={faArrowRight}
className="text-gray-400 transition-colors group-hover:text-primary-500"
className="text-gray-400 transition-all group-hover:translate-x-2 group-hover:text-primary-500"
/>
</div>
))
)}
</div>
<Button
className="mt-8"
colorSchema="primary"
isLoading={logout.isLoading}
isDisabled={logout.isLoading}
variant="solid"
size="lg"
onClick={handleLogout}
>
Logout
</Button>
</form>
</div>

26
frontend/src/pages/org/[id]/overview/index.tsx
View File

@ -454,7 +454,12 @@ const LearningItemSquare = ({
};
const formSchema = yup.object({
name: yup.string().required().label("Project Name").trim().max(64, "Too long, maximum length is 64 characters"),
name: yup
.string()
.required()
.label("Project Name")
.trim()
.max(64, "Too long, maximum length is 64 characters"),
addMembers: yup.bool().required().label("Add Members")
});
@ -631,22 +636,21 @@ const OrganizationPage = withPermission(
{orgWorkspaces
.filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase()))
.map((workspace) => (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
<div
onClick={() => {
router.push(`/project/${workspace.id}/secrets/overview`);
localStorage.setItem("projectData.id", workspace.id);
}}
key={workspace.id}
className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
>
<div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
<div className="mt-0 pb-6 text-sm text-mineshaft-300">
{workspace.environments?.length || 0} environments
</div>
<button
type="button"
onClick={() => {
router.push(`/project/${workspace.id}/secrets/overview`);
localStorage.setItem("projectData.id", workspace.id);
}}
>
<div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
<button type="button">
<div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all group-hover:border-primary-500/80 group-hover:bg-primary-800/20 group-hover:text-mineshaft-200">
Explore{" "}
<FontAwesomeIcon
icon={faArrowRight}
@ -693,7 +697,7 @@ const OrganizationPage = withPermission(
<a
target="_blank"
rel="noopener noreferrer"
className="group ml-auto w-max cursor-default rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200"
className="group ml-auto w-max cursor-default rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200"
href={feature.link}
>
Learn more{" "}