feat(ui): implemented the new project settings page

frontend/public/locales/en/section-token.json

@@ -4,7 +4,7 @@
   "add-new": "Add New Token",
   "add-dialog": {
     "title": "Add a service token for {{target}}",
-    "description": "Specify the name, environment, and expiry period. When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.",
+    "description": "When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.",
     "name": "Service Token Name",
     "add": "Add Service Token",
     "copy-service-token": "Copy your service token",

frontend/src/components/basic/Layout.tsx

@@ -187,10 +187,10 @@ const Layout = ({ children }: LayoutProps) => {
       });
       const userWorkspaces = orgUserProjects;
       if (
-        userWorkspaces.length === 0 &&
+        (userWorkspaces.length === 0 &&
-        router.asPath !== '/noprojects' &&
+          router.asPath !== '/noprojects' &&
-        !router.asPath.includes('home') &&
+          !router.asPath.includes('home') &&
-        !router.asPath.includes('settings') ||
+          !router.asPath.includes('settings')) ||
         router.asPath === '/dashboard/undefined'
       ) {
         router.push('/noprojects');
@@ -246,16 +246,15 @@ const Layout = ({ children }: LayoutProps) => {
 
   return (
     <>
-      <div className="fixed w-full md:block flex flex-col h-screen">
+      <div className="flex h-screen w-full flex-col overflow-x-hidden">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js" defer />
         <NavBarDashboard />
-        <div className="flex flex-col md:flex-row flex-1">
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
-          <aside className="bg-bunker-600 border-r border-mineshaft-500 w-full md:w-60 h-screen">
+          <aside className="w-full border-r border-mineshaft-500 bg-bunker-600 md:w-60">
-            <nav className="flex flex-col justify-between items-between h-full">
+            <nav className="items-between flex h-full flex-col justify-between">
               {/* <div className="py-6"></div> */}
               <div>
-                <div className="flex justify-center w-full mt-[4.5rem] mb-6 bg-bunker-600 h-20 flex-col items-center px-4">
+                <div className="mt-6 mb-6 flex h-20 w-full flex-col items-center justify-center bg-bunker-600 px-4">
-                  <div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
+                  <div className="ml-1 mb-1 self-start text-xs font-semibold tracking-wide text-gray-400">
                     {t('nav:menu.project')}
                   </div>
                   {Object.keys(workspaceMapping).length > 0 ? (
@@ -279,29 +278,29 @@ const Layout = ({ children }: LayoutProps) => {
                 <ul>
                   {Object.keys(workspaceMapping).length > 0 &&
                     menuItems.map(({ href, title, emoji }) => (
-                      <li className="mt-0.5 mx-2" key={title}>
+                      <li className="mx-2 mt-0.5" key={title}>
                         {router.asPath.split('/')[1] === href.split('/')[1] &&
                         (['project', 'billing', 'org', 'personal'].includes(
                           router.asPath.split('/')[2]
                         )
                           ? router.asPath.split('/')[2] === href.split('/')[2]
                           : true) ? (
-                          <div className="flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10">
+                          <div className="relative flex cursor-pointer rounded bg-primary-50/10 px-0.5 py-2.5 text-sm text-white">
-                            <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1" />
+                            <div className="absolute inset-0 top-0 my-1 ml-1 mr-1 w-1 rounded-xl bg-primary" />
-                            <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">
+                            <p className="ml-4 mr-2 flex w-6 items-center justify-center text-lg">
                               {emoji}
                             </p>
                             {title}
                           </div>
                         ) : router.asPath === '/noprojects' ? (
-                          <div className="flex p-2.5 text-white text-sm rounded">
+                          <div className="flex rounded p-2.5 text-sm text-white">
-                            <p className="w-10 flex items-center justify-center text-lg">{emoji}</p>
+                            <p className="flex w-10 items-center justify-center text-lg">{emoji}</p>
                             {title}
                           </div>
                         ) : (
                           <Link href={href}>
-                            <div className="flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5">
+                            <div className="flex cursor-pointer rounded p-2.5 text-sm text-white hover:bg-primary-50/5">
-                              <p className="w-10 flex items-center justify-center text-lg">
+                              <p className="flex w-10 items-center justify-center text-lg">
                                 {emoji}
                               </p>
                               {title}
@@ -312,11 +311,11 @@ const Layout = ({ children }: LayoutProps) => {
                     ))}
                 </ul>
               </div>
-              <div className="w-full mt-40 mb-4 px-2">
+              <div className="mt-40 mb-4 w-full px-2">
                 {router.asPath.split('/')[1] === 'home' ? (
-                  <div className="flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10">
+                  <div className="relative flex cursor-pointer rounded bg-primary-50/10 px-0.5 py-2.5 text-sm text-white">
-                    <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1" />
+                    <div className="absolute inset-0 top-0 my-1 ml-1 mr-1 w-1 rounded-xl bg-primary" />
-                    <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">
+                    <p className="ml-4 mr-2 flex w-6 items-center justify-center text-lg">
                       <FontAwesomeIcon icon={faBookOpen} />
                     </p>
                     Infisical Guide
@@ -336,8 +335,8 @@ const Layout = ({ children }: LayoutProps) => {
                   </div>
                 ) : (
                   <Link href={`/home/${workspaceMapping[workspaceSelected as any]}`}>
-                    <div className="relative flex p-2.5 overflow-visible text-white h-10 text-sm rounded cursor-pointer bg-white/10 hover:bg-primary-50/[0.15] mt-max">
+                    <div className="mt-max relative flex h-10 cursor-pointer overflow-visible rounded bg-white/10 p-2.5 text-sm text-white hover:bg-primary-50/[0.15]">
-                      <p className="w-10 flex items-center justify-center text-lg">
+                      <p className="flex w-10 items-center justify-center text-lg">
                         <FontAwesomeIcon icon={faBookOpen} />
                       </p>
                       Infisical Guide
@@ -369,12 +368,12 @@ const Layout = ({ children }: LayoutProps) => {
             error={error}
             loading={loading}
           />
-          <main className="flex-1 bg-bunker-800">{children}</main>
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800">{children}</main>
         </div>
       </div>
-      <div className="md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
+      <div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="text-gray-300 text-7xl mb-8" />
+        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="text-gray-200 px-6 text-center text-lg max-w-sm">
+        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t('common:no-mobile')} `}
         </p>
       </div>

frontend/src/components/basic/table/EnvironmentsTable.tsx

@@ -41,7 +41,6 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-
   const onEnvCreateCB = async (env: Env) => {
     try {
       await onCreateEnv(env);
@@ -71,14 +70,14 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
 
   return (
     <>
-      <div className="flex flex-row justify-between w-full">
+      <div className="flex w-full flex-row justify-between">
-        <div className="flex flex-col w-full">
+        <div className="flex w-full flex-col">
-          <p className="text-xl font-semibold mb-3">Project Environments</p>
+          <p className="mb-3 text-xl font-semibold">Project Environments</p>
-          <p className="text-base text-gray-400 mb-4">
+          <p className="mb-4 text-base text-gray-400">
             Choose which environments will show up in your dashboard like development, staging,
             production
           </p>
-          <p className="text-sm mr-1 text-gray-500 self-start">
+          <p className="mr-1 self-start text-sm text-gray-500">
             Note: the text in slugs shows how these environmant should be accessed in CLI.
           </p>
         </div>
@@ -86,10 +85,10 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           <Button
             text="Add New Env"
             onButtonPressed={() => {
-              if (plan !== plans.starter || host !== "https://app.infisical.com") {
+              if (plan !== plans.starter || host !== 'https://app.infisical.com') {
-                handlePopUpOpen('createUpdateEnv')
+                handlePopUpOpen('createUpdateEnv');
               } else {
-                handlePopUpOpen('upgradePlan')
+                handlePopUpOpen('upgradePlan');
               }
             }}
             color="mineshaft"
@@ -98,32 +97,30 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           />
         </div>
       </div>
-      <div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
+      <div className="table-container relative mb-6 mt-1 w-full rounded-md border border-mineshaft-700 bg-bunker">
-        <div className="absolute rounded-t-md w-full h-12 bg-white/5" />
+        <div className="absolute h-12 w-full rounded-t-md bg-white/5" />
-        <table className="w-full my-1">
+        <table className="my-1 w-full">
           <thead className="text-bunker-300">
             <tr>
-              <th className="text-left pl-6 pt-2.5 pb-2">Name</th>
+              <th className="pl-6 pt-2.5 pb-2 text-left">Name</th>
-              <th className="text-left pl-6 pt-2.5 pb-2">Slug</th>
+              <th className="pl-6 pt-2.5 pb-2 text-left">Slug</th>
               <th aria-label="buttons" />
             </tr>
           </thead>
           <tbody>
             {data?.length > 0 ? (
               data.map(({ name, slug }) => (
-                <tr key={name} className="bg-bunker-800 hover:bg-bunker-800/5 duration-100">
+                <tr key={name} className="bg-bunker-800 duration-100 hover:bg-bunker-800/5">
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+                  <td className="border-t border-mineshaft-700 py-2 pl-6 text-gray-300">{name}</td>
-                    {name}
+                  <td className="border-t border-mineshaft-700 py-2 pl-6 text-gray-300">{slug}</td>
-                  </td>
+                  <td className="flex justify-end border-t border-mineshaft-700 py-2">
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">{slug}</td>
+                    <div className="mr-2 flex items-center duration-200 hover:opacity-100">
-                  <td className="py-2 border-mineshaft-700 border-t flex justify-end">
-                    <div className="hover:opacity-100 duration-200 flex items-center mr-2">
                       <Button
                         onButtonPressed={() => {
-                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
+                          if (plan !== plans.starter || host !== 'https://app.infisical.com') {
-                            handlePopUpOpen('createUpdateEnv', { name, slug })
+                            handlePopUpOpen('createUpdateEnv', { name, slug });
                           } else {
-                            handlePopUpOpen('upgradePlan')
+                            handlePopUpOpen('upgradePlan');
                           }
                         }}
                         color="mineshaft"
@@ -131,13 +128,13 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
                         icon={faPencil}
                       />
                     </div>
-                    <div className="opacity-50 hover:opacity-100 duration-200 flex items-center mr-6">
+                    <div className="mr-6 flex items-center opacity-50 duration-200 hover:opacity-100">
                       <Button
                         onButtonPressed={() => {
-                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
+                          if (plan !== plans.starter || host !== 'https://app.infisical.com') {
-                            handlePopUpOpen('deleteEnv', { name, slug })
+                            handlePopUpOpen('deleteEnv', { name, slug });
                           } else {
-                            handlePopUpOpen('upgradePlan')
+                            handlePopUpOpen('upgradePlan');
                           }
                         }}
                         color="red"
@@ -150,7 +147,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
               ))
             ) : (
               <tr>
-                <td colSpan={4} className="text-center pt-7 pb-4 text-bunker-400">
+                <td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
                   No environmants found
                 </td>
               </tr>
@@ -174,7 +171,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           onCreateSubmit={onEnvCreateCB}
           onEditSubmit={onEnvUpdateCB}
         />
-        <UpgradePlanModal 
+        <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onClose={() => handlePopUpClose('upgradePlan')}
           text="You can add custom environments if you switch to Infisical's Team plan."

frontend/src/components/dashboard/SideBar.tsx

@@ -71,7 +71,7 @@ const SideBar = ({
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 right-0 z-40 shadow-xl flex flex-col justify-between">
       {isLoading ? (
         <div className="flex items-center justify-center h-full">
           <Image
@@ -171,7 +171,7 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]">
+      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-8">
         <Button
           text={String(t('common:save-changes'))}
           onButtonPressed={savePush}

frontend/src/components/navigation/NavBarDashboard.tsx

@@ -93,7 +93,7 @@ export default function Navbar() {
   };
 
   return (
-    <div className="absolute flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
+    <div className="flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
       <div className="m-auto flex justify-start items-center mx-4">
         <div className="flex flex-row items-center">
           <div className="flex justify-center py-4">

frontend/src/components/navigation/NavHeader.tsx

@@ -3,8 +3,8 @@ import { useRouter } from 'next/router';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { useWorkspace } from '@app/context';
 import getOrganization from '@app/pages/api/organization/GetOrg';
-import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
 
 /**
  * This is the component at the top of almost every page.
@@ -23,9 +23,9 @@ export default function NavHeader({
   isProjectRelated?: boolean;
 }): JSX.Element {
   const [orgName, setOrgName] = useState('');
-  const [workspaceName, setWorkspaceName] = useState('');
   const router = useRouter();
   const projectId = String(router.query.id);
+  const { currentWorkspace } = useWorkspace();
 
   useEffect(() => {
     (async () => {
@@ -34,29 +34,24 @@ export default function NavHeader({
         orgId: orgId || ''
       });
       setOrgName(org.name);
-
-      const workspace = await getProjectInfo({
-        projectId
-      });
-      setWorkspaceName(workspace.name);
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
   return (
-    <div className="pt-20 ml-6 flex flex-row items-center">
+    <div className="ml-6 flex flex-row items-center pt-8">
-      <div className="bg-primary-900 h-6 w-6 rounded-md flex items-center justify-center text-mineshaft-100 mr-2">
+      <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
         {orgName?.charAt(0)}
       </div>
-      <div className="text-primary text-sm font-semibold">{orgName}</div>
+      <div className="text-sm font-semibold text-primary">{orgName}</div>
       {isProjectRelated && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-          <div className="font-semibold text-primary text-sm">{workspaceName}</div>
+          <div className="text-sm font-semibold text-primary">{currentWorkspace?.name}</div>
         </>
       )}
-      <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
+      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-      <div className="text-gray-400 text-sm">{pageName}</div>
+      <div className="text-sm text-gray-400">{pageName}</div>
     </div>
   );
 }

frontend/src/const.ts

@@ -16,11 +16,31 @@ export const publicPaths = [
   `/terms`,
   `/subprocessors`,
   `/verify-email`,
-  `/password-reset`,
+  `/password-reset`
 ];
 
 export const languageMap = {
-  en: "English",
+  en: 'English',
-  ko: "한국어",
+  ko: '한국어',
-  fr: "Français",
+  fr: 'Français'
 };
+
+interface Mapping {
+  [key: string]: string;
+}
+
+const plansDev: Mapping = {
+  starter: 'prod_Mb4ATFT5QAHoPM',
+  team: 'prod_NEpD2WMXUS2eDn',
+  professional: 'prod_Mb4CetZ2jE7jdl',
+  enterprise: 'licence_key_required'
+};
+
+const plansProd: Mapping = {
+  starter: 'prod_Mb8oR5XNwyFTul',
+  team: 'prod_NEp7fAB3UJWK6A',
+  professional: 'prod_Mb8pUIpA0OUi5N',
+  enterprise: 'licence_key_required'
+};
+
+export const plans = plansProd || plansDev;

frontend/src/pages/_app.tsx

@@ -10,7 +10,9 @@ import Layout from '@app/components/basic/Layout';
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
 import { publicPaths } from '@app/const';
+import { SubscriptionProvider } from '@app/context';
 import { AuthProvider } from '@app/context/AuthContext';
+import { WorkspaceProvider } from '@app/context/WorkspaceContext';
 import { queryClient } from '@app/reactQuery';
 
 import '@fortawesome/fontawesome-svg-core/styles.css';
@@ -68,11 +70,15 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
   return (
     <QueryClientProvider client={queryClient}>
       <AuthProvider>
-        <NotificationProvider>
+        <WorkspaceProvider>
-          <Layout>
+          <SubscriptionProvider>
-            <Component {...pageProps} />
+            <NotificationProvider>
-          </Layout>
+              <Layout>
-        </NotificationProvider>
+                <Component {...pageProps} />
+              </Layout>
+            </NotificationProvider>
+          </SubscriptionProvider>
+        </WorkspaceProvider>
       </AuthProvider>
     </QueryClientProvider>
   );

frontend/src/pages/activity/[id].tsx

@@ -124,7 +124,7 @@ export default function Activity() {
   };
 
   return (
-    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll h-screen">
+    <div className="mx-6 lg:mx-0 w-full h-screen">
       <NavHeader pageName="Project Activity" isProjectRelated />
       {currentSidebarAction && (
         <ActivitySideBar toggleSidebar={toggleSidebar} currentAction={currentSidebarAction} />

frontend/src/pages/dashboard/[id].tsx

@@ -518,7 +518,7 @@ export default function Dashboard() {
   };
 
   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 h-full relative flex flex-col justify-between text-white">
       <Head>
         <title>{t('common:head-title', { title: t('dashboard:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -526,7 +526,7 @@ export default function Dashboard() {
         <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">
+      <div className="flex flex-row h-full">
         {sidebarSecretId !== 'None' && (
           <SideBar
             toggleSidebar={toggleSidebar}

frontend/src/pages/settings/project/[id].tsx

@@ -1,332 +1,28 @@
-import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 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 '@app/components/basic/buttons/Button';
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
-import AddServiceTokenDialog from '@app/components/basic/dialog/AddServiceTokenDialog';
+import { ProjectSettingsPage } from '@app/views/Settings/ProjectSettingsPage';
-import InputField from '@app/components/basic/InputField';
-import EnvironmentTable from '@app/components/basic/table/EnvironmentsTable';
-import ServiceTokenTable from '@app/components/basic/table/ServiceTokenTable';
-import NavHeader from '@app/components/navigation/NavHeader';
-import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-import deleteEnvironment from '@app/pages/api/environments/deleteEnvironment';
-import updateEnvironment from '@app/pages/api/environments/updateEnvironment';
-
-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 [serviceTokens, setServiceTokens] = useState<any[]>([]);
-  const [environments, setEnvironments] = useState<Array<EnvData>>([]);
-  const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
-  // const [isAddOpen, setIsAddOpen] = useState(false);
-  const [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] = useState(false);
-  const [projectIdCopied, setProjectIdCopied] = useState(false);
-  const workspaceId = router.query.id as string;
 
+const ProjectSettings = () => {
   const { t } = useTranslation();
 
-  /**
-   * 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 === workspaceId) {
-          setWorkspaceName(userWorkspace.name);
-          setEnvironments(userWorkspace.environments);
-        }
-      });
-      const tempServiceTokens = await getServiceTokens({
-        workspaceId
-      });
-      setServiceTokens(tempServiceTokens);
-    };
-
-    load();
-  }, []);
-
-  const modifyWorkspaceName = (newName: string) => {
-    setButtonReady(true);
-    setWorkspaceName(newName);
-  };
-
-  const submitChanges = (newWorkspaceName: string) => {
-    renameWorkspace(workspaceId, newWorkspaceName);
-    setButtonReady(false);
-  };
-
-  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 () => {
-    const userWorkspaces = await getWorkspaces();
-
-    if (userWorkspaces.length > 1) {
-      if (
-        userWorkspaces.filter((workspace) => workspace._id === workspaceId)[0].name ===
-        workspaceToBeDeletedName
-      ) {
-        await deleteWorkspace(workspaceId);
-        const ws = await getWorkspaces();
-        router.push(`/dashboard/${ws[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>
         <title>{t('common:head-title', { title: t('settings-project:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <AddServiceTokenDialog
+      <ProjectSettingsPage />
-        isOpen={isAddServiceTokenDialogOpen}
+    </>
-        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">
-          <NavHeader pageName={t('settings-project:title')} isProjectRelated />
-          <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 pb-4 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}
-                      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') as string}
-                        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 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
-                    />
-                    <div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
-                      <button
-                        type="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-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') as string}
-                        onButtonPressed={() => {
-                          setIsAddServiceTokenDialogOpen(true);
-                        }}
-                        color="mineshaft"
-                        icon={faPlus}
-                        size="md"
-                      />
-                    </div>
-                  </div>
-                  <ServiceTokenTable
-                    data={serviceTokens}
-                    workspaceName={workspaceName}
-                    setServiceTokens={setServiceTokens as any}
-                  />
-                </div>
-              </div>
-            </div>
-            <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>
-              <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') as string}
-                  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 default ProjectSettings;
 
-export const getServerSideProps = getTranslatedServerSideProps([
+ProjectSettings.requireAuth = true;
+
+export const getServerSideProps = getTranslatedStaticProps([
   'settings',
   'settings-project',
   'section-token'

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -0,0 +1,287 @@
+import crypto from 'crypto';
+
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import NavHeader from '@app/components/navigation/NavHeader';
+// TODO(akhilmhdh):Refactor this into a better utility module package
+import {
+  decryptAssymmetric,
+  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 {
+  useCreateServiceToken,
+  useCreateWsEnvironment,
+  useDeleteServiceToken,
+  useDeleteWorkspace,
+  useDeleteWsEnvironment,
+  useGetUserWsKey,
+  useGetUserWsServiceTokens,
+  useRenameWorkspace,
+  useUpdateWsEnvironment
+} from '@app/hooks/api';
+
+import {
+  CopyProjectIDSection,
+  CreateServiceToken,
+  CreateUpdateEnvFormData,
+  EnvironmentSection,
+  ProjectNameChangeSection,
+  ServiceTokenSection
+} from './components';
+
+export const ProjectSettingsPage = () => {
+  const { t } = useTranslation();
+  const { currentWorkspace } = useWorkspace();
+  const { data: serviceTokens } = useGetUserWsServiceTokens({
+    workspaceID: currentWorkspace?._id || ''
+  });
+  const workspaceID = currentWorkspace?._id || '';
+  const { createNotification } = useNotificationContext();
+  // delete action worksapce
+  const [deleteProjectInput, setDeleteProjectInput] = useState('');
+  const [isDeleting, setIsDeleting] = useToggle();
+
+  const renameWorkspace = useRenameWorkspace();
+  const deleteWorkspace = useDeleteWorkspace();
+  // env crud operation
+  const createWsEnv = useCreateWsEnvironment();
+  const updateWsEnv = useUpdateWsEnvironment();
+  const deleteWsEnv = useDeleteWsEnvironment();
+
+  // service token
+  const { data: latestFileKey } = useGetUserWsKey(workspaceID);
+  const createServiceToken = useCreateServiceToken();
+  const deleteServiceToken = useDeleteServiceToken();
+
+  // get user subscription
+  const { subscriptionPlan } = useSubscription();
+  const host = window.location.origin;
+  const isEnvServiceAllowed =
+    subscriptionPlan !== plans.starter || host !== 'https://app.infisical.com';
+
+  const onRenameWorkspace = async (name: string) => {
+    try {
+      await renameWorkspace.mutateAsync({ workspaceID, newWorkspaceName: name });
+      createNotification({
+        text: 'Successfully renamed workspace',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to rename workspace',
+        type: 'error'
+      });
+    }
+  };
+
+  const onDeleteWorkspace = async () => {
+    setIsDeleting.on();
+    try {
+      await deleteWorkspace.mutateAsync({ workspaceID });
+      createNotification({
+        text: 'Successfully deleted workspace',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete workspace',
+        type: 'error'
+      });
+    } finally {
+      setIsDeleting.off();
+    }
+  };
+
+  // workspace environment operation
+  const onCreateWsEnv = async ({ environmentName, environmentSlug }: CreateUpdateEnvFormData) => {
+    try {
+      await createWsEnv.mutateAsync({ workspaceID, environmentName, environmentSlug });
+      createNotification({
+        text: 'Successfully created environment',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create environment',
+        type: 'error'
+      });
+    }
+  };
+
+  const onUpdateWsEnv = async (
+    oldEnvironmentSlug: string,
+    { environmentName, environmentSlug }: CreateUpdateEnvFormData
+  ) => {
+    try {
+      await updateWsEnv.mutateAsync({
+        workspaceID,
+        environmentName,
+        environmentSlug,
+        oldEnvironmentSlug
+      });
+      createNotification({
+        text: 'Successfully updated environment',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to update environment',
+        type: 'error'
+      });
+    }
+  };
+
+  const onDeleteWsEnv = async (environmentSlug: string) => {
+    try {
+      await deleteWsEnv.mutateAsync({
+        workspaceID,
+        environmentSlug
+      });
+      createNotification({
+        text: 'Successfully deleted environment',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete environment',
+        type: 'error'
+      });
+    }
+  };
+
+  const onCreateServiceToken = async ({ environment, expiresIn, name }: CreateServiceToken) => {
+    // type guard
+    if (!latestFileKey) return '';
+    try {
+      // crypo calculation to generate the key
+      const key = decryptAssymmetric({
+        ciphertext: latestFileKey.encryptedKey,
+        nonce: latestFileKey.nonce,
+        publicKey: latestFileKey.sender.publicKey,
+        privateKey: localStorage.getItem('PRIVATE_KEY') as string
+      });
+      const randomBytes = crypto.randomBytes(16).toString('hex');
+      const { ciphertext, iv, tag } = encryptSymmetric({
+        plaintext: key,
+        key: randomBytes
+      });
+
+      const res = await createServiceToken.mutateAsync({
+        encryptedKey: ciphertext,
+        iv,
+        tag,
+        environment,
+        expiresIn: Number(expiresIn),
+        name,
+        workspaceId: workspaceID
+      });
+      console.log(res);
+      createNotification({
+        text: 'Successfully created API token',
+        type: 'success'
+      });
+      return res.serviceToken;
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create API token',
+        type: 'error'
+      });
+    }
+    return '';
+  };
+
+  const onDeleteServiceToken = async (tokenID: string) => {
+    try {
+      await deleteServiceToken.mutateAsync(tokenID);
+      createNotification({
+        text: 'Successfully revoked service token',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete service token',
+        type: 'error'
+      });
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex flex-col px-8 text-mineshaft-50">
+      {/* TODO(akhilmhdh): Remove this right when layout is refactored  */}
+      <div className="relative right-5">
+        <NavHeader pageName={t('settings-project:title')} isProjectRelated />
+      </div>
+      <div className="my-8 flex max-w-5xl flex-row items-center justify-between text-xl">
+        <div className="flex flex-col items-start justify-start text-3xl">
+          <p className="mr-4 font-semibold text-gray-200">{t('settings-project:title')}</p>
+          <p className="mr-4 text-base font-normal text-gray-400">
+            {t('settings-project:description')}
+          </p>
+        </div>
+      </div>
+      <ProjectNameChangeSection
+        workspaceName={currentWorkspace?.name}
+        onProjectNameChange={onRenameWorkspace}
+      />
+      <CopyProjectIDSection workspaceID={currentWorkspace?._id || ''} />
+      <EnvironmentSection
+        environments={currentWorkspace?.environments || []}
+        onCreate={onCreateWsEnv}
+        onDelete={onDeleteWsEnv}
+        onUpdate={onUpdateWsEnv}
+        isEnvServiceAllowed={isEnvServiceAllowed}
+      />
+      <ServiceTokenSection
+        tokens={serviceTokens || []}
+        environments={currentWorkspace?.environments || []}
+        onDeleteToken={onDeleteServiceToken}
+        workspaceName={currentWorkspace?.name || ''}
+        onCreateToken={onCreateServiceToken}
+      />
+      <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-2">
+        <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">
+          <FormControl
+            label={
+              <div className="mb-2 text-sm font-normal text-gray-400">
+                Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
+                workspace
+              </div>
+            }
+          >
+            <Input
+              onChange={(e) => setDeleteProjectInput(e.target.value)}
+              value={deleteProjectInput}
+              placeholder="Type the project name to delete"
+            />
+          </FormControl>
+        </div>
+        <Button
+          colorSchema="danger"
+          onClick={onDeleteWorkspace}
+          isDisabled={deleteProjectInput !== currentWorkspace?.name || isDeleting}
+          isLoading={isDeleting}
+        >
+          {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>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/CopyProjectIDSection.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { IconButton } from '@app/components/v2';
+import { useToggle } from '@app/hooks';
+
+type Props = {
+  workspaceID: string;
+};
+
+export const CopyProjectIDSection = ({ workspaceID }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isProjectIdCopied) {
+      timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isProjectIdCopied]);
+
+  const copyProjectIdToClipboard = () => {
+    navigator.clipboard.writeText(workspaceID);
+    setIsProjectIdCopied.on();
+  };
+
+  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">
+      <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/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>
+      <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>
+        <IconButton
+          ariaLabel="copy icon"
+          colorSchema="secondary"
+          className="group relative"
+          onClick={() => copyProjectIdToClipboard()}
+        >
+          <FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />
+          <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+            {t('common:click-to-copy')}
+          </span>
+        </IconButton>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/index.tsx

@@ -0,0 +1 @@
+export { CopyProjectIDSection } from './CopyProjectIDSection';

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx

@@ -0,0 +1,239 @@
+import { Controller, useForm } from 'react-hook-form';
+import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import {
+  Button,
+  DeleteActionModal,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  UpgradePlanModal
+} from '@app/components/v2';
+import { usePopUp } from '@app/hooks/usePopUp';
+
+type Props = {
+  environments: Array<{ name: string; slug: string }>;
+  isEnvServiceAllowed: boolean;
+  onCreate: (data: CreateUpdateEnvFormData) => Promise<void>;
+  onUpdate: (oldEnvSlug: string, data: CreateUpdateEnvFormData) => Promise<void>;
+  onDelete: (envSlug: string) => Promise<void>;
+};
+
+const createUpdateEnvSchema = yup.object({
+  environmentName: yup.string().label('Environment Name').required(),
+  environmentSlug: yup.string().label('Environment Slug').required()
+});
+
+export type CreateUpdateEnvFormData = yup.InferType<typeof createUpdateEnvSchema>;
+
+export const EnvironmentSection = ({
+  environments,
+  isEnvServiceAllowed,
+  onCreate,
+  onDelete,
+  onUpdate
+}: Props): JSX.Element => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    'createUpdateEnv',
+    'deleteEnv',
+    'upgradePlan'
+  ] as const);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<CreateUpdateEnvFormData>({
+    resolver: yupResolver(createUpdateEnvSchema)
+  });
+
+  const isEnvUpdate = Boolean(popUp?.createUpdateEnv?.data);
+  const oldEnvSlug = (popUp?.createUpdateEnv?.data as { slug: string })?.slug;
+
+  const onEnvModalSubmit = async (data: CreateUpdateEnvFormData) => {
+    if (isEnvUpdate) {
+      await onUpdate(oldEnvSlug, data);
+    } else {
+      await onCreate(data);
+    }
+    handlePopUpClose('createUpdateEnv');
+  };
+
+  const onEnvDeleteSubmit = async (envSlug: string) => {
+    await onDelete(envSlug);
+    handlePopUpClose('deleteEnv');
+  };
+
+  return (
+    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 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>
+          <p className="mb-4 text-base text-gray-400">
+            Choose which environments will show up in your dashboard like development, staging,
+            production
+          </p>
+          <p className="mr-1 self-start text-sm text-gray-500">
+            Note: the text in slugs shows how these environmant should be accessed in CLI.
+          </p>
+        </div>
+        <div>
+          <Button
+            onClick={() => {
+              if (isEnvServiceAllowed) {
+                handlePopUpOpen('createUpdateEnv');
+              } else {
+                handlePopUpOpen('upgradePlan');
+              }
+            }}
+            colorSchema="primary"
+          >
+            Add New Env
+          </Button>
+        </div>
+      </div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Slug</Th>
+              <Th aria-label="button" />
+            </Tr>
+          </THead>
+          <TBody>
+            {environments?.length > 0 ? (
+              environments.map(({ name, slug }) => (
+                <Tr key={name}>
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td className="flex items-center justify-end">
+                    <IconButton
+                      className="mr-4"
+                      onClick={() => {
+                        if (isEnvServiceAllowed) {
+                          handlePopUpOpen('createUpdateEnv', { name, slug });
+                          reset({ environmentName: name, environmentSlug: slug });
+                        } else {
+                          handlePopUpOpen('upgradePlan');
+                        }
+                      }}
+                      colorSchema="secondary"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faPencil} />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => {
+                        if (isEnvServiceAllowed) {
+                          handlePopUpOpen('deleteEnv', { name, slug });
+                        } else {
+                          handlePopUpOpen('upgradePlan');
+                        }
+                      }}
+                      colorSchema="danger"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr>
+                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
+                  No environmants found
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <Modal
+        isOpen={popUp?.createUpdateEnv?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle('createUpdateEnv', isOpen);
+          reset();
+        }}
+      >
+        <ModalContent title={isEnvUpdate ? 'Update environment' : 'Create a new environment'}>
+          <form onSubmit={handleSubmit(onEnvModalSubmit)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="environmentName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="environmentSlug"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment Slug"
+                  helperText="Slugs are shorthands used in cli to access environment"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                {isEnvUpdate ? 'Update' : 'Create'}
+              </Button>
+
+              <Button colorSchema="secondary" variant="plain">
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.deleteEnv.isOpen}
+        title={`Are you sure want to delete ${
+          (popUp?.deleteEnv?.data as { name: string })?.name || ' '
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle('deleteEnv', isOpen)}
+        deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ''}
+        onDeleteApproved={() =>
+          onEnvDeleteSubmit((popUp?.deleteEnv?.data as { slug: string })?.slug)
+        }
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('upgradePlan', isOpen)}
+        text="You can add custom environments if you switch to Infisical's Team plan."
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/index.tsx

@@ -0,0 +1 @@
+export { EnvironmentSection } from './EnvironmentSection';

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import { Button, FormControl, Input } from '@app/components/v2';
+
+type Props = {
+  workspaceName?: string;
+  onProjectNameChange: (name: string) => Promise<void>;
+};
+
+const formSchema = yup.object({
+  name: yup.string().required().label('Project Name')
+});
+
+type FormData = yup.InferType<typeof formSchema>;
+
+export const ProjectNameChangeSection = ({
+  workspaceName,
+  onProjectNameChange
+}: Props): JSX.Element => {
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { isDirty, isSubmitting }
+  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    reset({ name: workspaceName });
+  }, [workspaceName]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    await onProjectNameChange(name);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-4 pt-2">
+        <p className="mb-4 mt-2 text-xl font-semibold">{t('common:display-name')}</p>
+        <div className="mb-4 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} />
+              </FormControl>
+            )}
+            control={control}
+            name="name"
+          />
+        </div>
+        <Button
+          isLoading={isSubmitting}
+          color="mineshaft"
+          size="sm"
+          type="submit"
+          isDisabled={!isDirty || isSubmitting}
+          leftIcon={<FontAwesomeIcon icon={faCheck} />}
+        >
+          {t('common:save-changes')}
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/index.tsx

@@ -0,0 +1 @@
+export { ProjectNameChangeSection } from './ProjectNameChangeSection';

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -0,0 +1,307 @@
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { faCheck, faCopy, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import {
+  Button,
+  DeleteActionModal,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalTrigger,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from '@app/components/v2';
+import { usePopUp, useToggle } from '@app/hooks';
+import { ServiceToken, WorkspaceEnv } from '@app/hooks/api/types';
+
+const apiTokenExpiry = [
+  { label: '1 Day', value: 86400 },
+  { label: '7 Days', value: 604800 },
+  { label: '1 Month', value: 2592000 },
+  { label: '6 months', value: 15552000 },
+  { label: '12 months', value: 31104000 }
+];
+
+const createServiceTokenSchema = yup.object({
+  name: yup.string().required().label('Service Token Name'),
+  environment: yup.string().required().label('Environment'),
+  expiresIn: yup.string().required().label('Service Token Name')
+});
+
+export type CreateServiceToken = yup.InferType<typeof createServiceTokenSchema>;
+
+type Props = {
+  tokens: ServiceToken[];
+  workspaceName: string;
+  environments: WorkspaceEnv[];
+  onDeleteToken: (serviceTokenID: string) => Promise<void>;
+  onCreateToken: (data: CreateServiceToken) => Promise<string>;
+};
+
+type DeleteModalData = { name: string; id: string };
+
+export const ServiceTokenSection = ({
+  tokens = [],
+  onDeleteToken,
+  workspaceName,
+  environments = [],
+  onCreateToken
+}: Props): JSX.Element => {
+  const [newToken, setToken] = useState('');
+  const { t } = useTranslation();
+  const [isTokenCopied, setIsTokenCopied] = useToggle(false);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isTokenCopied) {
+      timer = setTimeout(() => setIsTokenCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isTokenCopied]);
+
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newToken);
+    setIsTokenCopied.on();
+  };
+
+  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    'createAPIToken',
+    'deleteAPITokenConfirmation'
+  ] as const);
+
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<CreateServiceToken>({
+    resolver: yupResolver(createServiceTokenSchema)
+  });
+
+  const hasServiceToken = Boolean(newToken);
+
+  const onFormSubmit = async (data: CreateServiceToken) => {
+    const token = await onCreateToken(data);
+    setToken(token);
+  };
+
+  const onDeleteApproved = async () => {
+    await onDeleteToken((popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id);
+    handlePopUpClose('deleteAPITokenConfirmation');
+  };
+
+  return (
+    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 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>
+        </div>
+        <div>
+          <Modal
+            isOpen={popUp?.createAPIToken?.isOpen}
+            onOpenChange={(open) => {
+              handlePopUpToggle('createAPIToken', open);
+              reset();
+              setToken('');
+            }}
+          >
+            <ModalTrigger asChild>
+              <Button color="mineshaft" leftIcon={<FontAwesomeIcon icon={faPlus} />}>
+                {t('section-token:add-new')}
+              </Button>
+            </ModalTrigger>
+            <ModalContent
+              title={
+                t('section-token:add-dialog.title', {
+                  target: workspaceName
+                }) as string
+              }
+              subTitle={t('section-token:add-dialog.description') as string}
+            >
+              {!hasServiceToken ? (
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                  <Controller
+                    control={control}
+                    name="name"
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label={t('section-token:add-dialog.name')}
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <Input {...field} placeholder="Type your token name" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="environment"
+                    defaultValue={environments?.[0]?.slug}
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => onChange(e)}
+                          className="w-full"
+                        >
+                          {environments.map(({ name, slug }) => (
+                            <SelectItem value={slug} key={slug}>
+                              {name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="expiresIn"
+                    defaultValue={String(apiTokenExpiry?.[0]?.value)}
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Token Expiry"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => onChange(e)}
+                          className="w-full"
+                        >
+                          {apiTokenExpiry.map(({ label, value }) => (
+                            <SelectItem value={String(value)} key={label}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <div className="mt-8 flex items-center">
+                    <Button
+                      className="mr-4"
+                      type="submit"
+                      isDisabled={isSubmitting}
+                      isLoading={isSubmitting}
+                    >
+                      Create
+                    </Button>
+                    <ModalClose asChild>
+                      <Button variant="plain" colorSchema="secondary">
+                        Cancel
+                      </Button>
+                    </ModalClose>
+                  </div>
+                </form>
+              ) : (
+                <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                  <p className="mr-4 break-all">{newToken}</p>
+                  <IconButton
+                    ariaLabel="copy icon"
+                    colorSchema="secondary"
+                    className="group relative"
+                    onClick={copyTokenToClipboard}
+                  >
+                    <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
+                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                      {t('common:click-to-copy')}
+                    </span>
+                  </IconButton>
+                </div>
+              )}
+            </ModalContent>
+          </Modal>
+        </div>
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.deleteAPITokenConfirmation.isOpen}
+        title={`Delete ${
+          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || ' '
+        } api key?`}
+        onChange={(isOpen) => handlePopUpToggle('deleteAPITokenConfirmation', isOpen)}
+        deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
+        onClose={() => handlePopUpClose('deleteAPITokenConfirmation')}
+        onDeleteApproved={onDeleteApproved}
+      />
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Token Name</Th>
+              <Th>Environment</Th>
+              <Th>Valid Until</Th>
+              <Th aria-label="button" />
+            </Tr>
+          </THead>
+          <TBody>
+            {tokens?.length > 0 ? (
+              tokens.map((row) => (
+                <Tr key={row._id}>
+                  <Td>{row.name}</Td>
+                  <Td>{row.environment}</Td>
+                  <Td>{new Date(row.expiresAt).toUTCString()}</Td>
+                  <Td className="flex items-center justify-end">
+                    <IconButton
+                      className="mr-4"
+                      onClick={() =>
+                        handlePopUpOpen('deleteAPITokenConfirmation', {
+                          name: row.name,
+                          id: row._id
+                        })
+                      }
+                      colorSchema="danger"
+                      ariaLabel="delete"
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr>
+                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
+                  No environmants found
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/index.tsx

@@ -0,0 +1 @@
+export {ServiceTokenSection} from './ServiceTokenSection'

frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx

@@ -0,0 +1,6 @@
+export { CopyProjectIDSection } from './CopyProjectIDSection';
+export { EnvironmentSection } from './EnvironmentSection';
+export type { CreateUpdateEnvFormData } from './EnvironmentSection/EnvironmentSection';
+export { ProjectNameChangeSection } from './ProjectNameChangeSection';
+export { ServiceTokenSection } from './ServiceTokenSection';
+export type { CreateServiceToken } from './ServiceTokenSection/ServiceTokenSection';

frontend/src/views/Settings/ProjectSettingsPage/index.tsx

@@ -0,0 +1 @@
+export { ProjectSettingsPage } from './ProjectSettingsPage';