github/infisical
1
1
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-05-02 03:02:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

lots of frontend improvements

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-06-09 12:50:17 -07:00
parent 00fae0023a
commit 2bae6cf084
24 changed files with 221 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/ee/services/EELicenseService.ts
View File

@@ -28,6 +28,7 @@ interface FeatureSet {
customRateLimits: boolean;
customAlerts: boolean;
auditLogs: boolean;
envLimit?: number | null;
}
/**
@@ -55,7 +56,8 @@ class EELicenseService {
rbac: true,
customRateLimits: true,
customAlerts: true,
auditLogs: false
auditLogs: false,
envLimit: null
}
public localFeatureSet: NodeCache;

4
frontend/src/components/basic/dialog/AddProjectMemberDialog.tsx
View File

@@ -53,7 +53,7 @@ const AddProjectMemberDialog = ({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform rounded-md border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Panel className="w-full max-w-md transform rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-left align-middle shadow-xl transition-all">
{data?.length > 0 ? (
<Dialog.Title
as="h3"
@@ -64,7 +64,7 @@ const AddProjectMemberDialog = ({
) : (
<Dialog.Title
as="h3"
className="z-50 text-lg font-medium leading-6 text-gray-400"
className="z-50 text-lg font-medium text-mineshaft-300 mb-4"
>
{t('section.members.add-dialog.already-all-invited')}
</Dialog.Title>

21
frontend/src/components/basic/table/ProjectUsersTable.tsx
View File

@@ -25,6 +25,7 @@ type Props = {
changeData: (users: any[]) => void;
myUser: string;
filter: string;
isUserListLoading: boolean;
};
type EnvironmentProps = {
@@ -38,7 +39,7 @@ type EnvironmentProps = {
* @param {*} props
* @returns
*/
const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoading }: Props) => {
const [roleSelected, setRoleSelected] = useState(
Array(userData?.length).fill(userData.map((user) => user.role))
);
@@ -205,7 +206,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
};
return (
<div className="table-container relative mb-6 mt-1 min-w-max rounded-md border border-mineshaft-700 bg-bunker">
<div className="table-container relative mb-6 mt-1 min-w-max rounded-md border border-mineshaft-600 bg-bunker">
<div className="absolute h-[3.1rem] w-full rounded-t-md bg-white/5" />
<UpgradePlanModal
isOpen={isUpgradeModalOpen}
@@ -213,7 +214,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
text="You can change user permissions if you switch to Infisical's Professional plan."
/>
<table className="my-0.5 w-full">
<thead className="text-xs font-light text-gray-400">
<thead className="text-xs font-light text-gray-400 bg-mineshaft-800">
<tr>
<th className="py-3.5 pl-4 text-left">NAME</th>
<th className="py-3.5 pl-4 text-left">EMAIL</th>
@@ -231,7 +232,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
</tr>
</thead>
<tbody>
{userData?.filter(
{!isUserListLoading && userData?.filter(
(user) =>
user.firstName?.toLowerCase().includes(filter) ||
user.lastName?.toLowerCase().includes(filter) ||
@@ -245,14 +246,14 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
user.email?.toLowerCase().includes(filter)
)
.map((row, index) => (
<tr key={guidGenerator()} className="bg-bunker-600 text-sm hover:bg-bunker-500">
<td className="border-t border-mineshaft-700 py-2 pl-4 text-gray-300">
<tr key={guidGenerator()} className="bg-mineshaft-800 text-sm">
<td className="border-t border-mineshaft-600 py-2 pl-4 text-gray-300">
{row.firstName} {row.lastName}
</td>
<td className="border-t border-mineshaft-700 py-2 pl-4 text-gray-300">
<td className="border-t border-mineshaft-600 py-2 pl-4 text-gray-300">
{row.email}
</td>
<td className="border-t border-mineshaft-700 py-2 pl-6 pr-10 text-gray-300">
<td className="border-t border-mineshaft-600 py-2 pl-6 pr-10 text-gray-300">
<div className="flex h-full flex-row items-center justify-start">
<Select
className="w-36 bg-mineshaft-700"
@@ -391,6 +392,10 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
</td>
</tr>
))}
{isUserListLoading && <>
<tr key={guidGenerator()} className="bg-mineshaft-800 text-sm animate-pulse h-14 w-full"/>
<tr key={guidGenerator()} className="bg-mineshaft-800 text-sm animate-pulse h-14 w-full"/>
</>}
</tbody>
</table>
</div>

2
frontend/src/components/v2/EmptyState/EmptyState.tsx
View File

@@ -21,7 +21,7 @@ export const EmptyState = ({
}: Props) => (
<div
className={twMerge(
'flex w-full flex-col items-center bg-bunker-700 px-2 pt-6 text-bunker-300',
'flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-6 text-bunker-300',
className
)}
>

12
frontend/src/components/v2/Table/Table.tsx
View File

@@ -16,8 +16,8 @@ export const TableContainer = ({
}: TableContainerProps): JSX.Element => (
<div
className={twMerge(
'relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter shadow-md',
isRounded && 'rounded-md',
'relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter',
isRounded && 'rounded-lg',
className
)}
>
@@ -34,7 +34,7 @@ export type TableProps = {
export const Table = ({ children, className }: TableProps): JSX.Element => (
<table
className={twMerge(
'w-full rounded-md bg-bunker-800 p-2 text-left text-sm text-gray-300',
'w-full bg-mineshaft-800 p-2 text-left text-sm text-gray-300',
className
)}
>
@@ -49,7 +49,7 @@ export type THeadProps = {
};
export const THead = ({ children, className }: THeadProps): JSX.Element => (
<thead className={twMerge('bg-bunker text-xs uppercase text-bunker-300', className)}>
<thead className={twMerge('bg-mineshaft-800 text-xs uppercase text-bunker-300', className)}>
{children}
</thead>
);
@@ -62,7 +62,7 @@ export type TrProps = {
export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
<tr
className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)}
className={twMerge('border border-solid border-mineshaft-700 cursor-default', className)}
{...props}
>
{children}
@@ -76,7 +76,7 @@ export type ThProps = {
};
export const Th = ({ children, className }: ThProps): JSX.Element => (
<th className={twMerge('bg-bunker-500 px-5 pt-4 pb-3.5 font-semibold', className)}>{children}</th>
<th className={twMerge('bg-mineshaft-800 px-5 pt-4 pb-3.5 font-semibold border-b-2 border-mineshaft-600', className)}>{children}</th>
);
// table body

2
frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
View File

@@ -18,7 +18,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
href={`/settings/billing/${localStorage.getItem('projectData.id') as string}`}
key="upgrade-plan"
>
<Button className="mr-4 ml-2">Upgrade Plan</Button>
<Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>
</Link>,
<ModalClose asChild key="upgrade-plan-cancel">
<Button colorSchema="secondary" variant="plain">

6
frontend/src/context/SubscriptionContext/SubscriptionContext.tsx
View File

@@ -1,14 +1,13 @@
import { createContext, ReactNode, useContext, useMemo } from 'react';
import { useGetOrgSubscription } from '@app/hooks/api';
import { GetSubscriptionPlan } from '@app/hooks/api/types';
import { SubscriptionPlan } from '@app/hooks/api/types';
import { useWorkspace } from '../WorkspaceContext';
// import { Subscription } from '@app/hooks/api/workspace/types';
type TSubscriptionContext = {
subscription?: GetSubscriptionPlan;
subscriptionPlan: string;
subscription?: SubscriptionPlan;
isLoading: boolean;
};
@@ -28,7 +27,6 @@ export const SubscriptionProvider = ({ children }: Props): JSX.Element => {
const value = useMemo<TSubscriptionContext>(
() => ({
subscription: data,
subscriptionPlan: data?.data?.[0]?.plan?.product || '',
isLoading
}),
[data, isLoading]

172
frontend/src/ee/components/ActivityTable.tsx
View File

@@ -1,7 +1,6 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import Image from 'next/image';
import { faAngleDown, faAngleRight, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -48,7 +47,7 @@ const ActivityLogsRow = ({
const { t } = useTranslation();
const renderUser = () => {
if (row?.user) return `User: ${row.user}`;
if (row?.user) return `${row.user}`;
if (row?.serviceAccount) return `Service Account: ${row.serviceAccount.name}`;
if (row?.serviceTokenData.name) return `Service Token: ${row.serviceTokenData.name}`;
@@ -56,71 +55,77 @@ const ActivityLogsRow = ({
};
return (
<>
<tr key={guidGenerator()} className="w-full bg-bunker-800 text-sm duration-100">
<td
onKeyDown={() => null}
<div key={guidGenerator()} className="w-full bg-mineshaft-800 text-sm text-mineshaft-200 duration-100 flex flex-row items-center">
<button
type="button"
onClick={() => setPayloadOpened(!payloadOpened)}
className="flex cursor-pointer items-center border-t border-mineshaft-700 text-gray-300"
className="border-t border-mineshaft-700 pt-[0.58rem]"
>
<FontAwesomeIcon
icon={payloadOpened ? faAngleDown : faAngleRight}
className={`mt-2.5 ml-6 text-bunker-100 hover:bg-mineshaft-700 ${
payloadOpened && 'bg-mineshaft-500'
className={`ml-6 mb-2 text-mineshaft-300 cursor-pointer ${
payloadOpened ? 'bg-mineshaft-500 hover:bg-mineshaft-500' : 'hover:bg-mineshaft-700'
} h-4 w-4 rounded-md p-1 duration-100`}
/>
</td>
<td className="border-t border-mineshaft-700 py-3 text-gray-300">
</button>
<div className="border-t border-mineshaft-700 py-3 w-1/4 pl-6">
{row.payload
?.map(
(action) =>
`${String(action.secretVersions.length)} ${t(`activity.event.${action.name}`)}`
)
.join(' and ')}
</td>
<td className="border-t border-mineshaft-700 py-3 pl-6 text-gray-300">{renderUser()}</td>
<td className="border-t border-mineshaft-700 py-3 pl-6 text-gray-300">{row.channel}</td>
<td className="border-t border-mineshaft-700 py-3 pl-6 text-gray-300">
</div>
<div className="border-t border-mineshaft-700 py-3 pl-6 w-1/4">{renderUser()}</div>
<div className="border-t border-mineshaft-700 py-3 pl-6 w-1/4">{row.channel}</div>
<div className="border-t border-mineshaft-700 py-3 pl-6 w-1/4">
{timeSince(new Date(row.createdAt))}
</td>
</tr>
</div>
</div>
{payloadOpened && (
<tr className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200">
<td />
<td>{String(t('common.timestamp'))}</td>
<td>{row.createdAt}</td>
</tr>
<div className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200 bg-mineshaft-900/50 w-full flex flex-row items-center">
<div className='max-w-xl w-full flex flex-row items-center'>
<div className='w-24' />
<div className='w-1/2'>{String(t('common.timestamp'))}</div>
<div className='w-1/2'>{row.createdAt}</div>
</div>
</div>
)}
{payloadOpened &&
row.payload?.map(
(action) =>
action.secretVersions.length > 0 && (
<tr
key={action._id}
className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200"
<div
key={action.name}
className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200 bg-mineshaft-900/50 w-full flex flex-row items-center"
>
<td />
<td className="">{t(`activity.event.${action.name}`)}</td>
<td
onKeyDown={() => null}
className="cursor-pointer text-primary-300 duration-200 hover:text-primary"
onClick={() => toggleSidebar(action._id)}
>
{action.secretVersions.length +
(action.secretVersions.length !== 1 ? ' secrets' : ' secret')}
<FontAwesomeIcon
icon={faUpRightFromSquare}
className="ml-2 mb-0.5 h-3 w-3 font-light"
/>
</td>
</tr>
<div className='max-w-xl w-full flex flex-row items-center'>
<div className='w-24' />
<div className='w-1/2'>{t(`activity.event.${action.name}`)}</div>
<button
type="button"
onClick={() => toggleSidebar(action._id)}
className='w-1/2 text-primary-300 hover:text-primary-500 flex flex-row justify-left items-center duration-100'
>
{action.secretVersions.length +
(action.secretVersions.length !== 1 ? ' secrets' : ' secret')}
<FontAwesomeIcon
icon={faUpRightFromSquare}
className="ml-2 mb-0.5 h-3 w-3 font-light"
/>
</button>
</div>
</div>
)
)}
{payloadOpened && (
<tr className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200">
<td />
<td>{String(t('activity.ip-address'))}</td>
<td>{row.ipAddress}</td>
</tr>
<div className="h-9 border-t border-mineshaft-700 text-sm text-bunker-200 bg-mineshaft-900/50 w-full flex flex-row items-center">
<div className='max-w-xl w-full flex flex-row items-center'>
<div className='w-24' />
<div className='w-1/2'>{String(t('activity.ip-address'))}</div>
<div className='w-1/2'>{row.ipAddress}</div>
</div>
</div>
)}
</>
);
@@ -147,47 +152,48 @@ const ActivityTable = ({
return (
<div className="mt-8 w-full px-6">
<div className="table-container relative mb-6 w-full rounded-md border border-mineshaft-700 bg-bunker">
<div className="absolute h-[3rem] w-full rounded-t-md bg-white/5" />
<table className="my-1 w-full">
<thead className="text-bunker-300">
<tr className="text-sm">
<th aria-label="actions" className="pl-6 pt-2.5 pb-3 text-left" />
<th className="pt-2.5 pb-3 text-left font-semibold">
{String(t('common.event')).toUpperCase()}
</th>
<th className="pl-6 pt-2.5 pb-3 text-left font-semibold">
{String(t('common.user')).toUpperCase()}
</th>
<th className="pl-6 pt-2.5 pb-3 text-left font-semibold">
{String(t('common.source')).toUpperCase()}
</th>
<th className="pl-6 pt-2.5 pb-3 text-left font-semibold">
{String(t('common.time')).toUpperCase()}
</th>
<th aria-label="action" />
</tr>
</thead>
<tbody>
{data?.map((row, index) => (
<ActivityLogsRow
key={`activity.${index + 1}.${row._id}`}
row={row}
toggleSidebar={toggleSidebar}
/>
))}
</tbody>
</table>
<div className="table-container relative mb-6 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800">
{/* <div className="absolute h-[3rem] w-full rounded-t-md bg-white/5" /> */}
<div className="my-1 w-full">
<div className="text-bunker-300 border-b border-mineshaft-600">
<div className="text-sm flex flex-row w-full">
<button
type="button"
onClick={() => {}}
className="opacity-0"
>
<FontAwesomeIcon
icon={faAngleRight}
className="ml-6 mb-2 text-bunker-100 hover:bg-mineshaft-700 cursor-pointer h-4 w-4 rounded-md p-1 duration-100"
/>
</button>
<div className="flex flex-row justify-between w-full">
<div className="pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
{String(t('common.event')).toUpperCase()}
</div>
<div className="pl-6 pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
{String(t('common.user')).toUpperCase()}
</div>
<div className="pl-6 pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
{String(t('common.source')).toUpperCase()}
</div>
<div className="pl-6 pt-2.5 pb-3 text-left font-semibold w-1/4 pl-6">
{String(t('common.time')).toUpperCase()}
</div>
</div>
</div>
</div>
{data?.map((row, index) => (
<ActivityLogsRow
key={`activity.${index + 1}.${row._id}`}
row={row}
toggleSidebar={toggleSidebar}
/>
))}
</div>
</div>
{isLoading && (
<div className="mb-8 mt-4 flex w-full justify-center">
<Image
src="/images/loading/loading.gif"
height={60}
width={100}
alt="loading animation"
/>
</div>
<div className="mb-8 mt-4 bg-mineshaft-800 rounded-md h-60 flex w-full justify-center animate-pulse" />
)}
</div>
);

10
frontend/src/hooks/api/subscriptions/queries.tsx
View File

@@ -2,20 +2,20 @@ import { useQuery } from '@tanstack/react-query';
import { apiRequest } from '@app/config/request';
import { GetSubscriptionPlan } from './types';
import { SubscriptionPlan } from './types';
// import { Workspace } from './types';
const subscriptionKeys = {
getOrgSubsription: (orgID: string) => ['subscription', { orgID }] as const
getOrgSubsription: (orgID: string) => ['plan', { orgID }] as const
};
const fetchOrgSubscription = async (orgID: string) => {
const { data } = await apiRequest.get<{ subscriptions: GetSubscriptionPlan }>(
`/api/v1/organization/${orgID}/subscriptions`
const { data } = await apiRequest.get<{ plan: SubscriptionPlan }>(
`/api/v1/organizations/${orgID}/plan`
);
return data.subscriptions;
return data.plan;
};
type UseGetOrgSubscriptionProps = {

37
frontend/src/hooks/api/subscriptions/types.ts
View File

@@ -1,25 +1,16 @@
export type GetSubscriptionPlan = {
data: { plan: SubscriptionPlan }[];
};
export type SubscriptionPlan = {
id: string;
object: string;
active: boolean;
aggregate_usage: unknown;
amount: 1400;
amount_decimal: 1400;
billing_scheme: string;
created: 1674833546;
currency: string;
interval: string;
interval_count: 1;
livemode: false;
metadata: {};
nickname: null;
product: string;
tiers_mode: unknown;
transform_usage: unknown;
trial_period_days: unknown;
usage_type: string;
_id: string;
membersUsed: number;
membersLimit: number;
auditLogs: boolean;
customAlerts: boolean;
customRateLimits: boolean;
pitRecovery: boolean;
rbac: boolean;
secretVersioning: boolean;
slug: string;
tier: number;
workspaceLimit: number;
workspacesUsed: number;
envLimit: number;
};

9
frontend/src/layouts/AppLayout/AppLayout.tsx
View File

@@ -31,7 +31,6 @@ import {
SelectItem,
UpgradePlanModal
} from '@app/components/v2';
import { plans } from '@app/const';
import { useOrganization, useSubscription, useUser, useWorkspace } from '@app/context';
import { usePopUp } from '@app/hooks';
import { fetchOrgUsers, useAddUserToWs, useCreateWorkspace, useUploadWsKey } from '@app/hooks/api';
@@ -59,10 +58,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
const { workspaces, currentWorkspace } = useWorkspace();
const { currentOrg } = useOrganization();
const { user } = useUser();
const { subscriptionPlan } = useSubscription();
const { subscription } = useSubscription();
const host = window.location.origin;
const isAddingProjectsAllowed =
subscriptionPlan !== plans.starter || (subscriptionPlan === plans.starter && workspaces.length < 3) || host !== 'https://app.infisical.com';
const isAddingProjectsAllowed = ((subscription?.workspacesUsed || 0) < (subscription?.workspaceLimit || 1)) || host !== 'https://app.infisical.com';
const createWs = useCreateWorkspace();
const uploadWsKey = useUploadWsKey();
@@ -104,7 +103,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
});
const userWorkspaces = orgUserProjects;
if (
(userWorkspaces.length === 0 &&
(userWorkspaces?.length === 0 &&
router.asPath !== '/noprojects' &&
!router.asPath.includes('home') &&
!router.asPath.includes('settings')) ||

20
frontend/src/pages/activity/[id].tsx
View File

@@ -6,7 +6,10 @@ import { useRouter } from 'next/router';
import Button from '@app/components/basic/buttons/Button';
import EventFilter from '@app/components/basic/EventFilter';
import NavHeader from '@app/components/navigation/NavHeader';
import { UpgradePlanModal } from '@app/components/v2';
import { useSubscription } from '@app/context';
import ActivitySideBar from '@app/ee/components/ActivitySideBar';
import { usePopUp } from '@app/hooks/usePopUp';
import getProjectLogs from '../../ee/api/secrets/GetProjectLogs';
import ActivityTable from '../../ee/components/ActivityTable';
@@ -67,6 +70,10 @@ export default function Activity() {
const currentLimit = 10;
const [currentSidebarAction, toggleSidebar] = useState<string>();
const { t } = useTranslation();
const { subscription } = useSubscription();
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
'upgradePlan'
] as const);
// this use effect updates the data in case of a new filter being added
useEffect(() => {
@@ -137,11 +144,15 @@ export default function Activity() {
}, [currentLimit, currentOffset]);
const loadMoreLogs = () => {
setCurrentOffset(currentOffset + currentLimit);
if (subscription?.auditLogs === false) {
handlePopUpOpen('upgradePlan');
} else {
setCurrentOffset(currentOffset + currentLimit);
}
};
return (
<div className="mx-6 lg:mx-0 w-full h-screen">
<div className="mx-6 lg:mx-0 w-full h-full">
<Head>
<title>Audit Logs</title>
<link rel="icon" href="/infisical.ico" />
@@ -173,6 +184,11 @@ export default function Activity() {
/>
</div>
</div>
<UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={() => handlePopUpClose('upgradePlan')}
text="You can see more logs if you switch to Infisical's Business/Professional Plan."
/>
</div>
);
}

25
frontend/src/pages/users/[id].tsx
View File

@@ -11,6 +11,7 @@ import AddProjectMemberDialog from '@app/components/basic/dialog/AddProjectMembe
import ProjectUsersTable from '@app/components/basic/table/ProjectUsersTable';
import NavHeader from '@app/components/navigation/NavHeader';
import guidGenerator from '@app/components/utilities/randomId';
import { Input } from '@app/components/v2';
import {
decryptAssymmetric,
@@ -56,6 +57,7 @@ export default function Users() {
const workspaceId = router.query.id as string;
const [userList, setUserList] = useState<any[]>([]);
const [isUserListLoading, setIsUserListLoading] = useState(true);
const [orgUserList, setOrgUserList] = useState<any[]>([]);
useEffect(() => {
@@ -81,6 +83,8 @@ export default function Users() {
}));
setUserList(tempUserList);
setIsUserListLoading(false);
// This is needed to know wha users from an org (if any), we are able to add to a certain project
const orgUsers = await getOrganizationUsers({
orgId: String(localStorage.getItem('orgData.id'))
@@ -151,9 +155,8 @@ export default function Users() {
<link rel="icon" href="/infisical.ico" />
</Head>
<NavHeader pageName={t('settings.members.title')} isProjectRelated />
<div className="flex flex-col items-start justify-start px-6 py-6 pb-4 text-3xl">
<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">{t('settings.members.title')}</p>
<p className="mr-4 text-base text-gray-400">{t('settings.members.description')}</p>
</div>
<AddProjectMemberDialog
isOpen={isAddOpen}
@@ -169,20 +172,17 @@ export default function Users() {
setEmail={setEmail}
/>
{/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
<div className="flex w-full flex-row items-start px-6 pb-1">
<div className="mt-2 flex h-10 w-full flex-row items-center rounded-md bg-white/5">
<FontAwesomeIcon
className="rounded-l-md bg-white/5 py-3 pl-4 pr-2 text-gray-400"
icon={faMagnifyingGlass}
/>
<input
className="h-full w-full rounded-r-md bg-white/5 pl-2 text-gray-400 outline-none"
<div className="absolute right-4 top-36 flex w-full flex-row items-start px-6 pb-1">
<div className="flex w-full max-w-sm flex flex-row ml-auto">
<Input
className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
placeholder="Search by secret name..."
value={searchUsers}
onChange={(e) => setSearchUsers(e.target.value)}
placeholder={String(t('section.members.search-members'))}
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
/>
</div>
<div className="mt-2 ml-2 flex min-w-max flex-row items-start justify-start">
<div className="ml-2 flex min-w-max flex-row items-start justify-start">
<Button
text={String(t('section.members.add-member'))}
onButtonPressed={openAddModal}
@@ -198,6 +198,7 @@ export default function Users() {
changeData={setUserList}
myUser={personalEmail}
filter={searchUsers}
isUserListLoading={isUserListLoading}
// onClick={openDeleteModal}
// deleteUser={deleteMembership}
// setUserIdToBeDeleted={setUserIdToBeDeleted}

24
frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
View File

@@ -2,10 +2,12 @@ import { useEffect, useMemo, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/router';
import { faKey, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { yupResolver } from '@hookform/resolvers/yup';
import NavHeader from '@app/components/navigation/NavHeader';
import { Button, TableContainer, Tooltip } from '@app/components/v2';
import { Button, Input, TableContainer, Tooltip } from '@app/components/v2';
import { useWorkspace } from '@app/context';
import {
useGetProjectSecretsByKey,
@@ -27,6 +29,8 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
const workspaceId = currentWorkspace?._id as string;
const { data: latestFileKey } = useGetUserWsKey(workspaceId);
const [searchFilter, setSearchFilter] = useState('');
useEffect(() => {
if (!isLoading && !workspaceId && router.isReady) {
router.push('/noprojects');
@@ -88,7 +92,7 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
}
// when secrets is not loading and secrets list is empty
const isDashboardSecretEmpty = !isSecretsLoading && !Object.keys(secrets?.secrets || {})?.length;
const isDashboardSecretEmpty = !isSecretsLoading && !Object.keys(secrets?.secrets || {})?.filter((secret: any) => secret.toUpperCase().includes(searchFilter.toUpperCase()))?.length;
return (
<div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
@@ -121,6 +125,15 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
</a>
</p>
</div>
<div className="absolute top-[11.1rem] right-6 flex w-full max-w-sm flex-grow space-x-2">
<Input
className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
placeholder="Search by secret name..."
value={searchFilter}
onChange={(e) => setSearchFilter(e.target.value)}
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
/>
</div>
<div className="overflow-y-auto">
<div className="sticky top-0 mt-8 flex h-10 min-w-[60.3rem] flex-row rounded-md border border-mineshaft-600 bg-mineshaft-800">
<div className="sticky top-0 flex w-10 items-center justify-center border-none px-4">
@@ -167,7 +180,7 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
<TableContainer className="border-none">
<table className="secret-table relative w-full bg-mineshaft-900">
<tbody className="max-h-screen overflow-y-auto">
{Object.keys(secrets?.secrets || {}).map((key, index) => (
{Object.keys(secrets?.secrets || {})?.filter((secret: any) => secret.toUpperCase().includes(searchFilter.toUpperCase())).map((key, index) => (
<EnvComparisonRow
key={`row-${key}`}
secrets={secrets?.secrets?.[key]}
@@ -184,8 +197,9 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
{isDashboardSecretEmpty && (
<div className="flex h-40 w-full flex-row rounded-md">
<div className="flex w-full min-w-[11rem] flex-col items-center justify-center rounded-md border-none bg-mineshaft-800 text-bunker-300">
<span className="mb-1">No secrets are available in this project yet.</span>
<span>You can go into any environment to add secrets there.</span>
<FontAwesomeIcon icon={faKey} className="text-4xl mb-4" />
<span className="mb-1">No secrets found.</span>
<span>To add more secrets you can explore any environment.</span>
</div>
</div>
)}

6
frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable react/jsx-no-useless-fragment */
import { useCallback, useState } from 'react';
import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { faCircle, faEye, faEyeSlash, faMinus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { twMerge } from 'tailwind-merge';
@@ -29,7 +29,9 @@ const DashboardInput = ({
const syntaxHighlight = useCallback((val: string) => {
if (val === undefined)
return (
<span className="cursor-default font-sans text-xs italic text-red-500/80">missing</span>
<span className="cursor-default font-sans text-xs italic text-red-500/80">
<FontAwesomeIcon icon={faMinus} className="mt-1" />
</span>
);
if (val?.length === 0)
return <span className="w-full font-sans text-bunker-400/80">EMPTY</span>;

11
frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
View File

@@ -38,7 +38,7 @@ export const OrgSettingsPage = () => {
const { currentOrg } = useOrganization();
const { currentWorkspace } = useWorkspace();
const { user } = useUser();
const { subscriptionPlan } = useSubscription();
const { subscription } = useSubscription();
const { createNotification } = useNotificationContext();
const orgId = currentOrg?._id || '';
@@ -60,14 +60,7 @@ export const OrgSettingsPage = () => {
const [completeInviteLink, setcompleteInviteLink] = useState<string | undefined>('');
const isMoreUsersNotAllowed =
(orgUsers || []).length >= 5 &&
subscriptionPlan === plans.starter &&
host === 'https://app.infisical.com' &&
currentWorkspace?._id !== '63ea8121b6e2b0543ba79616' &&
currentWorkspace?._id !== '634870246fd2e26f28e76996' &&
currentWorkspace?._id !== '63d823cef9e728a0a961255a' &&
currentWorkspace?._id !== '6412ec319db25595ac00b8c6';
const isMoreUsersNotAllowed = ((subscription?.membersUsed || 0) >= (subscription?.membersLimit || 1)) && host === 'https://app.infisical.com';
const onRenameOrg = async (name: string) => {
if (!currentOrg?._id) return;

9
frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
View File

@@ -13,7 +13,6 @@ import {
encryptSymmetric
} from '@app/components/utilities/cryptography/crypto';
import { Button, FormControl, Input } from '@app/components/v2';
import { plans } from '@app/const';
import { useSubscription, useWorkspace } from '@app/context';
import { useToggle } from '@app/hooks';
import {
@@ -89,10 +88,9 @@ export const ProjectSettingsPage = () => {
const deleteWsTag = useDeleteWsTag();
// get user subscription
const { subscriptionPlan } = useSubscription();
const { subscription } = useSubscription();
const host = window.location.origin;
const isEnvServiceAllowed =
subscriptionPlan !== plans.starter || host !== 'https://app.infisical.com';
const isEnvServiceAllowed = ((currentWorkspace?.environments || []).length < (subscription?.envLimit || 3) && host === 'https://app.infisical.com');
const onRenameWorkspace = async (name: string) => {
try {
@@ -402,7 +400,7 @@ export const ProjectSettingsPage = () => {
{!isBlindIndexedLoading && !isBlindIndexed && (
<ProjectIndexSecretsSection onEnableBlindIndices={onEnableBlindIndices} />
)}
<div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-4">
<div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-mineshaft-900 px-6 pl-6 pb-4 pt-4">
<p className="text-xl font-bold text-red">{t('settings.project.danger-zone')}</p>
<p className="text-md mt-2 text-gray-400">{t('settings.project.danger-zone-note')}</p>
<div className="mr-auto mt-4 max-h-28 w-full max-w-md">
@@ -418,6 +416,7 @@ export const ProjectSettingsPage = () => {
onChange={(e) => setDeleteProjectInput(e.target.value)}
value={deleteProjectInput}
placeholder="Type the project name to delete"
className="bg-mineshaft-800"
/>
</FormControl>
</div>

2
frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx
View File

@@ -13,7 +13,7 @@ export const AutoCapitalizationSection = ({
}: Props) => {
const { t } = useTranslation();
return (
<div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
<div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pb-6 pt-2">
<p className="mb-4 mt-2 text-xl font-semibold">{t('settings.project.auto-capitalization')}</p>
<Checkbox
className="data-[state=checked]:bg-primary"

19
frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/CopyProjectIDSection.tsx
View File

@@ -28,24 +28,9 @@ export const CopyProjectIDSection = ({ workspaceID }: Props): JSX.Element => {
};
return (
<div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pt-4 pb-2">
<div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pt-4 pb-2">
<p className="self-start text-xl font-semibold">{t('common.project-id')}</p>
<p className="mt-4 self-start text-base font-normal text-gray-400">
{t('settings.project.project-id-description')}
</p>
<p className="mt-2 self-start text-base font-normal text-gray-400">
{t('settings.project.project-id-description2')}
{/* eslint-disable-next-line react/jsx-no-target-blank */}
<a
href="https://infisical.com/docs/documentation/getting-started/introduction"
target="_blank"
rel="noopener"
className="text-primary duration-200 hover:opacity-80"
>
{t('settings.project.docs')}
</a>
</p>
<p className="mt-4 text-xs text-bunker-300">{t('settings.project.auto-generated')}</p>
<p className="mt-4 text-sm text-bunker-300 mb-2">{t('settings.project.auto-generated')}</p>
<div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400">
<p className="mr-2 pl-4 font-bold">{`${t('common.project-id')}:`}</p>
<p className="mr-4">{workspaceID}</p>

27
frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
View File

@@ -1,5 +1,5 @@
import { Controller, useForm } from 'react-hook-form';
import { faPencil, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
import { faPencil, faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
@@ -82,7 +82,7 @@ export const EnvironmentSection = ({
};
return (
<div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 p-6">
<div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 p-6">
<div className="mb-2 flex w-full flex-row justify-between">
<div className="flex w-full flex-col">
<p className="mb-3 text-xl font-semibold">Project Environments</p>
@@ -128,32 +128,27 @@ export const EnvironmentSection = ({
<Td>{slug}</Td>
<Td className="flex items-center justify-end">
<IconButton
className="mr-3"
className="mr-3 py-2"
onClick={() => {
if (isEnvServiceAllowed) {
handlePopUpOpen('createUpdateEnv', { name, slug });
reset({ environmentName: name, environmentSlug: slug });
} else {
handlePopUpOpen('upgradePlan');
}
handlePopUpOpen('createUpdateEnv', { name, slug });
reset({ environmentName: name, environmentSlug: slug });
}}
colorSchema="secondary"
colorSchema="primary"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faPencil} />
</IconButton>
<IconButton
onClick={() => {
if (isEnvServiceAllowed) {
handlePopUpOpen('deleteEnv', { name, slug });
} else {
handlePopUpOpen('upgradePlan');
}
handlePopUpOpen('deleteEnv', { name, slug });
}}
size="lg"
colorSchema="danger"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faTrashCan} />
<FontAwesomeIcon icon={faXmark} />
</IconButton>
</Td>
</Tr>

2
frontend/src/views/Settings/ProjectSettingsPage/components/ProjectIndexSecretsSection/ProjectIndexSecretsSection.tsx
View File

@@ -11,7 +11,7 @@ export const ProjectIndexSecretsSection = ({
onEnableBlindIndices
}: Props) => {
return (
<div className="rounded-md bg-white/5 p-6 my-2">
<div className="rounded-md bg-mineshaft-900 p-6 my-2">
<p className="mb-4 text-xl font-semibold">Blind Indices</p>
<p className="mb-4 text-sm text-gray-400">
Your project, created before the introduction of blind indexing, contains unindexed secrets. To access individual secrets by name through the SDK and public API, please enable blind indexing.

4
frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
View File

@@ -41,14 +41,14 @@ export const ProjectNameChangeSection = ({
return (
<form onSubmit={handleSubmit(onFormSubmit)}>
<div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-3">
<div className="mb-6 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pb-6 pt-3">
<p className="mb-4 mt-2 text-xl font-semibold">{t('common.display-name')}</p>
<div className="mb-2 w-full max-w-lg">
<Controller
defaultValue=""
render={({ field, fieldState: { error } }) => (
<FormControl isError={Boolean(error)} errorText={error?.message}>
<Input placeholder="Type your project name" {...field} />
<Input placeholder="Type your project name" {...field} className="bg-mineshaft-800" />
</FormControl>
)}
control={control}

2
frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
View File

@@ -74,7 +74,7 @@ export const SecretTagsSection = ({
};
return (
<div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 p-6">
<div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 p-6">
<div className="flex w-full flex-row justify-between">
<div className="flex w-full flex-col">
<p className="mb-3 text-xl font-semibold">Secret Tags</p>

18
frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
View File

@@ -120,23 +120,11 @@ export const ServiceTokenSection = ({
};
return (
<div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 p-6">
<div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 p-6">
<div className="flex w-full flex-row justify-between">
<div className="flex w-full flex-col">
<p className="mb-3 text-xl font-semibold">{t('section.token.service-tokens')}</p>
<p className="text-sm text-gray-400">{t('section.token.service-tokens-description')}</p>
<p className="mb-4 text-sm text-gray-400">
Please, make sure you are on the
<a
className="ml-1 text-primary underline underline-offset-2"
href="https://infisical.com/docs/cli/overview"
target="_blank"
rel="noreferrer"
>
latest version of CLI
</a>
.
</p>
<p className="text-sm text-gray-400 mb-4">{t('section.token.service-tokens-description')}</p>
</div>
<div>
<Modal
@@ -359,7 +347,7 @@ export const ServiceTokenSection = ({
))}
{!isLoading && tokens?.length === 0 && (
<Tr>
<Td colSpan={4} className="py-6 text-center text-bunker-400">
<Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
<EmptyState title="No service tokens found" icon={faKey} />
</Td>
</Tr>