Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Added Communication popover for new Sidebar (#28688)

Browse Source 
## Description

Added announcement popover for new sidebar. This will be triggered only
if the below conditions satisfy,
- if sidebar ff active
- AND if new ff to show comm about sidebar - off for new users, on for
old users
- AND state from the local storage

#### PR fixes following issue(s)
Fixes https://github.com/appsmithorg/appsmith/issues/28490

#### Media


https://github.com/appsmithorg/appsmith/assets/87797149/700689f7-7ebd-478e-8526-1cab2de388b6



#### Type of change

- New feature (non-breaking change which adds functionality)


## Testing

#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
This commit is contained in:
albinAppsmith 2023-11-09 15:13:11 +05:30 committed by GitHub
parent e64f7f3e14
commit d85fc5fbc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 178 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/package.json
View File

@ -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",

3
app/client/src/ce/entities/FeatureFlag.ts
View File

@ -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 = {

64
app/client/src/pages/Editor/IDE/Sidebar/index.tsx
View File

@ -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 (
<Container>
{isAppSidebarAnnouncementEnabled &&
!isAppSidebarAnnouncementDismissed && (
<AnnouncementPopover open={isPopoverOpen}>
<AnnouncementPopoverTrigger>
<DummyTrigger className="sidebar-popover-trigger" />
</AnnouncementPopoverTrigger>
<AnnouncementPopoverContent
align="center"
arrowFillColor="#F6F2FA"
banner="https://assets.appsmith.com/new-sidebar-banner.svg"
collisionPadding={{ top: 20 }}
description="Navigate faster through datasources, pages, and app settings."
footer={
<Button kind="primary" onClick={handlePopoverClose} size="md">
Got it
</Button>
}
onCloseButtonClick={handlePopoverClose}
side="right"
title="App-level items have a new home!"
/>
</AnnouncementPopover>
)}
<div>
{TopButtons.map((b) => (
<SidebarButton

5
app/client/src/selectors/ideSelectors.tsx
View File

@ -5,3 +5,8 @@ export const getIsAppSidebarEnabled = createSelector(
selectFeatureFlags,
(flags) => !!flags?.release_app_sidebar_enabled,
);
export const getIsAppSidebarAnnouncementEnabled = createSelector(
selectFeatureFlags,
(flags) => !!flags?.release_show_new_sidebar_announcement_enabled,
);

1
app/client/src/utils/history.ts
View File

@ -14,6 +14,7 @@ export enum NavigationMethod {
CanvasClick = "CanvasClick",
ActionBackButton = "ActionBackButton",
ContextSwitching = "ContextSwitching",
AppSidebar = "AppSidebar",
}
export interface AppsmithLocationState {

112
app/client/yarn.lock
View File

@ -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