From 89a89af4e671b61ecda977add239add6ac7e10f0 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Mon, 15 May 2023 16:33:11 -0700
Subject: [PATCH] improving UX for the onboarding experience

---
 backend/src/controllers/v1/organizationController.ts  |  3 ++-
 .../src/components/basic/table/ProjectUsersTable.tsx  |  2 +-
 frontend/src/components/v2/Button/Button.tsx          |  2 +-
 frontend/src/hooks/api/keys/queries.tsx               |  2 +-
 frontend/src/layouts/AppLayout/AppLayout.tsx          | 11 +++++++----
 frontend/src/pages/noprojects.tsx                     |  8 +++++++-
 .../components/OrgMembersTable/OrgMembersTable.tsx    |  9 ++++++---
 .../OrgServiceAccountsTable.tsx                       | 10 +++-------
 8 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/backend/src/controllers/v1/organizationController.ts b/backend/src/controllers/v1/organizationController.ts
index 17103a7a6..b9fbc9f4b 100644
--- a/backend/src/controllers/v1/organizationController.ts
+++ b/backend/src/controllers/v1/organizationController.ts
@@ -19,7 +19,8 @@ export const getOrganizations = async (req: Request, res: Response) => {
 	try {
 		organizations = (
 			await MembershipOrg.find({
-				user: req.user._id
+				user: req.user._id,
+				status: ACCEPTED
 			}).populate('organization')
 		).map((m) => m.organization);
 	} catch (err) {
diff --git a/frontend/src/components/basic/table/ProjectUsersTable.tsx b/frontend/src/components/basic/table/ProjectUsersTable.tsx
index aea49e8e0..c78a6f6c2 100644
--- a/frontend/src/components/basic/table/ProjectUsersTable.tsx
+++ b/frontend/src/components/basic/table/ProjectUsersTable.tsx
@@ -285,7 +285,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
                     >
                       <Select
                         className="w-16 bg-mineshaft-700"
-                        dropdownContainerClassName="bg-mineshaft-700"
+                        dropdownContainerClassName="bg-mineshaft-800 border border-mineshaft-600 text-bunker-200"
                         position="item-aligned"
                         // open={isOpen}
                         onValueChange={(val) =>
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 9635227bd..90dcfbb3e 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
     'button',
     'transition-all',
     'font-inter font-medium',
-    'cursor-default',
+    'cursor-pointer',
     'inline-flex items-center justify-center',
     'relative',
     'whitespace-nowrap'
diff --git a/frontend/src/hooks/api/keys/queries.tsx b/frontend/src/hooks/api/keys/queries.tsx
index 6d7819dce..949a13ffd 100644
--- a/frontend/src/hooks/api/keys/queries.tsx
+++ b/frontend/src/hooks/api/keys/queries.tsx
@@ -5,7 +5,7 @@ import { apiRequest } from '@app/config/request';
 import { UploadWsKeyDTO, UserWsKeyPair } from './types';
 
 const encKeyKeys = {
-  getUserWorkspaceKey: (workspaceID: string) => ['worksapce-key-pair', { workspaceID }] as const
+  getUserWorkspaceKey: (workspaceID: string) => ['workspace-key-pair', { workspaceID }] as const
 };
 
 const fetchUserWsKey = async (workspaceID: string) => {
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index d40276f5b..3dccbe0d8 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -102,6 +102,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
       const orgUserProjects = await getOrganizationUserProjects({
         orgId: tempLocalStorage('orgData.id')
       });
+      console.log(555, tempLocalStorage('orgData.id'), orgUserProjects)
       const userWorkspaces = orgUserProjects;
       if (
         (userWorkspaces.length === 0 &&
@@ -248,7 +249,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
           <aside className="w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
             <nav className="items-between flex h-full flex-col justify-between">
               <div>
-                {currentWorkspace ? (
+                {currentWorkspace && router.asPath !== "/noprojects" ? (
                   <div className="mt-3 mb-4 w-full p-4">
                     <p className="ml-1.5 mb-1 text-xs font-semibold uppercase text-gray-400">
                       Project
@@ -298,9 +299,11 @@ export const AppLayout = ({ children }: LayoutProps) => {
                 ) : (
                   <div className="mt-3 mb-4 w-full p-4">
                     <Button
-                      className="w-full bg-mineshaft-500 py-2 text-bunker-200 hover:bg-primary/90 hover:text-black"
-                      color="mineshaft"
+                      className="border-mineshaft-500"
+                      colorSchema="primary"
+                      variant="outline_bg"
                       size="sm"
+                      isFullWidth
                       onClick={() => {
                         if (isAddingProjectsAllowed) {
                           handlePopUpOpen('addNewWs')
@@ -314,7 +317,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     </Button>
                   </div>
                 )}
-                <div className={`${currentWorkspace ? 'block' : 'hidden'}`}>
+                <div className={`${currentWorkspace && router.asPath !== "/noprojects" ? 'block' : 'hidden'}`}>
                   <Menu>
                     <Link href={`/dashboard/${currentWorkspace?._id}`} passHref>
                       <a>
diff --git a/frontend/src/pages/noprojects.tsx b/frontend/src/pages/noprojects.tsx
index 37b1faf4a..8376b6765 100644
--- a/frontend/src/pages/noprojects.tsx
+++ b/frontend/src/pages/noprojects.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
@@ -27,10 +28,15 @@ export default function NoProjects() {
 
   return (
     <div className="mr-auto flex h-full w-11/12 flex-col items-center justify-center text-center text-lg text-gray-300">
+      <Head>
+        <title>No Projects | Infisical</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
       <div className="mb-6 mt-16 mr-16">
         <Image src="/images/dragon-cant-find.svg" height={270} width={436} alt="google logo" />
       </div>
-      <div className="mb-8 rounded-md bg-bunker-500 px-4 py-6 text-bunker-300 shadow-xl">
+      <div className="mb-8 rounded-md bg-mineshaft-900 border border-mineshaft-700 px-4 py-6 text-bunker-300 shadow-xl">
         <div className="max-w-md">
           You are not part of any projects in this organization yet. When you are, they will appear
           here.
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx
index 38d45b577..efab26fc4 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx
@@ -184,6 +184,7 @@ export const OrgMembersTable = ({
                             defaultValue={role}
                             isDisabled={userId === user?._id}
                             className="w-40 bg-mineshaft-600"
+                            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                             onValueChange={(selectedRole) =>
                               onRoleChange(orgMembershipId, selectedRole)
                             }
@@ -196,7 +197,7 @@ export const OrgMembersTable = ({
                           </Select>
                         )}
                         {((status === 'invited' || status === 'verified') && serverDetails?.emailConfigured) && (
-                          <Button className='w-40' colorSchema="secondary" onClick={() => onInviteMember(email)}>
+                          <Button className='w-40' colorSchema="primary" variant="outline_bg" onClick={() => onInviteMember(email)}>
                             Resend Invite
                           </Button>
                         )}
@@ -218,8 +219,10 @@ export const OrgMembersTable = ({
                           ))
                         ) : (
                           <div className='flex flex-row'>
-                            <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>
-                            {router.query.id !== 'undefined' && <button 
+                            {((status === 'invited' || status === 'verified') && serverDetails?.emailConfigured) 
+                            ? <Tag colorSchema="red">This user hasn&apos;t accepted the invite yet</Tag>
+                            : <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>}
+                            {router.query.id !== 'undefined' && !((status === 'invited' || status === 'verified') && serverDetails?.emailConfigured) && <button 
                               type="button"
                               onClick={() => router.push(`/users/${router.query.id}`)}
                               className='text-sm bg-mineshaft w-max px-1.5 py-0.5 hover:bg-primary duration-200 hover:text-black cursor-pointer rounded-sm'
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx
index d788a6783..0e16a7868 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx
@@ -335,15 +335,11 @@ export const OrgServiceAccountsTable = () => {
                                 );
                             })
                         )}
-                        {!isServiceAccountsLoading && filteredServiceAccounts?.length === 0 && (
-                            <Tr>
-                                <Td colSpan={4} className="text-center">
-                                    <EmptyState title="No service accounts found" icon={faServer} />
-                                </Td>
-                            </Tr>
-                        )}
                     </TBody>
                 </Table>
+                {!isServiceAccountsLoading && filteredServiceAccounts?.length === 0 && (
+                    <EmptyState title="No service accounts found" icon={faServer} />
+                )}
             </TableContainer>
             <Modal
                 isOpen={popUp?.addServiceAccount?.isOpen}