feedback fixes

BloopAI · Jan 24, 2024 · 5d5df07 · 5d5df07
1 parent 1f05882
commit 5d5df07
Show file tree

Hide file tree

Showing 32 changed files with 309 additions and 125 deletions.
diff --git a/client/src/CommandBar/index.tsx b/client/src/CommandBar/index.tsx
@@ -6,10 +6,7 @@ import { CommandBarContext } from '../context/commandBarContext';
 import { useGlobalShortcuts } from '../hooks/useGlobalShortcuts';
 import { checkEventKeys } from '../utils/keyboardUtils';
 import { EnvContext } from '../context/envContext';
-import {
-  CMD_BAR_TUTORIAL_FINISHED_KEY,
-  getPlainFromStorage,
-} from '../services/storage';
+import { UIContext } from '../context/uiContext';
 import Initial from './steps/Initial';
 import PrivateRepos from './steps/PrivateRepos';
 import PublicRepos from './steps/PublicRepos';
@@ -31,7 +28,8 @@ const CommandBar = ({}: Props) => {
   const { setChosenStep, setIsVisible } = useContext(
     CommandBarContext.Handlers,
   );
-  const { setEnvConfig, envConfig } = useContext(EnvContext);
+  const { envConfig } = useContext(EnvContext);
+  const { onBoardingState } = useContext(UIContext.Onboarding);
   const globalShortcuts = useGlobalShortcuts();
 
   const handleClose = useCallback(() => {
@@ -44,9 +42,9 @@ const CommandBar = ({}: Props) => {
   const shouldShowTutorial = useMemo(() => {
     return (
       !envConfig?.bloop_user_profile?.is_tutorial_finished &&
-      !getPlainFromStorage(CMD_BAR_TUTORIAL_FINISHED_KEY)
+      !onBoardingState.isCommandBarTutorialFinished
     );
-  }, [envConfig?.bloop_user_profile, isVisible]);
+  }, [envConfig?.bloop_user_profile, onBoardingState]);
 
   const handleKeyEvent = useCallback(
     (e: KeyboardEvent) => {
@@ -89,7 +87,7 @@ const CommandBar = ({}: Props) => {
       ) : chosenStep.id === CommandBarStepEnum.CREATE_PROJECT ? (
         <CreateProject />
       ) : chosenStep.id === CommandBarStepEnum.MANAGE_REPOS ? (
-        <ManageRepos />
+        <ManageRepos shouldShowTutorial={shouldShowTutorial} />
       ) : chosenStep.id === CommandBarStepEnum.ADD_NEW_REPO ? (
         <AddNewRepo shouldShowTutorial={shouldShowTutorial} />
       ) : chosenStep.id === CommandBarStepEnum.TOGGLE_THEME ? (

diff --git a/client/src/CommandBar/steps/AddNewRepo.tsx b/client/src/CommandBar/steps/AddNewRepo.tsx
@@ -135,20 +135,15 @@ const AddNewRepo = ({ shouldShowTutorial }: Props) => {
               stepNumber={2}
               title={t(tutorialSteps[1].title)}
               description={t(tutorialSteps[1].description)}
-              hint={
-                t(tutorialSteps[1].hint[0]) + t(tutorialSteps[1].hint[1]) + '.'
-              }
+              hint={t(tutorialSteps[1].hint[0])}
             />
           }
           wrapperClassName="absolute top-[5rem] left-0 right-0"
         >
           <div className="" />
         </TutorialTooltip>
       ) : null}
-      <Body
-        sections={initialSections}
-        onlyOneClickable={shouldShowTutorial ? 'private' : undefined}
-      />
+      <Body sections={initialSections} />
       <Footer />
     </div>
   );

diff --git a/client/src/CommandBar/steps/Initial.tsx b/client/src/CommandBar/steps/Initial.tsx
@@ -44,6 +44,7 @@ import { TabsContext } from '../../context/tabsContext';
 import TutorialBody from '../Tutorial/TutorialBody';
 import TutorialTooltip from '../Tutorial/TutorialTooltip';
 import { tutorialSteps } from '../../consts/tutorialSteps';
+import { newChatTabShortcut } from '../../consts/shortcuts';
 
 type Props = {
   shouldShowTutorial?: boolean;
@@ -283,12 +284,12 @@ const InitialCommandBar = ({ shouldShowTutorial }: Props) => {
     const newTabItems = project?.repos.length
       ? [
           {
-            label: t('New chat'),
+            label: t('New conversation'),
             Icon: ChatBubblesIcon,
             id: 'new chat',
             key: 'new_chat',
             onClick: () => openNewTab({ type: TabTypesEnum.CHAT }),
-            shortcut: ['option', 'N'],
+            shortcut: newChatTabShortcut,
             closeOnClick: true,
             footerHint: '',
             footerBtns: [
@@ -440,12 +441,7 @@ const InitialCommandBar = ({ shouldShowTutorial }: Props) => {
         </TutorialTooltip>
       ) : null}
       {!!sectionsToShow.length ? (
-        <Body
-          sections={sectionsToShow}
-          onlyOneClickable={
-            shouldShowTutorial ? CommandBarStepEnum.ADD_NEW_REPO : undefined
-          }
-        />
+        <Body sections={sectionsToShow} />
       ) : (
         <div className="flex-1 items-center justify-center text-label-muted text-center py-2">
           <Trans>No commands found...</Trans>

diff --git a/client/src/CommandBar/steps/ManageRepos/index.tsx b/client/src/CommandBar/steps/ManageRepos/index.tsx
@@ -1,4 +1,4 @@
-import {
+import React, {
   ChangeEvent,
   memo,
   useCallback,
@@ -26,9 +26,15 @@ import { mapReposBySections } from '../../../utils/mappers';
 import { ProjectContext } from '../../../context/projectContext';
 import { CommandBarContext } from '../../../context/commandBarContext';
 import RepoItem from '../items/RepoItem';
+import TutorialTooltip from '../../Tutorial/TutorialTooltip';
+import TutorialBody from '../../Tutorial/TutorialBody';
+import { tutorialSteps } from '../../../consts/tutorialSteps';
+import { UIContext } from '../../../context/uiContext';
 import ActionsDropdown from './ActionsDropdown';
 
-type Props = {};
+type Props = {
+  shouldShowTutorial?: boolean;
+};
 
 export enum Filter {
   All = 'All',
@@ -43,10 +49,11 @@ export enum Provider {
   Local = 'Local',
 }
 
-const ManageRepos = ({}: Props) => {
+const ManageRepos = ({ shouldShowTutorial }: Props) => {
   const { t } = useTranslation();
   const { project } = useContext(ProjectContext.Current);
   const { setChosenStep } = useContext(CommandBarContext.Handlers);
+  const { setOnBoardingState } = useContext(UIContext.Onboarding);
   const [sections, setSections] = useState<CommandBarSectionType[]>([]);
   const [sectionsToShow, setSectionsToShow] = useState<CommandBarSectionType[]>(
     [],
@@ -55,6 +62,9 @@ const ManageRepos = ({}: Props) => {
   const [filter, setFilter] = useState<Filter>(Filter.All);
   const [repoType, setRepoType] = useState<Provider>(Provider.All);
   const [inputValue, setInputValue] = useState('');
+  const [tutorialStep, setTutorialStep] = useState(0);
+  const [selectedRepo, setSelectedRepo] = useState('');
+  const [indexedRepo, setIndexedRepo] = useState('');
 
   const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
@@ -88,7 +98,25 @@ const ManageRepos = ({}: Props) => {
       const mapped = mapReposBySections(data.list).map((o) => ({
         items: o.items.map((r) => ({
           Component: RepoItem,
-          componentProps: { repo: r, refetchRepos },
+          componentProps: {
+            repo: r,
+            refetchRepos,
+            onSync: () => {
+              setSelectedRepo(r.shortName);
+              setTutorialStep(3);
+            },
+            onDone: () => {
+              setIndexedRepo(r.shortName);
+              setTutorialStep(4);
+            },
+            onAddToProject: () => {
+              setOnBoardingState((prev) => ({
+                ...prev,
+                isCommandBarTutorialFinished: true,
+              }));
+              setTutorialStep(5);
+            },
+          },
           key: r.ref,
         })),
         itemsOffset: o.offset + 1,
@@ -175,6 +203,17 @@ const ManageRepos = ({}: Props) => {
     refetchRepos();
   }, []);
 
+  useEffect(() => {
+    // if user started with non-private repo
+    if (shouldShowTutorial && tutorialStep === 0 && sections.length > 1) {
+      const firstRepo = (sections[1].items[0] as CommandBarItemCustomType)
+        .componentProps.repo;
+      setTutorialStep(firstRepo.isSyncing ? 3 : 4);
+      setSelectedRepo(firstRepo.shortName);
+      setIndexedRepo(firstRepo.shortName);
+    }
+  }, [sections, tutorialStep, shouldShowTutorial]);
+
   const handleBack = useCallback(() => {
     setChosenStep({ id: CommandBarStepEnum.INITIAL });
   }, []);
@@ -198,6 +237,29 @@ const ManageRepos = ({}: Props) => {
         placeholder={t('')}
         disableKeyNav={isDropdownVisible}
       />
+      {shouldShowTutorial && tutorialStep < 5 ? (
+        <TutorialTooltip
+          content={
+            <TutorialBody
+              stepNumber={tutorialStep + 1}
+              title={t(tutorialSteps[tutorialStep].title)}
+              description={t(tutorialSteps[tutorialStep].description, {
+                repoName: tutorialStep === 3 ? selectedRepo : indexedRepo,
+              })}
+              hint={
+                tutorialStep > 0
+                  ? t(tutorialSteps[tutorialStep].hint[0])
+                  : t(tutorialSteps[tutorialStep].hint[0]) +
+                    t(tutorialSteps[0].hint[1]) +
+                    '.'
+              }
+            />
+          }
+          wrapperClassName="absolute top-[7.5rem] left-0 right-0"
+        >
+          <div className="" />
+        </TutorialTooltip>
+      ) : null}
       {sectionsToShow.length ? (
         <Body sections={sectionsToShow} disableKeyNav={isDropdownVisible} />
       ) : (

diff --git a/client/src/CommandBar/steps/PrivateRepos/index.tsx b/client/src/CommandBar/steps/PrivateRepos/index.tsx
@@ -24,10 +24,7 @@ import RepoItem from '../items/RepoItem';
 import TutorialBody from '../../Tutorial/TutorialBody';
 import TutorialTooltip from '../../Tutorial/TutorialTooltip';
 import { tutorialSteps } from '../../../consts/tutorialSteps';
-import {
-  CMD_BAR_TUTORIAL_FINISHED_KEY,
-  savePlainToStorage,
-} from '../../../services/storage';
+import { UIContext } from '../../../context/uiContext';
 import ActionsDropdown from './ActionsDropdown';
 
 type Props = {
@@ -41,6 +38,7 @@ const PrivateReposStep = ({ shouldShowTutorial }: Props) => {
     [],
   );
   const { setChosenStep } = useContext(CommandBarContext.Handlers);
+  const { setOnBoardingState } = useContext(UIContext.Onboarding);
   const [inputValue, setInputValue] = useState('');
   const [tutorialStep, setTutorialStep] = useState(2);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
@@ -70,7 +68,10 @@ const PrivateReposStep = ({ shouldShowTutorial }: Props) => {
             setTutorialStep(4);
           },
           onAddToProject: () => {
-            savePlainToStorage(CMD_BAR_TUTORIAL_FINISHED_KEY, 'true');
+            setOnBoardingState((prev) => ({
+              ...prev,
+              isCommandBarTutorialFinished: true,
+            }));
             setTutorialStep(5);
           },
         },

diff --git a/client/src/Onboarding/Desktop/UserForm/Step1.tsx b/client/src/Onboarding/Desktop/UserForm/Step1.tsx
@@ -126,7 +126,7 @@ const UserFormStep1 = ({ form, setForm, onContinue }: Props) => {
           </Button>
         </Dropdown>
       </div>
-      <Button onClick={handleSubmit}>
+      <Button onClick={handleSubmit} type="submit">
         <Trans>Continue</Trans>
       </Button>
       <p className="body-mini text-label-base text-center">
@@ -135,13 +135,15 @@ const UserFormStep1 = ({ form, setForm, onContinue }: Props) => {
         <button
           onClick={() => openLink('https://bloop.ai/terms')}
           className="text-label-link"
+          type="button"
         >
           <Trans>Terms & conditions</Trans>
         </button>{' '}
         <Trans>and </Trans>
         <button
           onClick={() => openLink('https://bloop.ai/privacy')}
           className="text-label-link"
+          type="button"
         >
           <Trans>Privacy policy</Trans>
         </button>

diff --git a/client/src/Onboarding/Desktop/UserForm/Step2.tsx b/client/src/Onboarding/Desktop/UserForm/Step2.tsx
@@ -15,6 +15,7 @@ import { copyToClipboard } from '../../../utils';
 import Button from '../../../components/Button';
 import { polling } from '../../../utils/requestUtils';
 import { EnvContext } from '../../../context/envContext';
+import { useEnterKey } from '../../../hooks/useEnterKey';
 
 type Props = {
   onContinue: () => void;
@@ -114,6 +115,8 @@ const UserFormStep2 = ({ onContinue }: Props) => {
     }
   }, [loginUrl, checkGHAuth]);
 
+  useEnterKey(onClick, isBtnClicked && !isGithubConnected && !isTimedOut);
+
   return (
     <div className="w-full flex flex-col gap-4">
       <div

diff --git a/client/src/Project/CurrentTabContent/ChatTab/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/index.tsx
@@ -111,7 +111,7 @@ const ChatTab = ({
             sizeClassName="w-4 h-4"
             className="text-brand-default"
           />
-          {title || t('New chat')}
+          {title || t('New conversation')}
         </div>
         {focusedPanel === side && (
           <Dropdown

diff --git a/client/src/Project/CurrentTabContent/FileTab/index.tsx b/client/src/Project/CurrentTabContent/FileTab/index.tsx
@@ -116,6 +116,7 @@ const FileTab = ({
   const { openNewTab, updateTabProperty } = useContext(TabsContext.Handlers);
   const { focusedPanel } = useContext(TabsContext.All);
   const { isLeftSidebarFocused } = useContext(UIContext.Focus);
+  const { setOnBoardingState } = useContext(UIContext.Onboarding);
   const { project, refreshCurrentProjectStudios } = useContext(
     ProjectContext.Current,
   );
@@ -279,6 +280,9 @@ const FileTab = ({
       },
       side === 'left' ? 'right' : 'left',
     );
+    setOnBoardingState((prev) =>
+      prev.isFileExplained ? prev : { ...prev, isFileExplained: true },
+    );
   }, [path, repoRef, branch, linesNumber, side, openNewTab]);
 
   const handleAddToStudio = useCallback(() => {

diff --git a/client/src/Project/CurrentTabContent/Header/AddTabButton.tsx b/client/src/Project/CurrentTabContent/Header/AddTabButton.tsx
@@ -7,6 +7,12 @@ import { TabTypesEnum } from '../../../types/general';
 import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
 import { TabsContext } from '../../../context/tabsContext';
 import Dropdown from '../../../components/Dropdown';
+import {
+  newChatTabShortcut,
+  newStudioTabShortcut,
+} from '../../../consts/shortcuts';
+import { postCodeStudio } from '../../../services/api';
+import { ProjectContext } from '../../../context/projectContext';
 import AddTabDropdown from './AddTabDropdown';
 
 type Props = {
@@ -15,11 +21,12 @@ type Props = {
   focusedPanel: 'left' | 'right';
 };
 
-const newTabShortcut = ['option', 'N'];
-
 const AddTabButton = ({ side, focusedPanel, tabsLength }: Props) => {
   const { t } = useTranslation();
   const { openNewTab } = useContext(TabsContext.Handlers);
+  const { refreshCurrentProjectStudios, project } = useContext(
+    ProjectContext.Current,
+  );
 
   const dropdownComponentProps = useMemo(() => {
     return { side };
@@ -29,12 +36,24 @@ const AddTabButton = ({ side, focusedPanel, tabsLength }: Props) => {
     openNewTab({ type: TabTypesEnum.CHAT }, side);
   }, [openNewTab, side]);
 
+  const openStudioTab = useCallback(async () => {
+    if (project?.id) {
+      const newId = await postCodeStudio(project?.id);
+      refreshCurrentProjectStudios();
+      openNewTab({ type: TabTypesEnum.STUDIO, studioId: newId }, side);
+    }
+  }, [openNewTab, side, project?.id]);
+
   const handleKeyEvent = useCallback(
     (e: KeyboardEvent) => {
-      if (checkEventKeys(e, newTabShortcut)) {
+      if (checkEventKeys(e, newChatTabShortcut)) {
         e.stopPropagation();
         e.preventDefault();
         openChatTab();
+      } else if (checkEventKeys(e, newStudioTabShortcut)) {
+        e.stopPropagation();
+        e.preventDefault();
+        openStudioTab();
       }
     },
     [openNewTab],