diff --git a/app/client/package.json b/app/client/package.json index db4b620e54..d951573321 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -105,7 +105,7 @@ "cypress-log-to-output": "^1.1.2", "dayjs": "^1.10.6", "deep-diff": "^1.0.2", - "design-system": "npm:@appsmithorg/design-system@2.1.26", + "design-system": "npm:@appsmithorg/design-system@2.1.27", "design-system-old": "npm:@appsmithorg/design-system-old@1.1.14", "downloadjs": "^1.4.7", "echarts": "^5.4.2", diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index c72991e4ea..3eeb97db63 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -36,6 +36,8 @@ export const FEATURE_FLAG = { ab_onboarding_flow_start_with_data_dev_only_enabled: "ab_onboarding_flow_start_with_data_dev_only_enabled", ab_create_new_apps_enabled: "ab_create_new_apps_enabled", + release_show_new_sidebar_announcement_enabled: + "release_show_new_sidebar_announcement_enabled", } as const; export type FeatureFlag = keyof typeof FEATURE_FLAG; @@ -69,6 +71,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { license_widget_rtl_support_enabled: false, ab_onboarding_flow_start_with_data_dev_only_enabled: false, ab_create_new_apps_enabled: false, + release_show_new_sidebar_announcement_enabled: false, }; export const AB_TESTING_EVENT_KEYS = { diff --git a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx index 270df3c343..0a6150acd4 100644 --- a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx +++ b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx @@ -1,13 +1,22 @@ -import React, { useCallback } from "react"; -import { getIsAppSidebarEnabled } from "selectors/ideSelectors"; +import React, { useCallback, useState } from "react"; +import { + getIsAppSidebarAnnouncementEnabled, + getIsAppSidebarEnabled, +} from "selectors/ideSelectors"; import { useSelector } from "react-redux"; import styled from "styled-components"; import SidebarButton from "./SidebarButton"; import { builderURL } from "@appsmith/RouteBuilder"; import { getCurrentPageId } from "selectors/editorSelectors"; -import history from "utils/history"; +import history, { NavigationMethod } from "utils/history"; import { ButtonButtons, TopButtons } from "entities/IDE/constants"; import useCurrentAppState from "../hooks"; +import { + AnnouncementPopover, + AnnouncementPopoverTrigger, + AnnouncementPopoverContent, + Button, +} from "design-system"; const Container = styled.div` width: 50px; @@ -17,11 +26,26 @@ const Container = styled.div` flex-direction: column; justify-content: space-between; background-color: var(--ads-v2-color-bg); + position: relative; +`; + +const DummyTrigger = styled.div` + width: 0; + height: 0; + position: absolute; + right: 0; + top: 10%; `; function Sidebar() { const appState = useCurrentAppState(); + const [isPopoverOpen, setIsPopoverOpen] = useState(true); const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled); + const isAppSidebarAnnouncementEnabled = useSelector( + getIsAppSidebarAnnouncementEnabled, + ); + const isAppSidebarAnnouncementDismissed = + localStorage.getItem("isAppSidebarAnnouncementDismissed") === "true"; const pageId = useSelector(getCurrentPageId); const onClick = useCallback( (suffix) => { @@ -30,6 +54,9 @@ function Sidebar() { pageId, suffix, }), + { + invokedBy: NavigationMethod.AppSidebar, + }, ); }, [pageId], @@ -38,8 +65,39 @@ function Sidebar() { return null; } + const handlePopoverClose = () => { + setIsPopoverOpen(false); + localStorage.setItem( + "isAppSidebarAnnouncementDismissed", + JSON.stringify(true), + ); + }; + return ( + {isAppSidebarAnnouncementEnabled && + !isAppSidebarAnnouncementDismissed && ( + + + + + + Got it + + } + onCloseButtonClick={handlePopoverClose} + side="right" + title="App-level items have a new home!" + /> + + )}
{TopButtons.map((b) => ( !!flags?.release_app_sidebar_enabled, ); + +export const getIsAppSidebarAnnouncementEnabled = createSelector( + selectFeatureFlags, + (flags) => !!flags?.release_show_new_sidebar_announcement_enabled, +); diff --git a/app/client/src/utils/history.ts b/app/client/src/utils/history.ts index 90d9632934..beb952ad04 100644 --- a/app/client/src/utils/history.ts +++ b/app/client/src/utils/history.ts @@ -14,6 +14,7 @@ export enum NavigationMethod { CanvasClick = "CanvasClick", ActionBackButton = "ActionBackButton", ContextSwitching = "ContextSwitching", + AppSidebar = "AppSidebar", } export interface AppsmithLocationState { diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 9bbe77bf4a..b6626f1953 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -4957,6 +4957,30 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-escape-keydown": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: e73cf4bd3763f4d55b1bea7486a9700384d7d94dc00b1d5a75e222b2f1e4f32bc667a206ca4ed3baaaf7424dce7a239afd0ba59a6f0d89c3462c4e6e8d029a04 + languageName: node + linkType: hard + "@radix-ui/react-dropdown-menu@npm:^2.0.4": version: 2.0.4 resolution: "@radix-ui/react-dropdown-menu@npm:2.0.4" @@ -5039,6 +5063,34 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-hover-card@npm:^1.0.7": + version: 1.0.7 + resolution: "@radix-ui/react-hover-card@npm:1.0.7" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-dismissable-layer": 1.0.5 + "@radix-ui/react-popper": 1.1.3 + "@radix-ui/react-portal": 1.0.4 + "@radix-ui/react-presence": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-controllable-state": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 812c348d8331348774b0460cd9058fdb34e0a4e167cc3ab7350d60d0ac374c673e8159573919da299f58860b8eeb9d43c21ccb679cf6db70f5db0386359871ef + languageName: node + linkType: hard + "@radix-ui/react-id@npm:1.0.0": version: 1.0.0 resolution: "@radix-ui/react-id@npm:1.0.0" @@ -5182,6 +5234,35 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-popper@npm:1.1.3": + version: 1.1.3 + resolution: "@radix-ui/react-popper@npm:1.1.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@floating-ui/react-dom": ^2.0.0 + "@radix-ui/react-arrow": 1.0.3 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + "@radix-ui/react-use-rect": 1.0.1 + "@radix-ui/react-use-size": 1.0.1 + "@radix-ui/rect": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: b18a15958623f9222b6ed3e24b9fbcc2ba67b8df5a5272412f261de1592b3f05002af1c8b94c065830c3c74267ce00cf6c1d70d4d507ec92ba639501f98aa348 + languageName: node + linkType: hard + "@radix-ui/react-portal@npm:1.0.2": version: 1.0.2 resolution: "@radix-ui/react-portal@npm:1.0.2" @@ -5215,6 +5296,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-portal@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64 + languageName: node + linkType: hard + "@radix-ui/react-presence@npm:1.0.0": version: 1.0.0 resolution: "@radix-ui/react-presence@npm:1.0.0" @@ -11061,7 +11162,7 @@ __metadata: cypress-xpath: ^1.6.0 dayjs: ^1.10.6 deep-diff: ^1.0.2 - design-system: "npm:@appsmithorg/design-system@2.1.26" + design-system: "npm:@appsmithorg/design-system@2.1.27" design-system-old: "npm:@appsmithorg/design-system-old@1.1.14" diff: ^5.0.0 dotenv: ^8.1.0 @@ -15140,12 +15241,13 @@ __metadata: languageName: node linkType: hard -"design-system@npm:@appsmithorg/design-system@2.1.26": - version: 2.1.26 - resolution: "@appsmithorg/design-system@npm:2.1.26" +"design-system@npm:@appsmithorg/design-system@2.1.27": + version: 2.1.27 + resolution: "@appsmithorg/design-system@npm:2.1.27" dependencies: "@radix-ui/react-dialog": ^1.0.2 "@radix-ui/react-dropdown-menu": ^2.0.4 + "@radix-ui/react-hover-card": ^1.0.7 "@radix-ui/react-popover": ^1.0.6 "@radix-ui/react-tabs": ^1.0.2 "@react-aria/button": ^3.7.0 @@ -15171,7 +15273,7 @@ __metadata: react-dom: ^17.0.2 react-router-dom: ^5.0.0 styled-components: ^5.3.6 - checksum: afc3448a9edfbd1f149982acc2fe878fcce19ecd214ee20ac0810efa0932980c6be85ac5497b63f596b3f7c6872a7fc25159d20aa932343c9afffa00dfa6cdcd + checksum: 52db562d85a04da3d5623127e73f110f65202946060b65af82ac79378feb37eb4edb85219282345b89a4dee7c1cfdec61b5ae23549b982db73a09d916be679e2 languageName: node linkType: hard