Comment button discovery tooltip

appsmithorg · Jun 20, 2021 · d1a5249 · d1a5249
1 parent 62690b6
commit d1a5249
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 67 deletions.
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -223,27 +223,26 @@ export function EditorHeader(props: EditorHeaderProps) {
             />
           </Link>
           <Boxed step={OnboardingStep.FINISH}>
-            {currentApplication && (
-              <EditableAppName
-                className="t--application-name editable-application-name"
-                defaultValue={currentApplication.name || ""}
-                editInteractionKind={EditInteractionKind.SINGLE}
-                fill
-                isNewApp={
-                  applicationList.filter((el) => el.id === applicationId)
-                    .length > 0
-                }
-                onBlur={(value: string) =>
-                  updateApplicationDispatch(applicationId || "", {
-                    name: value,
-                    currentApp: true,
-                  })
-                }
-                savingState={
-                  isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
-                }
-              />
-            )}
+            <EditableAppName
+              className="t--application-name editable-application-name"
+              defaultValue={currentApplication?.name || ""}
+              editInteractionKind={EditInteractionKind.SINGLE}
+              fill
+              isNewApp={
+                applicationList.filter((el) => el.id === applicationId).length >
+                0
+              }
+              onBlur={(value: string) =>
+                updateApplicationDispatch(applicationId || "", {
+                  name: value,
+                  currentApp: true,
+                })
+              }
+              savingState={
+                isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
+              }
+            />
+            )
             <ToggleModeButton />
           </Boxed>
         </HeaderSection>

diff --git a/app/client/src/pages/Editor/ToggleModeButton.tsx b/app/client/src/pages/Editor/ToggleModeButton.tsx
@@ -32,6 +32,11 @@ import { APP_MODE } from "reducers/entityReducers/appReducer";
 
 import { matchBuilderPath, matchViewerPath } from "constants/routes";
 
+import {
+  getShowCommentsButtonToolTip,
+  setShowCommentsButtonToolTip,
+} from "utils/storage";
+
 const ModeButton = styled.div<{ active: boolean }>`
   position: relative;
   display: flex;
@@ -156,11 +161,51 @@ function ViewModeReset() {
   );
 }
 
+const tourToolTipProps = {
+  hasOverlay: true,
+  modifiers: {
+    offset: { enabled: true, offset: "3, 20" },
+    arrow: {
+      enabled: true,
+      fn: (data: any) => ({
+        ...data,
+        offsets: {
+          ...data.offsets,
+          arrow: {
+            top: -8,
+            left: 80,
+          },
+        },
+      }),
+    },
+  },
+  pulseStyles: {
+    top: 20,
+    left: 28,
+    height: 30,
+    width: 30,
+  },
+  showPulse: true,
+  tourIndex: 0,
+  tourType: TourType.COMMENTS_TOUR,
+};
+
 function ToggleCommentModeButton() {
   const commentsEnabled = useSelector(areCommentsEnabledForUserAndAppSelector);
   const isCommentMode = useSelector(commentModeSelector);
   const showUnreadIndicator = useSelector(showUnreadIndicatorSelector);
   const currentUser = useSelector(getCurrentUser);
+  const [
+    showCommentButtonDiscoveryTooltip,
+    setShowCommentButtonDiscoveryTooltipInState,
+  ] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      const shouldShow = await getShowCommentsButtonToolTip();
+      setShowCommentButtonDiscoveryTooltipInState(!!shouldShow);
+    })();
+  }, []);
 
   useUpdateCommentMode(currentUser);
   const proceedToNextTourStep = useProceedToNextTourStep(
@@ -184,63 +229,46 @@ function ToggleCommentModeButton() {
 
   const CommentModeIcon = showUnreadIndicator ? CommentModeUnread : CommentMode;
 
+  const handleSetCommentModeButton = () => {
+    setCommentModeInUrl(true);
+    proceedToNextTourStep();
+    setShowCommentButtonDiscoveryTooltipInState(false);
+    setShowCommentsButtonToolTip(false);
+  };
+
   return (
     <Container>
-      <TourTooltipWrapper
-        hasOverlay
-        modifiers={{
-          offset: { enabled: true, offset: "3, 20" },
-          arrow: {
-            enabled: true,
-            fn: (data) => ({
-              ...data,
-              offsets: {
-                ...data.offsets,
-                arrow: {
-                  top: -8,
-                  left: 80,
-                },
-              },
-            }),
-          },
-        }}
-        pulseStyles={{
-          top: 20,
-          left: 28,
-          height: 30,
-          width: 30,
-        }}
-        showPulse
-        tourIndex={0}
-        tourType={TourType.COMMENTS_TOUR}
-      >
+      <TourTooltipWrapper {...tourToolTipProps}>
         <div style={{ display: "flex" }}>
           <ModeButton
             active={!isCommentMode}
             onClick={() => setCommentModeInUrl(false)}
           >
             {mode === APP_MODE.EDIT ? <EditModeReset /> : <ViewModeReset />}
           </ModeButton>
-          <ModeButton
-            active={isCommentMode}
-            onClick={() => {
-              setCommentModeInUrl(true);
-              proceedToNextTourStep();
-            }}
+          {/** TODO: move to messages */}
+          <TooltipComponent
+            content={<>You have 1 unread conversation</>}
+            isOpen={showCommentButtonDiscoveryTooltip}
           >
-            <TooltipComponent
-              content={
-                <>
-                  Comment Mode
-                  <span style={{ color: "#fff", marginLeft: 20 }}>C</span>
-                </>
-              }
-              hoverOpenDelay={1000}
-              position={Position.BOTTOM}
+            <ModeButton
+              active={isCommentMode}
+              onClick={handleSetCommentModeButton}
             >
-              <CommentModeIcon />
-            </TooltipComponent>
-          </ModeButton>
+              <TooltipComponent
+                content={
+                  <>
+                    Comment Mode
+                    <span style={{ color: "#fff", marginLeft: 20 }}>C</span>
+                  </>
+                }
+                hoverOpenDelay={1000}
+                position={Position.BOTTOM}
+              >
+                <CommentModeIcon />
+              </TooltipComponent>
+            </ModeButton>
+          </TooltipComponent>
         </div>
       </TourTooltipWrapper>
     </Container>

diff --git a/app/client/src/utils/storage.ts b/app/client/src/utils/storage.ts
@@ -11,6 +11,7 @@ const STORAGE_KEYS: { [id: string]: string } = {
   ONBOARDING_WELCOME_STATE: "OnboardingWelcomeState",
   RECENT_ENTITIES: "RecentEntities",
   COMMENTS_INTRO_SEEN: "CommentsIntroSeen",
+  SHOW_COMMENTS_BUTTON_TOOLTIP: "ShowCommentsButtonToolTip",
 };
 
 const store = localforage.createInstance({
@@ -204,3 +205,30 @@ export const getCommentsIntroSeen = async () => {
     console.log("An error occurred while fetching COMMENTS_INTRO_SEEN", error);
   }
 };
+
+export const setShowCommentsButtonToolTip = async (flag: boolean) => {
+  try {
+    await store.setItem(STORAGE_KEYS.SHOW_COMMENTS_BUTTON_TOOLTIP, flag);
+    return true;
+  } catch (error) {
+    console.log(
+      "An error occurred when setting SHOW_COMMENTS_BUTTON_TOOLTIP",
+      error,
+    );
+    return false;
+  }
+};
+
+export const getShowCommentsButtonToolTip = async () => {
+  try {
+    const shouldShow = (await store.getItem(
+      STORAGE_KEYS.SHOW_COMMENTS_BUTTON_TOOLTIP,
+    )) as boolean;
+    return shouldShow === false ? false : true;
+  } catch (error) {
+    console.log(
+      "An error occurred while fetching SHOW_COMMENTS_BUTTON_TOOLTIP",
+      error,
+    );
+  }
+};