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

feat(#31): implemented ui for multi env and integrated api with backend

Browse Source 
fix(#31): fixed all v2 release conflict
This commit is contained in:
akhilmhdh
2023-01-11 23:12:05 +05:30
parent 9116bf3344
commit 84700308f5
23 changed files with 1051 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/app.ts
+1 -1
View File
@@ -104,12 +104,12 @@ app.use('/api/v1/integration', v1IntegrationRouter);
app.use('/api/v1/integration-auth', v1IntegrationAuthRouter);
// v2 routes
app.use('/api/v2/workspace', v2EnvironmentRouter);
app.use('/api/v2/workspace', v2WorkspaceRouter); // TODO: turn into plural route
app.use('/api/v2/secret', v2SecretRouter); // stop supporting, TODO: revise
app.use('/api/v2/secrets', v2SecretsRouter);
app.use('/api/v2/service-token', v2ServiceTokenDataRouter); // TODO: turn into plural route
app.use('/api/v2/api-key-data', v2APIKeyDataRouter);
app.use('/api/v2/environments', v2EnvironmentRouter);
// api docs
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerFile))
backend/src/controllers/v1/integrationAuthController.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import * as Sentry from '@sentry/node';
import axios from 'axios';
import { readFileSync } from 'fs';
import { IntegrationAuth, Integration } from '../../models';
import { INTEGRATION_SET, INTEGRATION_OPTIONS, ENV_DEV } from '../../variables';
import { INTEGRATION_SET, INTEGRATION_OPTIONS } from '../../variables';
import { IntegrationService } from '../../services';
import { getApps, revokeAccess } from '../../integrations';
backend/src/controllers/v2/environmentController.ts
+78 -41
View File
@@ -1,6 +1,13 @@
import { Request, Response } from 'express';
import * as Sentry from '@sentry/node';
import { Secret, ServiceToken, Workspace, Integration } from '../../models';
import {
Secret,
ServiceToken,
Workspace,
Integration,
ServiceTokenData,
} from '../../models';
import { SecretVersion } from '../../ee/models';
/**
* Create new workspace environment named [environmentName] under workspace with id
@@ -12,25 +19,24 @@ export const createWorkspaceEnvironment = async (
req: Request,
res: Response
) => {
const { workspaceId, environmentName, environmentSlug } = req.body;
const { workspaceId } = req.params;
const { environmentName, environmentSlug } = req.body;
try {
// atomic create the environment
const workspace = await Workspace.findOneAndUpdate(
{
_id: workspaceId,
'environments.slug': { $ne: environmentSlug },
'environments.name': { $ne: environmentName },
},
{
$addToSet: {
environments: { name: environmentName, slug: environmentSlug },
},
const workspace = await Workspace.findById(workspaceId).exec();
if (
!workspace ||
workspace?.environments.find(
({ name, slug }) => slug === environmentSlug || environmentName === name
)
) {
throw new Error('Failed to create workspace environment');
}
);
if (!workspace) {
throw new Error('Failed to update workspace environment');
}
workspace?.environments.push({
name: environmentName.toLowerCase(),
slug: environmentSlug.toLowerCase(),
});
await workspace.save();
} catch (err) {
Sentry.setUser({ email: req.user.email });
Sentry.captureException(err);
@@ -60,8 +66,8 @@ export const renameWorkspaceEnvironment = async (
req: Request,
res: Response
) => {
const { workspaceId, environmentName, environmentSlug, oldEnvironmentSlug } =
req.body;
const { workspaceId } = req.params;
const { environmentName, environmentSlug, oldEnvironmentSlug } = req.body;
try {
// user should pass both new slug and env name
if (!environmentSlug || !environmentName) {
@@ -69,25 +75,47 @@ export const renameWorkspaceEnvironment = async (
}
// atomic update the env to avoid conflict
const workspace = await Workspace.findOneAndUpdate(
{ _id: workspaceId, 'environments.slug': oldEnvironmentSlug },
{
'environments.$.name': environmentName,
'environments.$.slug': environmentSlug,
}
);
const workspace = await Workspace.findById(workspaceId).exec();
if (!workspace) {
throw new Error('Failed to update workspace');
throw new Error('Failed to create workspace environment');
}
const isEnvExist = workspace.environments.some(
({ name, slug }) =>
slug !== oldEnvironmentSlug &&
(name === environmentName || slug === environmentSlug)
);
if (isEnvExist) {
throw new Error('Invalid environment given');
}
const envIndex = workspace?.environments.findIndex(
({ slug }) => slug === oldEnvironmentSlug
);
if (envIndex === -1) {
throw new Error('Invalid environment given');
}
workspace.environments[envIndex].name = environmentName.toLowerCase();
workspace.environments[envIndex].slug = environmentSlug.toLowerCase();
await workspace.save();
await Secret.updateMany(
{ workspace: workspaceId, environment: oldEnvironmentSlug },
{ environment: environmentSlug }
);
await SecretVersion.updateMany(
{ workspace: workspaceId, environment: oldEnvironmentSlug },
{ environment: environmentSlug }
);
await ServiceToken.updateMany(
{ workspace: workspaceId, environment: oldEnvironmentSlug },
{ environment: environmentSlug }
);
await ServiceTokenData.updateMany(
{ workspace: workspaceId, environment: oldEnvironmentSlug },
{ environment: environmentSlug }
);
await Integration.updateMany(
{ workspace: workspaceId, environment: oldEnvironmentSlug },
{ environment: environmentSlug }
@@ -120,37 +148,46 @@ export const deleteWorkspaceEnvironment = async (
req: Request,
res: Response
) => {
const { workspaceId, environmentSlug } = req.body;
const { workspaceId } = req.params;
const { environmentSlug } = req.body;
try {
// atomic delete the env in the workspacce
const workspace = await Workspace.findOneAndUpdate(
{ _id: workspaceId },
{
$pull: {
environments: {
slug: environmentSlug,
},
},
}
);
// atomic update the env to avoid conflict
const workspace = await Workspace.findById(workspaceId).exec();
if (!workspace) {
throw new Error('Failed to delete workspace environment');
throw new Error('Failed to create workspace environment');
}
const envIndex = workspace?.environments.findIndex(
({ slug }) => slug === environmentSlug
);
if (envIndex === -1) {
throw new Error('Invalid environment given');
}
workspace.environments.splice(envIndex, 1);
await workspace.save();
// clean up
await Secret.deleteMany({
workspace: workspaceId,
environment: environmentSlug,
});
await SecretVersion.deleteMany({
workspace: workspaceId,
environment: environmentSlug,
});
await ServiceToken.deleteMany({
workspace: workspaceId,
environment: environmentSlug,
});
await ServiceTokenData.deleteMany({
workspace: workspaceId,
environment: environmentSlug,
});
await Integration.deleteMany({
workspace: workspaceId,
environment: environmentSlug,
});
} catch (err) {
Sentry.setUser({ email: req.user.email });
Sentry.captureException(err);
backend/src/ee/models/secretVersion.ts
-5
View File
@@ -2,10 +2,6 @@ import { Schema, model, Types } from 'mongoose';
import {
SECRET_SHARED,
SECRET_PERSONAL,
ENV_DEV,
ENV_TESTING,
ENV_STAGING,
ENV_PROD
} from '../../variables';
export interface ISecretVersion {
@@ -56,7 +52,6 @@ const secretVersionSchema = new Schema<ISecretVersion>(
},
environment: {
type: String,
enum: [ENV_DEV, ENV_TESTING, ENV_STAGING, ENV_PROD],
required: true
},
isDeleted: { // consider removing field
backend/src/models/integration.ts
+1 -1
View File
@@ -9,7 +9,7 @@ import {
export interface IIntegration {
_id: Types.ObjectId;
workspace: Types.ObjectId;
environment: 'dev' | 'test' | 'staging' | 'prod';
environment: string;
isActive: boolean;
app: string;
target: string;
backend/src/routes/v2/environment.ts
+14 -11
View File
@@ -1,4 +1,4 @@
import express from 'express';
import express, { Response, Request } from 'express';
const router = express.Router();
import { body, param } from 'express-validator';
import { environmentController } from '../../controllers/v2';
@@ -7,14 +7,15 @@ import {
requireWorkspaceAuth,
validateRequest,
} from '../../middleware';
import { ADMIN, MEMBER, COMPLETED, GRANTED } from '../../variables';
import { ADMIN, MEMBER } from '../../variables';
router.post(
'/:workspaceId',
requireAuth,
'/:workspaceId/environments',
requireAuth({
acceptedAuthModes: ['jwt'],
}),
requireWorkspaceAuth({
acceptedRoles: [ADMIN, MEMBER],
acceptedStatuses: [COMPLETED, GRANTED],
}),
param('workspaceId').exists().trim(),
body('environmentSlug').exists().trim(),
@@ -24,11 +25,12 @@ router.post(
);
router.put(
'/:workspaceId',
requireAuth,
'/:workspaceId/environments',
requireAuth({
acceptedAuthModes: ['jwt'],
}),
requireWorkspaceAuth({
acceptedRoles: [ADMIN, MEMBER],
acceptedStatuses: [COMPLETED, GRANTED],
}),
param('workspaceId').exists().trim(),
body('environmentSlug').exists().trim(),
@@ -39,11 +41,12 @@ router.put(
);
router.delete(
'/:workspaceId',
requireAuth,
'/:workspaceId/environments',
requireAuth({
acceptedAuthModes: ['jwt'],
}),
requireWorkspaceAuth({
acceptedRoles: [ADMIN],
acceptedStatuses: [GRANTED],
}),
param('workspaceId').exists().trim(),
body('environmentSlug').exists().trim(),
backend/src/routes/v2/secrets.ts
+2 -2
View File
@@ -18,7 +18,7 @@ import {
router.post(
'/',
body('workspaceId').exists().isString().trim(),
body('environment').exists().isString().trim().isIn(['dev', 'staging', 'prod', 'test']),
body('environment').exists().isString().trim(),
body('secrets')
.exists()
.custom((value) => {
@@ -73,7 +73,7 @@ router.post(
router.get(
'/',
query('workspaceId').exists().trim(),
query('environment').exists().trim().isIn(['dev', 'staging', 'prod', 'test']),
query('environment').exists().trim(),
validateRequest,
requireAuth({
acceptedAuthModes: ['jwt', 'serviceToken']
frontend/components/basic/Listbox.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ export default function ListBox({
<Listbox.Option
key={personIdx}
className={({ active, selected }) =>
`my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
`my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md capitalize ${
selected ? 'bg-white/10 text-gray-400 font-bold' : ''
} ${
active && !selected
frontend/components/basic/dialog/AddServiceTokenDialog.js
+84 -80
View File
@@ -8,7 +8,6 @@ import nacl from "tweetnacl";
import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
import { envMapping } from "../../../public/data/frequentConstants";
import {
decryptAssymmetric,
encryptAssymmetric,
@@ -34,11 +33,12 @@ const AddServiceTokenDialog = ({
workspaceId,
workspaceName,
serviceTokens,
environments,
setServiceTokens
}) => {
const [serviceToken, setServiceToken] = useState("");
const [serviceTokenName, setServiceTokenName] = useState("");
const [serviceTokenEnv, setServiceTokenEnv] = useState("Development");
const [selectedServiceTokenEnv, setSelectedServiceTokenEnv] = useState(environments?.[0]);
const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day");
const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
const { t } = useTranslation();
@@ -66,7 +66,7 @@ const AddServiceTokenDialog = ({
let newServiceToken = await addServiceToken({
name: serviceTokenName,
workspaceId,
environment: envMapping[serviceTokenEnv],
environment: selectedServiceTokenEnv.slug,
expiresIn: expiryMapping[serviceTokenExpiresIn],
encryptedKey: ciphertext,
iv,
@@ -101,155 +101,159 @@ const AddServiceTokenDialog = ({
};
return (
<div className="z-50">
<div className='z-50'>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Dialog as='div' className='relative' onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div className="fixed inset-0 bg-bunker-700 bg-opacity-80" />
<div className='fixed inset-0 bg-bunker-700 bg-opacity-80' />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<div className='fixed inset-0 overflow-y-auto'>
<div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'
>
{serviceToken == "" ? (
<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
{serviceToken == '' ? (
<Dialog.Panel className='w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
as='h3'
className='text-lg font-medium leading-6 text-gray-400 z-50'
>
{t("section-token:add-dialog.title", {
{t('section-token:add-dialog.title', {
target: workspaceName,
})}
</Dialog.Title>
<div className="mt-2 mb-4">
<div className="flex flex-col">
<p className="text-sm text-gray-500">
{t("section-token:add-dialog.description")}
<div className='mt-2 mb-4'>
<div className='flex flex-col'>
<p className='text-sm text-gray-500'>
{t('section-token:add-dialog.description')}
</p>
</div>
</div>
<div className="max-h-28 mb-2">
<div className='max-h-28 mb-2'>
<InputField
label={t("section-token:add-dialog.name")}
label={t('section-token:add-dialog.name')}
onChangeHandler={setServiceTokenName}
type="varName"
type='varName'
value={serviceTokenName}
placeholder=""
placeholder=''
isRequired
/>
</div>
<div className="max-h-28 mb-2">
<div className='max-h-28 mb-2'>
<ListBox
selected={serviceTokenEnv}
onChange={setServiceTokenEnv}
data={[
"Development",
"Staging",
"Production",
"Testing",
]}
selected={selectedServiceTokenEnv?.name}
data={environments.map(({ name }) => name)}
onChange={(envName) =>
setSelectedServiceTokenEnv(
environments.find(
({ name }) => envName === name
) || {
name: 'unknown',
slug: 'unknown',
}
)
}
isFull={true}
text={`${t("common:environment")}: `}
text={`${t('common:environment')}: `}
/>
</div>
<div className="max-h-28">
<div className='max-h-28'>
<ListBox
selected={serviceTokenExpiresIn}
onChange={setServiceTokenExpiresIn}
data={[
"1 day",
"7 days",
"1 month",
"6 months",
"12 months",
'1 day',
'7 days',
'1 month',
'6 months',
'12 months',
]}
isFull={true}
text={`${t("common:expired-in")}: `}
text={`${t('common:expired-in')}: `}
/>
</div>
<div className="max-w-max">
<div className="mt-6 flex flex-col justify-start w-max">
<div className='max-w-max'>
<div className='mt-6 flex flex-col justify-start w-max'>
<Button
onButtonPressed={() => generateServiceToken()}
color="mineshaft"
text={t("section-token:add-dialog.add")}
textDisabled={t("section-token:add-dialog.add")}
size="md"
active={serviceTokenName == "" ? false : true}
color='mineshaft'
text={t('section-token:add-dialog.add')}
textDisabled={t('section-token:add-dialog.add')}
size='md'
active={serviceTokenName == '' ? false : true}
/>
</div>
</div>
</Dialog.Panel>
) : (
<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Panel className='w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
as='h3'
className='text-lg font-medium leading-6 text-gray-400 z-50'
>
{t("section-token:add-dialog.copy-service-token")}
{t('section-token:add-dialog.copy-service-token')}
</Dialog.Title>
<div className="mt-2 mb-4">
<div className="flex flex-col">
<p className="text-sm text-gray-500">
<div className='mt-2 mb-4'>
<div className='flex flex-col'>
<p className='text-sm text-gray-500'>
{t(
"section-token:add-dialog.copy-service-token-description"
'section-token:add-dialog.copy-service-token-description'
)}
</p>
</div>
</div>
<div className="w-full">
<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-20">
<div className='w-full'>
<div className='flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-20'>
<input
type="text"
type='text'
value={serviceToken}
id="serviceToken"
className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"
id='serviceToken'
className='invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none'
></input>
<div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">
<div className='bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none'>
{serviceToken}
</div>
<div className="group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200">
<div className='group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200'>
<button
onClick={copyToClipboard}
className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
className='h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200'
>
{serviceTokenCopied ? (
<FontAwesomeIcon
icon={faCheck}
className="pr-0.5"
className='pr-0.5'
/>
) : (
<FontAwesomeIcon icon={faCopy} />
)}
</button>
<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
{t("common:click-to-copy")}
<span className='absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm'>
{t('common:click-to-copy')}
</span>
</div>
</div>
</div>
<div className="mt-6 flex flex-col justify-start w-max">
<div className='mt-6 flex flex-col justify-start w-max'>
<Button
onButtonPressed={() => closeAddServiceTokenModal()}
color="mineshaft"
text="Close"
size="md"
color='mineshaft'
text='Close'
size='md'
/>
</div>
</Dialog.Panel>
frontend/components/basic/dialog/AddEnvironmentDialog.tsx → frontend/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
+22 -4
View File
@@ -12,15 +12,24 @@ type Props = {
// on edit mode load up initial values
initialValues?: FormFields;
onClose: () => void;
onSubmit: (envName: string, envSlug: string) => void;
onCreateSubmit: (data: FormFields) => void;
onEditSubmit: (data: FormFields) => void;
};
// TODO: Migrate to better form management and validation. Preferable react-hook-form + yup
/**
* The dialog modal for when the user wants to create a new workspace
* @param {*} param0
* @returns
*/
export const AddEnvironmentDialog = ({ isOpen, onClose, onSubmit, initialValues, isEditMode }: Props) => {
export const AddUpdateEnvironmentDialog = ({
isOpen,
onClose,
onCreateSubmit,
onEditSubmit,
initialValues,
isEditMode,
}: Props) => {
const [formInput, setFormInput] = useState<FormFields>({
name: '',
slug: '',
@@ -39,7 +48,15 @@ export const AddEnvironmentDialog = ({ isOpen, onClose, onSubmit, initialValues,
const onFormSubmit: FormEventHandler = (e) => {
e.preventDefault();
console.log(formInput);
const data = {
name: formInput.name.toLowerCase(),
slug: formInput.slug.toLowerCase(),
};
if (isEditMode) {
onEditSubmit(data);
return;
}
onCreateSubmit(data);
};
return (
@@ -81,7 +98,7 @@ export const AddEnvironmentDialog = ({ isOpen, onClose, onSubmit, initialValues,
<form onSubmit={onFormSubmit}>
<div className='max-h-28 mt-4'>
<InputField
label='Project Name'
label='Environment Name'
onChangeHandler={(val) => onInputChange('name', val)}
type='varName'
value={formInput.name}
@@ -112,6 +129,7 @@ export const AddEnvironmentDialog = ({ isOpen, onClose, onSubmit, initialValues,
type='submit'
color='mineshaft'
text={isEditMode ? 'Update' : 'Create'}
active={formInput.name !== '' && formInput.slug !== ''}
size='md'
/>
</div>
frontend/components/basic/dialog/DeleteActionModal.tsx
+5 -1
View File
@@ -1,4 +1,4 @@
import { Fragment, useState } from 'react';
import { Fragment, useEffect, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import InputField from '../InputField';
@@ -21,6 +21,10 @@ const DeleteActionModal = ({
}:Props) => {
const [deleteInputField, setDeleteInputField] = useState("")
useEffect(() => {
setDeleteInputField("");
}, [isOpen]);
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
frontend/components/basic/table/EnvironmentsTable.tsx
+56 -7
View File
@@ -1,16 +1,62 @@
import { faPencil,faPlus,faX } from '@fortawesome/free-solid-svg-icons';
import { faPencil, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
import { usePopUp } from '../../../hooks/usePopUp';
import Button from '../buttons/Button';
import {AddEnvironmentDialog} from '../dialog/AddEnvironmentDialog';
import { AddUpdateEnvironmentDialog } from '../dialog/AddUpdateEnvironmentDialog';
import DeleteActionModal from '../dialog/DeleteActionModal';
const EnvironmentTable = ({ data = [] }) => {
type Env = { name: string; slug: string };
type Props = {
data: Env[];
onCreateEnv: (arg0: Env) => Promise<void>;
onUpdateEnv: (oldSlug: string, arg0: Env) => Promise<void>;
onDeleteEnv: (slug: string) => Promise<void>;
};
const EnvironmentTable = ({
data = [],
onCreateEnv,
onDeleteEnv,
onUpdateEnv,
}: Props) => {
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
'createUpdateEnv',
'deleteEnv',
] as const);
const onEnvCreateCB = async (env: Env) => {
try {
await onCreateEnv(env);
handlePopUpClose('createUpdateEnv');
} catch (error) {
console.error(error);
}
};
const onEnvUpdateCB = async (env: Env) => {
try {
await onUpdateEnv(
(popUp.createUpdateEnv?.data as Pick<Env, 'slug'>)?.slug,
env
);
handlePopUpClose('createUpdateEnv');
} catch (error) {
console.error(error);
}
};
const onEnvDeleteCB = async () => {
try {
await onDeleteEnv(
(popUp.deleteEnv?.data as Pick<Env, 'slug'>)?.slug
);
handlePopUpClose('deleteEnv');
} catch (error) {
console.error(error);
}
};
return (
<>
<div className='flex flex-row justify-between w-full'>
@@ -62,7 +108,9 @@ const EnvironmentTable = ({ data = [] }) => {
<td className='py-2 border-mineshaft-700 border-t flex'>
<div className='opacity-50 hover:opacity-100 duration-200 flex items-center mr-8'>
<Button
onButtonPressed={() => handlePopUpOpen("createUpdateEnv",{ name, slug })}
onButtonPressed={() =>
handlePopUpOpen('createUpdateEnv', { name, slug })
}
color='red'
size='icon-sm'
icon={faPencil}
@@ -101,14 +149,15 @@ const EnvironmentTable = ({ data = [] }) => {
}?`}
deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ''}
onClose={() => handlePopUpClose('deleteEnv')}
onSubmit={() => handlePopUpClose('deleteEnv')}
onSubmit={onEnvDeleteCB}
/>
<AddEnvironmentDialog
<AddUpdateEnvironmentDialog
isOpen={popUp.createUpdateEnv.isOpen}
isEditMode={Boolean(popUp.createUpdateEnv?.data)}
initialValues={popUp?.createUpdateEnv?.data as any}
onClose={() => handlePopUpClose('createUpdateEnv')}
onSubmit={() => null}
onCreateSubmit={onEnvCreateCB}
onEditSubmit={onEnvUpdateCB}
/>
</div>
</>
frontend/components/basic/table/ServiceTokenTable.tsx
+1 -2
View File
@@ -3,7 +3,6 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider';
import deleteServiceToken from "../../../pages/api/serviceToken/deleteServiceToken";
import { reverseEnvMapping } from '../../../public/data/frequentConstants';
import guidGenerator from '../../utilities/randomId';
import Button from '../buttons/Button';
@@ -60,7 +59,7 @@ const ServiceTokenTable = ({ data, workspaceName, setServiceTokens }: ServiceTok
{workspaceName}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{reverseEnvMapping[row.environment]}
{row.environment}
</td>
<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
{new Date(row.expiresAt).toUTCString()}
frontend/components/integrations/Integration.tsx
+3 -7
View File
@@ -15,9 +15,7 @@ import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps"
import updateIntegration from "../../pages/api/integrations/updateIntegration"
import {
contextNetlifyMapping,
envMapping,
reverseContextNetlifyMapping,
reverseEnvMapping,
} from "../../public/data/frequentConstants";
interface Integration {
@@ -41,9 +39,7 @@ const Integration = ({
}: {
integration: Integration;
}) => {
const [integrationEnvironment, setIntegrationEnvironment] = useState(
reverseEnvMapping[integration.environment]
);
const [integrationEnvironment, setIntegrationEnvironment] = useState(integration.environment);
const [fileState, setFileState] = useState([]);
const router = useRouter();
const [apps, setApps] = useState<IntegrationApp[]>([]); // integration app objects
@@ -199,9 +195,9 @@ const Integration = ({
const siteApp = apps.find((app) => app.name === integrationApp); // obj or undefined
const siteId = siteApp?.siteId ? siteApp.siteId : null;
const result = await updateIntegration({
await updateIntegration({
integrationId: integration._id,
environment: envMapping[integrationEnvironment],
environment: integrationEnvironment,
app: integrationApp,
isActive: true,
target: integrationTarget ? integrationTarget.toLowerCase() : null,
frontend/components/utilities/secrets/downloadDotEnv.ts
+1 -2
View File
@@ -1,4 +1,3 @@
import { envMapping } from "../../../public/data/frequentConstants";
import checkOverrides from './checkOverrides';
@@ -39,7 +38,7 @@ const downloadDotEnv = async ({ data, env }: { data: SecretDataProps[]; env: str
const fileDownloadUrl = URL.createObjectURL(blob);
const alink = document.createElement('a');
alink.href = fileDownloadUrl;
alink.download = envMapping[env] + '.env';
alink.download = env + '.env';
alink.click();
}
frontend/components/utilities/secrets/getSecretsForProject.ts
+2 -4
View File
@@ -1,8 +1,6 @@
import getSecrets from '~/pages/api/files/GetSecrets';
import getLatestFileKey from '~/pages/api/workspace/getLatestFileKey';
import { envMapping } from '../../../public/data/frequentConstants';
const {
decryptAssymmetric,
decryptSymmetric
@@ -35,7 +33,7 @@ interface SecretProps {
}
interface FunctionProps {
env: keyof typeof envMapping;
env: string;
setIsKeyAvailable: any;
setData: any;
workspaceId: string;
@@ -58,7 +56,7 @@ const getSecretsForProject = async ({
try {
let encryptedSecrets;
try {
encryptedSecrets = await getSecrets(workspaceId, envMapping[env]);
encryptedSecrets = await getSecrets(workspaceId, env);
} catch (error) {
console.log('ERROR: Not able to access the latest version of secrets');
}
frontend/pages/api/environments/createEnvironment.ts
+29
View File
@@ -0,0 +1,29 @@
import SecurityClient from '~/utilities/SecurityClient';
type NewEnvironmentInfo = {
environmentSlug: string;
environmentName: string;
};
/**
* This route deletes a specified workspace.
* @param {*} workspaceId
* @returns
*/
const createEnvironment = (workspaceId:string, newEnv: NewEnvironmentInfo) => {
return SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/environments`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newEnv)
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to create environment');
}
});
};
export default createEnvironment;
frontend/pages/api/environments/deleteEnvironment.ts
+26
View File
@@ -0,0 +1,26 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route deletes a specified env.
* @param {*} workspaceId
* @returns
*/
const deleteEnvironment = (workspaceId: string, environmentSlug: string) => {
return SecurityClient.fetchCall(
`/api/v2/workspace/${workspaceId}/environments`,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ environmentSlug }),
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to delete environment');
}
});
};
export default deleteEnvironment;
frontend/pages/api/environments/updateEnvironment.ts
+33
View File
@@ -0,0 +1,33 @@
import SecurityClient from '~/utilities/SecurityClient';
type EnvironmentInfo = {
oldEnvironmentSlug: string;
environmentSlug: string;
environmentName: string;
};
/**
* This route updates a specified environment.
* @param {*} workspaceId
* @returns
*/
const updateEnvironment = (workspaceId: string, env: EnvironmentInfo) => {
return SecurityClient.fetchCall(
`/api/v2/workspace/${workspaceId}/environments`,
{
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(env),
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to update environment');
}
});
};
export default updateEnvironment;
frontend/pages/api/workspace/getWorkspaces.ts
+1
View File
@@ -5,6 +5,7 @@ interface Workspace {
_id: string;
name: string;
organization: string;
environments: Array<{name:string, slug:string}>
}
/**
frontend/pages/dashboard/[id].tsx
+382 -179
View File
@@ -2,7 +2,7 @@ import { Fragment, useCallback, useEffect, useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useTranslation } from "next-i18next";
import { useTranslation } from 'next-i18next';
import {
faArrowDownAZ,
faArrowDownZA,
@@ -34,7 +34,6 @@ import getSecretsForProject from '~/components/utilities/secrets/getSecretsForPr
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
import guidGenerator from '~/utilities/randomId';
import { envMapping, reverseEnvMapping } from '../../public/data/frequentConstants';
import addSecrets from '../api/files/AddSecrets';
import deleteSecrets from '../api/files/DeleteSecrets';
import updateSecrets from '../api/files/UpdateSecrets';
@@ -43,6 +42,10 @@ import checkUserAction from '../api/userActions/checkUserAction';
import registerUserAction from '../api/userActions/registerUserAction';
import getWorkspaces from '../api/workspace/getWorkspaces';
type WorkspaceEnv = {
name: string;
slug: string;
};
interface SecretDataProps {
type: 'personal' | 'shared';
@@ -68,7 +71,7 @@ interface SnapshotProps {
secretVersions: {
id: string;
pos: number;
type: "personal" | "shared";
type: 'personal' | 'shared';
environment: string;
key: string;
value: string;
@@ -102,11 +105,8 @@ export default function Dashboard() {
const [initialData, setInitialData] = useState<SecretDataProps[]>([]);
const [buttonReady, setButtonReady] = useState(false);
const router = useRouter();
const [workspaceId, setWorkspaceId] = useState('');
const [blurred, setBlurred] = useState(true);
const [isKeyAvailable, setIsKeyAvailable] = useState(true);
const [env, setEnv] = useState('Development');
const [snapshotEnv, setSnapshotEnv] = useState('Development');
const [isNew, setIsNew] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [searchKeys, setSearchKeys] = useState('');
@@ -114,7 +114,7 @@ export default function Dashboard() {
const [sortMethod, setSortMethod] = useState('alphabetical');
const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
const [sidebarSecretId, toggleSidebar] = useState("None");
const [sidebarSecretId, toggleSidebar] = useState('None');
const [PITSidebarOpen, togglePITSidebar] = useState(false);
const [sharedToHide, setSharedToHide] = useState<string[]>([]);
const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
@@ -123,6 +123,16 @@ export default function Dashboard() {
const { t } = useTranslation();
const { createNotification } = useNotificationContext();
const workspaceId = router.query.id as string;
const [workspaceEnvs, setWorkspaceEnvs] = useState<WorkspaceEnv[]>([]);
const [selectedSnapshotEnv, setSelectedSnapshotEnv] =
useState<WorkspaceEnv>();
const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv>({
name: '',
slug: '',
});
// #TODO: fix save message for changing reroutes
// const beforeRouteHandler = (url) => {
// const warningText =
@@ -169,25 +179,37 @@ export default function Dashboard() {
useEffect(() => {
(async () => {
try {
const tempNumSnapshots = await getProjectSercetSnapshotsCount({ workspaceId: String(router.query.id) })
const tempNumSnapshots = await getProjectSercetSnapshotsCount({
workspaceId,
});
setNumSnapshots(tempNumSnapshots);
const userWorkspaces = await getWorkspaces();
const listWorkspaces = userWorkspaces.map((workspace) => workspace._id);
if (
!listWorkspaces.includes(router.asPath.split('/')[2])
) {
router.push('/dashboard/' + listWorkspaces[0]);
const workspace = userWorkspaces.find(
(workspace) => workspace._id === workspaceId
);
if (!workspace) {
router.push('/dashboard/' + userWorkspaces?.[0]?._id);
}
setWorkspaceEnvs(workspace?.environments || []);
// set env
const env = workspace?.environments?.[0] || {
name: 'unknown',
slug: 'unkown',
};
setSelectedEnv(env);
setSelectedSnapshotEnv(env);
const user = await getUser();
setIsNew(
(Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
(Date.parse(String(new Date())) - Date.parse(user.createdAt)) /
60000 <
3
? true
: false
);
const userAction = await checkUserAction({
action: 'first_time_secrets_pushed'
action: 'first_time_secrets_pushed',
});
setHasUserEverPushed(userAction ? true : false);
} catch (error) {
@@ -202,13 +224,12 @@ export default function Dashboard() {
try {
setIsLoading(true);
setBlurred(true);
setWorkspaceId(String(router.query.id));
// ENV
const dataToSort = await getSecretsForProject({
env,
env: selectedEnv.slug,
setIsKeyAvailable,
setData,
workspaceId: String(router.query.id)
workspaceId,
});
setInitialData(dataToSort);
reorderRows(dataToSort);
@@ -230,7 +251,7 @@ export default function Dashboard() {
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [env]);
}, [selectedEnv]);
const addRow = () => {
setIsNew(false);
@@ -243,7 +264,7 @@ export default function Dashboard() {
value: '',
type: 'shared',
comment: '',
}
},
]);
};
@@ -265,20 +286,32 @@ export default function Dashboard() {
key: keyName,
value: value,
type: 'personal',
comment: comment
}
comment: comment,
},
];
sortValuesHandler(tempdata, sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical");
sortValuesHandler(
tempdata,
sortMethod == 'alhpabetical' ? '-alphabetical' : 'alphabetical'
);
};
const deleteRow = ({ ids, secretName }: { ids: string[]; secretName: string; }) => {
const deleteRow = ({
ids,
secretName,
}: {
ids: string[];
secretName: string;
}) => {
setButtonReady(true);
toggleSidebar("None");
toggleSidebar('None');
createNotification({
text: `${secretName} has been deleted. Remember to save changes.`,
type: 'error'
type: 'error',
});
sortValuesHandler(data!.filter((row: SecretDataProps) => !ids.includes(row.id)), sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical");
sortValuesHandler(
data!.filter((row: SecretDataProps) => !ids.includes(row.id)),
sortMethod == 'alhpabetical' ? '-alphabetical' : 'alphabetical'
);
};
/**
@@ -289,15 +322,30 @@ export default function Dashboard() {
setButtonReady(true);
// find which shared secret corresponds to the overriden version
const sharedVersionOfOverride = data!.filter(secret => secret.type == "shared" && secret.key == data!.filter(row => row.id == id)[0]?.key)[0]?.id;
const sharedVersionOfOverride = data!.filter(
(secret) =>
secret.type == 'shared' &&
secret.key == data!.filter((row) => row.id == id)[0]?.key
)[0]?.id;
// change the sidebar to this shared secret; and unhide it
toggleSidebar(sharedVersionOfOverride)
setSharedToHide(sharedToHide!.filter(tempId => tempId != sharedVersionOfOverride))
toggleSidebar(sharedVersionOfOverride);
setSharedToHide(
sharedToHide!.filter((tempId) => tempId != sharedVersionOfOverride)
);
// resort secrets
const tempData = data!.filter((row: SecretDataProps) => !(row.key == data!.filter(row => row.id == id)[0]?.key && row.type == 'personal'))
sortValuesHandler(tempData, sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical")
const tempData = data!.filter(
(row: SecretDataProps) =>
!(
row.key == data!.filter((row) => row.id == id)[0]?.key &&
row.type == 'personal'
)
);
sortValuesHandler(
tempData,
sortMethod == 'alhpabetical' ? '-alphabetical' : 'alphabetical'
);
};
const modifyValue = (value: string, pos: number) => {
@@ -351,59 +399,97 @@ export default function Dashboard() {
const obj = Object.assign(
{},
...newData!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''] }))
...newData!.map((row: SecretDataProps) => ({
[row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''],
}))
);
// Checking if any of the secret keys start with a number - if so, don't do anything
const nameErrors = !Object.keys(obj)
.map((key) => !isNaN(Number(key[0].charAt(0))))
.every((v) => v === false);
const duplicatesExist = findDuplicates(data!.map((item: SecretDataProps) => item.key + item.type)).length > 0;
const duplicatesExist =
findDuplicates(data!.map((item: SecretDataProps) => item.key + item.type))
.length > 0;
if (nameErrors) {
return createNotification({
text: 'Solve all name errors before saving secrets.',
type: 'error'
type: 'error',
});
}
if (duplicatesExist) {
return createNotification({
text: 'Remove duplicated secret names before saving.',
type: 'error'
type: 'error',
});
}
// Once "Save changes" is clicked, disable that button
setButtonReady(false);
const secretsToBeDeleted
= initialData
.filter(initDataPoint => !newData!.map(newDataPoint => newDataPoint.id).includes(initDataPoint.id))
.map(secret => secret.id);
const secretsToBeDeleted = initialData
.filter(
(initDataPoint) =>
!newData!
.map((newDataPoint) => newDataPoint.id)
.includes(initDataPoint.id)
)
.map((secret) => secret.id);
const secretsToBeAdded
= newData!
.filter(newDataPoint => !initialData.map(initDataPoint => initDataPoint.id).includes(newDataPoint.id));
const secretsToBeAdded = newData!.filter(
(newDataPoint) =>
!initialData
.map((initDataPoint) => initDataPoint.id)
.includes(newDataPoint.id)
);
const secretsToBeUpdated
= newData!.filter(newDataPoint => initialData
.filter(initDataPoint => newData!.map(newDataPoint => newDataPoint.id).includes(initDataPoint.id)
&& (newData!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].value != initDataPoint.value
|| newData!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].key != initDataPoint.key
|| newData!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].comment != initDataPoint.comment))
.map(secret => secret.id).includes(newDataPoint.id));
const secretsToBeUpdated = newData!.filter((newDataPoint) =>
initialData
.filter(
(initDataPoint) =>
newData!
.map((newDataPoint) => newDataPoint.id)
.includes(initDataPoint.id) &&
(newData!.filter(
(newDataPoint) => newDataPoint.id == initDataPoint.id
)[0].value != initDataPoint.value ||
newData!.filter(
(newDataPoint) => newDataPoint.id == initDataPoint.id
)[0].key != initDataPoint.key ||
newData!.filter(
(newDataPoint) => newDataPoint.id == initDataPoint.id
)[0].comment != initDataPoint.comment)
)
.map((secret) => secret.id)
.includes(newDataPoint.id)
);
if (secretsToBeDeleted.length > 0) {
await deleteSecrets({ secretIds: secretsToBeDeleted });
}
// ENV
if (secretsToBeAdded.length > 0) {
const secrets = await encryptSecrets({ secretsToEncrypt: secretsToBeAdded, workspaceId, env: envMapping[env] })
secrets && await addSecrets({ secrets, env: envMapping[env], workspaceId });
const secrets = await encryptSecrets({
secretsToEncrypt: secretsToBeAdded,
workspaceId,
env: selectedEnv.slug,
});
secrets &&
(await addSecrets({
secrets,
env: selectedEnv.slug,
workspaceId,
}));
}
if (secretsToBeUpdated.length > 0) {
const secrets = await encryptSecrets({ secretsToEncrypt: secretsToBeUpdated, workspaceId, env: envMapping[env] })
secrets && await updateSecrets({ secrets });
const secrets = await encryptSecrets({
secretsToEncrypt: secretsToBeUpdated,
workspaceId,
env: selectedEnv.slug,
});
secrets && (await updateSecrets({ secrets }));
}
// If this user has never saved environment variables before, show them a prompt to read docs
@@ -425,8 +511,12 @@ export default function Dashboard() {
setBlurred(!blurred);
};
const sortValuesHandler = (dataToSort: SecretDataProps[] | 1, specificSortMethod?: 'alphabetical' | '-alphabetical') => {
const howToSort = specificSortMethod == undefined ? sortMethod : specificSortMethod;
const sortValuesHandler = (
dataToSort: SecretDataProps[] | 1,
specificSortMethod?: 'alphabetical' | '-alphabetical'
) => {
const howToSort =
specificSortMethod == undefined ? sortMethod : specificSortMethod;
const sortedData = (dataToSort != 1 ? dataToSort : data)!
.sort((a, b) =>
howToSort == 'alphabetical'
@@ -436,30 +526,44 @@ export default function Dashboard() {
.map((item: SecretDataProps, index: number) => {
return {
...item,
pos: index
pos: index,
};
});
setData(sortedData);
};
const deleteCertainRow = ({ ids, secretName }: { ids: string[]; secretName: string; }) => {
deleteRow({ids, secretName});
const deleteCertainRow = ({
ids,
secretName,
}: {
ids: string[];
secretName: string;
}) => {
deleteRow({ ids, secretName });
};
return data ? (
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
<title>{t("common:head-title", { title: t("dashboard:title") })}</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
<meta property="og:title" content={String(t("dashboard:og-title"))} />
<meta name="og:description" content={String(t("dashboard:og-description"))} />
<title>{t('common:head-title', { title: t('dashboard:title') })}</title>
<link rel='icon' href='/infisical.ico' />
<meta property='og:image' content='/images/message.png' />
<meta property='og:title' content={String(t('dashboard:og-title'))} />
<meta
name='og:description'
content={String(t('dashboard:og-description'))}
/>
</Head>
<div className="flex flex-row">
{sidebarSecretId != "None" && <SideBar
<div className='flex flex-row'>
{sidebarSecretId != 'None' && (
<SideBar
toggleSidebar={toggleSidebar}
data={data.filter((row: SecretDataProps) => row.key == data.filter(row => row.id == sidebarSecretId)[0]?.key)}
data={data.filter(
(row: SecretDataProps) =>
row.key ==
data.filter((row) => row.id == sidebarSecretId)[0]?.key
)}
modifyKey={listenChangeKey}
modifyValue={listenChangeValue}
modifyComment={listenChangeComment}
@@ -470,200 +574,274 @@ export default function Dashboard() {
sharedToHide={sharedToHide}
setSharedToHide={setSharedToHide}
deleteRow={deleteCertainRow}
/>}
{PITSidebarOpen && <PITRecoverySidebar
/>
)}
{PITSidebarOpen && (
<PITRecoverySidebar
toggleSidebar={togglePITSidebar}
chosenSnapshot={String(snapshotData?.id ? snapshotData.id : "")}
chosenSnapshot={String(snapshotData?.id ? snapshotData.id : '')}
setSnapshotData={setSnapshotData}
/>}
<div className="w-full max-h-96 pb-2">
<NavHeader pageName={t("dashboard:title")} isProjectRelated={true} />
/>
)}
<div className='w-full max-h-96 pb-2'>
<NavHeader pageName={t('dashboard:title')} isProjectRelated={true} />
{checkDocsPopUpVisible && (
<BottonRightPopup
buttonText={t("dashboard:check-docs.button")}
buttonLink="https://infisical.com/docs/getting-started/introduction"
titleText={t("dashboard:check-docs.title")}
emoji="🎉"
textLine1={t("dashboard:check-docs.line1")}
textLine2={t("dashboard:check-docs.line2")}
buttonText={t('dashboard:check-docs.button')}
buttonLink='https://infisical.com/docs/getting-started/introduction'
titleText={t('dashboard:check-docs.title')}
emoji='🎉'
textLine1={t('dashboard:check-docs.line1')}
textLine2={t('dashboard:check-docs.line2')}
setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
/>
)}
<div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
{snapshotData &&
<div className='flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl'>
{snapshotData && (
<div className={`flex justify-start max-w-sm mt-1 mr-2`}>
<Button
text={String(t("Go back to current"))}
text={String(t('Go back to current'))}
onButtonPressed={() => setSnapshotData(undefined)}
color="mineshaft"
size="md"
color='mineshaft'
size='md'
icon={faArrowLeft}
/>
</div>}
<div className="flex flex-row justify-start items-center text-3xl">
<div className="font-semibold mr-4 mt-1 flex flex-row items-center">
<p>{snapshotData ? "Secret Snapshot" : t("dashboard:title")}</p>
{snapshotData && <span className='bg-primary-800 text-sm ml-4 mt-1 px-1.5 rounded-md'>{new Date(snapshotData.createdAt).toLocaleString()}</span>}
</div>
)}
<div className='flex flex-row justify-start items-center text-3xl'>
<div className='font-semibold mr-4 mt-1 flex flex-row items-center'>
<p>{snapshotData ? 'Secret Snapshot' : t('dashboard:title')}</p>
{snapshotData && (
<span className='bg-primary-800 text-sm ml-4 mt-1 px-1.5 rounded-md'>
{new Date(snapshotData.createdAt).toLocaleString()}
</span>
)}
</div>
{!snapshotData && data?.length == 0 && (
<ListBox
selected={env}
data={['Development', 'Staging', 'Production', 'Testing']}
onChange={setEnv}
selected={selectedEnv.name}
data={workspaceEnvs.map(({ name }) => name)}
onChange={(envName) =>
setSelectedEnv(
workspaceEnvs.find(({ name }) => envName === name) || {
name: 'unknown',
slug: 'unknown',
}
)
}
/>
)}
</div>
<div className="flex flex-row">
<div className='flex flex-row'>
<div className={`flex justify-start max-w-sm mt-1 mr-2`}>
<Button
text={String(numSnapshots + " " + t("Commits"))}
text={String(numSnapshots + ' ' + t('Commits'))}
onButtonPressed={() => togglePITSidebar(true)}
color="mineshaft"
size="md"
color='mineshaft'
size='md'
icon={faClockRotateLeft}
/>
</div>
{(data?.length !== 0 || buttonReady) && !snapshotData && (
<div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t("common:save-changes"))}
text={String(t('common:save-changes'))}
onButtonPressed={savePush}
color="primary"
size="md"
color='primary'
size='md'
active={buttonReady}
iconDisabled={faCheck}
textDisabled={String(t("common:saved"))}
textDisabled={String(t('common:saved'))}
/>
</div>
)}
{snapshotData && <div className={`flex justify-start max-w-sm mt-1`}>
{snapshotData && (
<div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t("Rollback to this snapshot"))}
text={String(t('Rollback to this snapshot'))}
onButtonPressed={async () => {
// Update secrets in the state only for the current environment
const rolledBackSecrets = snapshotData.secretVersions
.filter(row => reverseEnvMapping[row.environment] == env)
.filter((row) => row.environment == selectedEnv.slug)
.map((sv, position) => {
return {
id: sv.id, pos: position, type: sv.type, key: sv.key, value: sv.value, comment: ''
}
id: sv.id,
pos: position,
type: sv.type,
key: sv.key,
value: sv.value,
comment: '',
};
});
setData(rolledBackSecrets);
setSharedToHide(
rolledBackSecrets?.filter(row => (rolledBackSecrets
rolledBackSecrets
?.filter(
(row) =>
rolledBackSecrets
?.map((item) => item.key)
.filter(
(item, index) =>
index !==
rolledBackSecrets?.map((item) => item.key).indexOf(item)
).includes(row.key) && row.type == 'shared'))?.map((item) => item.id)
rolledBackSecrets
?.map((item) => item.key)
.indexOf(item)
)
.includes(row.key) && row.type == 'shared'
)
?.map((item) => item.id)
);
// Perform the rollback globally
performSecretRollback({ workspaceId, version: snapshotData.version })
performSecretRollback({
workspaceId,
version: snapshotData.version,
});
setSnapshotData(undefined);
createNotification({
text: `Rollback has been performed successfully.`,
type: 'success'
type: 'success',
});
}}
color="primary"
size="md"
color='primary'
size='md'
active={buttonReady}
/>
</div>}
</div>
)}
</div>
</div>
<div className="mx-6 w-full pr-12">
<div className="flex flex-col max-w-5xl pb-1">
<div className="w-full flex flex-row items-start">
<div className='mx-6 w-full pr-12'>
<div className='flex flex-col max-w-5xl pb-1'>
<div className='w-full flex flex-row items-start'>
{(snapshotData || data?.length !== 0) && (
<>
{!snapshotData
? <ListBox
selected={env}
data={['Development', 'Staging', 'Production', 'Testing']}
onChange={setEnv}
{!snapshotData ? (
<ListBox
selected={selectedEnv.name}
data={workspaceEnvs.map(({ name }) => name)}
onChange={(envName) =>
setSelectedEnv(
workspaceEnvs.find(
({ name }) => envName === name
) || {
name: 'unknown',
slug: 'unknown',
}
)
}
/>
: <ListBox
selected={snapshotEnv}
data={['Development', 'Staging', 'Production', 'Testing']}
onChange={setSnapshotEnv}
/>}
<div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 flex items-center rounded-md flex flex-row items-center">
) : (
<ListBox
selected={selectedSnapshotEnv?.name || ''}
data={workspaceEnvs.map(({ name }) => name)}
onChange={(envName) =>
setSelectedSnapshotEnv(
workspaceEnvs.find(
({ name }) => envName === name
) || {
name: 'unknown',
slug: 'unknown',
}
)
}
/>
)}
<div className='h-10 w-full bg-white/5 hover:bg-white/10 ml-2 flex items-center rounded-md flex flex-row items-center'>
<FontAwesomeIcon
className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
className='bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400'
icon={faMagnifyingGlass}
/>
<input
className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
className='pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none'
value={searchKeys}
onChange={(e) => setSearchKeys(e.target.value)}
placeholder={String(t("dashboard:search-keys"))}
placeholder={String(t('dashboard:search-keys'))}
/>
</div>
{!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
{!snapshotData && (
<div className='ml-2 min-w-max flex flex-row items-start justify-start'>
<Button
onButtonPressed={() => reorderRows(1)}
color="mineshaft"
size="icon-md"
color='mineshaft'
size='icon-md'
icon={
sortMethod == 'alphabetical'
? faArrowDownAZ
: faArrowDownZA
}
/>
</div>}
{!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
<DownloadSecretMenu data={data} env={env} />
</div>}
<div className="ml-2 min-w-max flex flex-row items-start justify-start">
</div>
)}
{!snapshotData && (
<div className='ml-2 min-w-max flex flex-row items-start justify-start'>
<DownloadSecretMenu
data={data}
env={selectedEnv.slug}
/>
</div>
)}
<div className='ml-2 min-w-max flex flex-row items-start justify-start'>
<Button
onButtonPressed={changeBlurred}
color="mineshaft"
size="icon-md"
color='mineshaft'
size='icon-md'
icon={blurred ? faEye : faEyeSlash}
/>
</div>
{!snapshotData && <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
{!snapshotData && (
<div className='relative ml-2 min-w-max flex flex-row items-start justify-end'>
<Button
text={String(t("dashboard:add-key"))}
text={String(t('dashboard:add-key'))}
onButtonPressed={addRow}
color="mineshaft"
color='mineshaft'
icon={faPlus}
size="md"
size='md'
/>
{isNew && (
<span className="absolute right-0 flex h-3 w-3 items-center justify-center ml-4 mb-4">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/50 opacity-75 h-4 w-4"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
<span className='absolute right-0 flex h-3 w-3 items-center justify-center ml-4 mb-4'>
<span className='animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/50 opacity-75 h-4 w-4'></span>
<span className='relative inline-flex rounded-full h-3 w-3 bg-primary'></span>
</span>
)}
</div>}
</div>
)}
</>
)}
</div>
</div>
{isLoading ? (
<div className="flex items-center justify-center h-full my-48">
<div className='flex items-center justify-center h-full my-48'>
<Image
src="/images/loading/loading.gif"
src='/images/loading/loading.gif'
height={60}
width={100}
alt="infisical loading indicator"
alt='infisical loading indicator'
></Image>
</div>
) : (
data?.length !== 0 ? (
<div className="flex flex-col w-full mt-1 mb-2">
) : data?.length !== 0 ? (
<div className='flex flex-col w-full mt-1 mb-2'>
<div
className={`max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar`}
>
<div className="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
{!snapshotData && data?.filter(row => row.key?.toUpperCase().includes(searchKeys.toUpperCase()))
.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
<div className='px-1 pt-2 bg-mineshaft-800 rounded-md p-2'>
{!snapshotData &&
data
?.filter((row) =>
row.key
?.toUpperCase()
.includes(searchKeys.toUpperCase())
)
.filter(
(row) =>
!(
sharedToHide.includes(row.id) &&
row.type == 'shared'
)
)
.map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
@@ -678,16 +856,40 @@ export default function Dashboard() {
isSnapshot={false}
/>
))}
{snapshotData && snapshotData.secretVersions?.sort((a, b) => a.key.localeCompare(b.key))
.filter(row => reverseEnvMapping[row.environment] == snapshotEnv)
.filter(row => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
.filter(row => !(snapshotData.secretVersions?.filter(row => (snapshotData.secretVersions
{snapshotData &&
snapshotData.secretVersions
?.sort((a, b) => a.key.localeCompare(b.key))
.filter(
(row) =>
row.environment == selectedSnapshotEnv?.slug
)
.filter((row) =>
row.key
.toUpperCase()
.includes(searchKeys.toUpperCase())
)
.filter(
(row) =>
!(
snapshotData.secretVersions
?.filter(
(row) =>
snapshotData.secretVersions
?.map((item) => item.key)
.filter(
(item, index) =>
index !==
snapshotData.secretVersions?.map((item) => item.key).indexOf(item)
).includes(row.key) && row.type == 'shared'))?.map((item) => item.id).includes(row.id) && row.type == 'shared')).map((keyPair) => (
snapshotData.secretVersions
?.map((item) => item.key)
.indexOf(item)
)
.includes(row.key) && row.type == 'shared'
)
?.map((item) => item.id)
.includes(row.id) && row.type == 'shared'
)
)
.map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
@@ -703,7 +905,8 @@ export default function Dashboard() {
/>
))}
</div>
{!snapshotData && <div className="w-full max-w-5xl px-2 pt-3">
{!snapshotData && (
<div className='w-full max-w-5xl px-2 pt-3'>
<DropZone
setData={addData}
setErrorDragAndDrop={setErrorDragAndDrop}
@@ -713,11 +916,12 @@ export default function Dashboard() {
keysExist={true}
numCurrentRows={data.length}
/>
</div>}
</div>
)}
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
<div className='flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28'>
{isKeyAvailable && !snapshotData && (
<DropZone
setData={setData}
@@ -729,36 +933,35 @@ export default function Dashboard() {
keysExist={false}
/>
)}
{
(!isKeyAvailable && (
{!isKeyAvailable && (
<>
<FontAwesomeIcon
className="text-7xl mt-20 mb-8"
className='text-7xl mt-20 mb-8'
icon={faFolderOpen}
/>
<p>
To view this file, contact your administrator for
permission.
</p>
<p className="mt-1">
<p className='mt-1'>
They need to grant you access in the team tab.
</p>
</>
))}
)}
</div>
))}
)}
</div>
</div>
</div>
</div>
) : (
<div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
<div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full"></div>
<div className='relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center'>
<div className='absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full'></div>
<Image
src="/images/loading/loading.gif"
src='/images/loading/loading.gif'
height={70}
width={120}
alt="loading animation"
alt='loading animation'
></Image>
</div>
);
@@ -766,4 +969,4 @@ export default function Dashboard() {
Dashboard.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps(["dashboard"]);
export const getServerSideProps = getTranslatedServerSideProps(['dashboard']);
frontend/pages/settings/project/[id].js
-306
View File
@@ -1,306 +0,0 @@
import { useEffect, useRef, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faCheck, faCopy, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from "~/components/basic/buttons/Button";
import AddServiceTokenDialog from "~/components/basic/dialog/AddServiceTokenDialog";
import InputField from "~/components/basic/InputField";
import ServiceTokenTable from "~/components/basic/table/ServiceTokenTable.tsx";
import NavHeader from "~/components/navigation/NavHeader";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import getServiceTokens from "../../api/serviceToken/getServiceTokens";
import deleteWorkspace from "../../api/workspace/deleteWorkspace";
import getWorkspaces from "../../api/workspace/getWorkspaces";
import renameWorkspace from "../../api/workspace/renameWorkspace";
export default function SettingsBasic() {
const [buttonReady, setButtonReady] = useState(false);
const router = useRouter();
const [workspaceName, setWorkspaceName] = useState("");
const [serviceTokens, setServiceTokens] = useState([]);
const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState("");
const [workspaceId, setWorkspaceId] = useState("");
const [isAddOpen, setIsAddOpen] = useState(false);
let [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] =
useState(false);
const [projectIdCopied, setProjectIdCopied] = useState(false);
const { t } = useTranslation();
/**
* This function copies the project id to the clipboard
*/
function copyToClipboard() {
// const copyText = document.getElementById('myInput') as HTMLInputElement;
const copyText = document.getElementById('myInput')
if (copyText) {
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value);
setProjectIdCopied(true);
setTimeout(() => setProjectIdCopied(false), 2000);
}
}
useEffect(async () => {
let userWorkspaces = await getWorkspaces();
userWorkspaces.map((userWorkspace) => {
if (userWorkspace._id == router.query.id) {
setWorkspaceName(userWorkspace.name);
}
});
let tempServiceTokens = await getServiceTokens({
workspaceId: router.query.id,
});
setServiceTokens(tempServiceTokens);
}, []);
const modifyWorkspaceName = (newName) => {
setButtonReady(true);
setWorkspaceName(newName);
};
const submitChanges = (newWorkspaceName) => {
renameWorkspace(router.query.id, newWorkspaceName);
setButtonReady(false);
};
useEffect(async () => {
setWorkspaceId(router.query.id);
}, []);
function closeAddModal() {
setIsAddOpen(false);
}
function openAddModal() {
setIsAddOpen(true);
}
const closeAddServiceTokenModal = () => {
setIsAddServiceTokenDialogOpen(false);
};
/**
* This function deleted a workspace.
* It first checks if there is more than one workspace aviable. Otherwise, it doesn't delete
* It then checks if the name of the workspace to be deleted is correct. Otherwise, it doesn't delete.
* It then deletes the workspace and forwards the user to another aviable workspace.
*/
const executeDeletingWorkspace = async () => {
let userWorkspaces = await getWorkspaces();
if (userWorkspaces.length > 1) {
if (
userWorkspaces.filter(
(workspace) => workspace._id == router.query.id
)[0].name == workspaceToBeDeletedName
) {
await deleteWorkspace(router.query.id);
let userWorkspaces = await getWorkspaces();
router.push("/dashboard/" + userWorkspaces[0]._id);
}
}
};
return (
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<Head>
<title>
{t("common:head-title", { title: t("settings-project:title") })}
</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<AddServiceTokenDialog
isOpen={isAddServiceTokenDialogOpen}
workspaceId={router.query.id}
closeModal={closeAddServiceTokenModal}
workspaceName={workspaceName}
serviceTokens={serviceTokens}
setServiceTokens={setServiceTokens}
/>
<div className="flex flex-row mr-6 max-w-5xl">
<div className="w-full max-h-screen pb-2 overflow-y-auto">
<NavHeader
pageName={t("settings-project:title")}
isProjectRelated={true}
/>
<div className="flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl">
<div className="flex flex-col justify-start items-start text-3xl">
<p className="font-semibold mr-4 text-gray-200">
{t("settings-project:title")}
</p>
<p className="font-normal mr-4 text-gray-400 text-base">
{t("settings-project:description")}
</p>
</div>
</div>
<div className="flex flex-col ml-6 text-mineshaft-50">
<div className="flex flex-col">
<div className="min-w-md mt-2 flex flex-col items-start">
<div className="bg-white/5 rounded-md px-6 pt-6 pb-4 flex flex-col items-start flex flex-col items-start w-full mb-6 pt-2">
<p className="text-xl font-semibold mb-4 mt-2">
{t("common:display-name")}
</p>
<div className="max-h-28 w-full max-w-md mr-auto">
<InputField
onChangeHandler={modifyWorkspaceName}
type="varName"
value={workspaceName}
placeholder=""
isRequired
/>
</div>
<div className="flex justify-start w-full">
<div className={`flex justify-start max-w-sm mt-4 mb-2`}>
<Button
text={t("common:save-changes")}
onButtonPressed={() => submitChanges(workspaceName)}
color="mineshaft"
size="md"
active={buttonReady}
iconDisabled={faCheck}
textDisabled="Saved"
/>
</div>
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4">
<p className="text-xl font-semibold self-start">
{t("common:project-id")}
</p>
<p className="text-base text-gray-400 font-normal self-start mt-4">
{t("settings-project:project-id-description")}
</p>
<p className="text-base text-gray-400 font-normal self-start">
{t("settings-project:project-id-description2")}
{/* eslint-disable-next-line react/jsx-no-target-blank */}
<a
href="https://infisical.com/docs/getting-started/introduction"
target="_blank"
rel="noopener"
className="text-primary hover:opacity-80 duration-200"
>
{t("settings-project:docs")}
</a>
</p>
<p className="mt-4 text-xs text-bunker-300">{t("settings-project:auto-generated")}</p>
<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mb-3 mr-2 rounded-md text-gray-400">
<p className="mr-2 font-bold pl-4">{`${t(
"common:project-id"
)}:`}</p>
<input
type="text"
value={workspaceId}
id="myInput"
className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
disabled
></input>
<div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
<button
onClick={copyToClipboard}
className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
>
{projectIdCopied ? (
<FontAwesomeIcon icon={faCheck} className="pr-0.5" />
) : (
<FontAwesomeIcon icon={faCopy} />
)}
</button>
<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-bunker-800 rounded-md text-center text-gray-400 text-sm">
{t("common:click-to-copy")}
</span>
</div>
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-4 flex flex-col items-start flex flex-col items-start w-full mt-4 mb-4 pt-2">
<div className="flex flex-row justify-between w-full">
<div className="flex flex-col w-full">
<p className="text-xl font-semibold mb-3">
{t("section-token:service-tokens")}
</p>
<p className="text-sm text-gray-400">
{t("section-token:service-tokens-description")}
</p>
<p className="text-sm text-gray-400 mb-4">
Please, make sure you are on the
<a
className="text-primary underline underline-offset-2 ml-1"
href="https://infisical.com/docs/cli/overview"
target="_blank"
rel="noreferrer"
>
latest version of CLI
</a>.
</p>
</div>
<div className="w-48 mt-2">
<Button
text={t("section-token:add-new")}
onButtonPressed={() => {
setIsAddServiceTokenDialogOpen(true);
}}
color="mineshaft"
icon={faPlus}
size="md"
/>
</div>
</div>
<ServiceTokenTable
data={serviceTokens}
workspaceName={workspaceName}
setServiceTokens={setServiceTokens}
/>
</div>
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-4 pb-6 border-l border-red pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2">
<p className="text-xl font-bold text-red">
{t("settings-project:danger-zone")}
</p>
<p className="mt-2 text-md text-gray-400">
{t("settings-project:danger-zone-note")}
</p>
<div className="max-h-28 w-full max-w-md mr-auto mt-4">
<InputField
label={t("settings-project:project-to-delete")}
onChangeHandler={setWorkspaceToBeDeletedName}
type="varName"
value={workspaceToBeDeletedName}
placeholder=""
isRequired
/>
</div>
<button
type="button"
className="max-w-md mt-6 w-full inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-semibold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={executeDeletingWorkspace}
>
{t("settings-project:delete-project")}
</button>
<p className="mt-0.5 ml-1 text-xs text-gray-500">
{t("settings-project:delete-project-note")}
</p>
</div>
</div>
</div>
</div>
</div>
);
}
SettingsBasic.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-project",
"section-token",
]);
frontend/pages/settings/project/[id].tsx
+164 -52
View File
@@ -1,55 +1,87 @@
import { useEffect, useRef, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import { faCheck, faCopy, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from "~/components/basic/buttons/Button";
import AddServiceTokenDialog from "~/components/basic/dialog/AddServiceTokenDialog";
import InputField from "~/components/basic/InputField";
import Button from '~/components/basic/buttons/Button';
import AddServiceTokenDialog from '~/components/basic/dialog/AddServiceTokenDialog';
import InputField from '~/components/basic/InputField';
import EnvironmentTable from '~/components/basic/table/EnvironmentsTable';
import ServiceTokenTable from "~/components/basic/table/ServiceTokenTable";
import NavHeader from "~/components/navigation/NavHeader";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import ServiceTokenTable from '~/components/basic/table/ServiceTokenTable';
import NavHeader from '~/components/navigation/NavHeader';
import deleteEnvironment from '~/pages/api/environments/deleteEnvironment';
import updateEnvironment from '~/pages/api/environments/updateEnvironment';
import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
import getServiceTokens from "../../api/serviceToken/getServiceTokens";
import deleteWorkspace from "../../api/workspace/deleteWorkspace";
import getWorkspaces from "../../api/workspace/getWorkspaces";
import renameWorkspace from "../../api/workspace/renameWorkspace";
import createEnvironment from '../../api/environments/createEnvironment';
import getServiceTokens from '../../api/serviceToken/getServiceTokens';
import deleteWorkspace from '../../api/workspace/deleteWorkspace';
import getWorkspaces from '../../api/workspace/getWorkspaces';
import renameWorkspace from '../../api/workspace/renameWorkspace';
type EnvData = {
name: string;
slug: string;
};
export default function SettingsBasic() {
const [buttonReady, setButtonReady] = useState(false);
const router = useRouter();
const [workspaceName, setWorkspaceName] = useState("");
const [workspaceName, setWorkspaceName] = useState('');
const [serviceTokens, setServiceTokens] = useState([]);
const [environments,setEnvironments] = useState([]);
const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState("");
const [environments, setEnvironments] = useState<Array<EnvData>>([]);
const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
const [isAddOpen, setIsAddOpen] = useState(false);
const [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] = useState(false);
const [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] =
useState(false);
const [projectIdCopied, setProjectIdCopied] = useState(false);
const workspaceId = router.query.id as string;
const { t } = useTranslation();
useEffect(async () => {
/**
* This function copies the project id to the clipboard
*/
function copyToClipboard() {
const copyText = document.getElementById('myInput') as HTMLInputElement;
if (copyText) {
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value);
setProjectIdCopied(true);
setTimeout(() => setProjectIdCopied(false), 2000);
}
}
useEffect(() => {
const load = async () => {
const userWorkspaces = await getWorkspaces();
userWorkspaces.forEach((userWorkspace) => {
if (userWorkspace._id == router.query.id) {
if (userWorkspace._id == workspaceId) {
setWorkspaceName(userWorkspace.name);
setEnvironments(userWorkspace.environments);
}
});
const tempServiceTokens = await getServiceTokens({
workspaceId: router.query.id,
workspaceId,
});
setServiceTokens(tempServiceTokens);
};
load();
}, []);
const modifyWorkspaceName = (newName) => {
const modifyWorkspaceName = (newName: string) => {
setButtonReady(true);
setWorkspaceName(newName);
};
const submitChanges = (newWorkspaceName) => {
renameWorkspace(router.query.id, newWorkspaceName);
const submitChanges = (newWorkspaceName: string) => {
renameWorkspace(workspaceId, newWorkspaceName);
setButtonReady(false);
};
@@ -69,16 +101,54 @@ export default function SettingsBasic() {
if (userWorkspaces.length > 1) {
if (
userWorkspaces.filter(
(workspace) => workspace._id == router.query.id
(workspace) => workspace._id === workspaceId
)[0].name == workspaceToBeDeletedName
) {
await deleteWorkspace(router.query.id);
await deleteWorkspace(workspaceId);
const userWorkspaces = await getWorkspaces();
router.push("/dashboard/" + userWorkspaces[0]._id);
router.push('/dashboard/' + userWorkspaces[0]._id);
}
}
};
const onCreateEnvironment = async ({ name, slug }: EnvData) => {
const res = await createEnvironment(workspaceId, {
environmentName: name,
environmentSlug: slug,
});
if (res) {
// TODO: on react-query migration do an api call to resync
setEnvironments((env) => [...env, { name, slug }]);
}
};
const onUpdateEnvironment = async (
oldSlug: string,
{ name, slug }: EnvData
) => {
const res = await updateEnvironment(workspaceId, {
oldEnvironmentSlug: oldSlug,
environmentName: name,
environmentSlug: slug,
});
// TODO: on react-query migration do an api call to resync
if (res) {
setEnvironments((env) =>
env.map((el) => (el.slug === oldSlug ? { name, slug } : el))
);
}
};
const onDeleteEnvironment = async (slugToBeDelete: string) => {
const res = await deleteEnvironment(workspaceId, slugToBeDelete);
// TODO: on react-query migration do an api call to resync
if (res) {
setEnvironments((env) =>
env.filter(({ slug }) => slug !== slugToBeDelete)
);
}
};
return (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
@@ -89,9 +159,12 @@ export default function SettingsBasic() {
</Head>
<AddServiceTokenDialog
isOpen={isAddServiceTokenDialogOpen}
workspaceId={router.query.id}
workspaceId={workspaceId}
environments={environments}
closeModal={closeAddServiceTokenModal}
workspaceName={workspaceName}
serviceTokens={serviceTokens}
setServiceTokens={setServiceTokens}
/>
<div className='flex flex-row mr-6 max-w-5xl'>
<div className='w-full max-h-screen pb-2 overflow-y-auto'>
@@ -112,12 +185,13 @@ export default function SettingsBasic() {
<div className='flex flex-col ml-6 text-mineshaft-50'>
<div className='flex flex-col'>
<div className='min-w-md mt-2 flex flex-col items-start'>
<div className='bg-white/5 rounded-md px-6 pt-6 pb-4 flex flex-col items-start w-full mb-6'>
<p className='text-xl font-semibold mb-4'>
<div className='bg-white/5 rounded-md px-6 pt-6 pb-4 flex flex-col items-start flex flex-col items-start w-full mb-6 pt-2'>
<p className='text-xl font-semibold mb-4 mt-2'>
{t('common:display-name')}
</p>
<div className='max-h-28 w-full max-w-md mr-auto'>
<InputField
label=''
onChangeHandler={modifyWorkspaceName}
type='varName'
value={workspaceName}
@@ -128,7 +202,7 @@ export default function SettingsBasic() {
<div className='flex justify-start w-full'>
<div className={`flex justify-start max-w-sm mt-4 mb-2`}>
<Button
text={t('common:save-changes')}
text={t('common:save-changes') as string}
onButtonPressed={() => submitChanges(workspaceName)}
color='mineshaft'
size='md'
@@ -139,7 +213,7 @@ export default function SettingsBasic() {
</div>
</div>
</div>
<div className='bg-white/5 rounded-md px-6 pt-6 pb-2 flex flex-col items-start w-full mb-6 mt-4'>
<div className='bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start w-full mb-6 mt-4'>
<p className='text-xl font-semibold self-start'>
{t('common:project-id')}
</p>
@@ -158,30 +232,70 @@ export default function SettingsBasic() {
{t('settings-project:docs')}
</a>
</p>
<div className='max-h-28 w-ful'>
<InputField
type='varName'
value={router.query.id}
placeholder=''
isRequired
static
text={t('settings-project:auto-generated')}
/>
<p className='mt-4 text-xs text-bunker-300'>
{t('settings-project:auto-generated')}
</p>
<div className='flex justify-end items-center bg-white/[0.07] text-base mt-2 mb-3 mr-2 rounded-md text-gray-400'>
<p className='mr-2 font-bold pl-4'>{`${t(
'common:project-id'
)}:`}</p>
<input
type='text'
value={workspaceId}
id='myInput'
className='bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none'
disabled
></input>
<div className='group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200'>
<button
onClick={copyToClipboard}
className='pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200'
>
{projectIdCopied ? (
<FontAwesomeIcon icon={faCheck} className='pr-0.5' />
) : (
<FontAwesomeIcon icon={faCopy} />
)}
</button>
<span className='absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-bunker-800 rounded-md text-center text-gray-400 text-sm'>
{t('common:click-to-copy')}
</span>
</div>
</div>
</div>
<div className='bg-white/5 rounded-md px-6 pt-6 flex flex-col items-start w-full mt-4 mb-4'>
<EnvironmentTable
data={environments}
onCreateEnv={onCreateEnvironment}
onUpdateEnv={onUpdateEnvironment}
onDeleteEnv={onDeleteEnvironment}
/>
</div>
<div className='bg-white/5 rounded-md px-6 flex flex-col items-start w-full mt-4 mb-4 pt-2'>
<div className='flex flex-row justify-between w-full'>
<div className='flex flex-col w-full'>
<p className='text-xl font-semibold mb-3'>
{t('section-token:service-tokens')}
</p>
<p className='text-base text-gray-400 mb-4'>
<p className='text-sm text-gray-400'>
{t('section-token:service-tokens-description')}
</p>
<p className='text-sm text-gray-400 mb-4'>
Please, make sure you are on the
<a
className='text-primary underline underline-offset-2 ml-1'
href='https://infisical.com/docs/cli/overview'
target='_blank'
rel='noreferrer'
>
latest version of CLI
</a>
.
</p>
</div>
<div className='w-48'>
<div className='w-48 mt-2'>
<Button
text={t('section-token:add-new')}
text={t('section-token:add-new') as string}
onButtonPressed={() => {
setIsAddServiceTokenDialogOpen(true);
}}
@@ -194,14 +308,12 @@ export default function SettingsBasic() {
<ServiceTokenTable
data={serviceTokens}
workspaceName={workspaceName}
setServiceTokens={setServiceTokens as any}
/>
</div>
<div className='bg-white/5 rounded-md px-6 pt-6 flex flex-col items-start w-full mt-4 mb-4'>
<EnvironmentTable data={environments} />
</div>
</div>
</div>
<div className='bg-white/5 rounded-md px-6 pt-6 pb-6 border-l border-red pl-6 flex flex-col items-start w-full mb-6 mt-4'>
<div className='bg-white/5 rounded-md px-6 border-l border-red pl-6 flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2'>
<p className='text-xl font-bold text-red'>
{t('settings-project:danger-zone')}
</p>
@@ -239,7 +351,7 @@ export default function SettingsBasic() {
SettingsBasic.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-project",
"section-token",
'settings',
'settings-project',
'section-token',
]);