From b26a954d949239467948613df6c64e8a2df4e5c3 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 15 Nov 2023 16:49:41 +0530 Subject: [PATCH] chore: Add an extra feature flag to control App sidebar rollout (#28876) Adds a new feature flag to control the rollout of the App sidebar. It needs to be different as the earlier feature flag was shipped to users already and they may not be on the latest version. fixes: #28877 --- app/client/src/ce/entities/FeatureFlag.ts | 2 ++ app/client/src/ce/pages/Editor/routes.tsx | 7 ++----- .../editorComponents/EntityExplorerSidebar.tsx | 4 ++-- app/client/src/navigation/featureFlagHooks.ts | 14 ++++++++++++++ .../pages/Editor/AppSettingsPane/PaneHeader.tsx | 6 +++--- .../src/pages/Editor/CanvasPropertyPane/index.tsx | 7 ++----- .../pages/Editor/DataSourceEditor/JSONtoForm.tsx | 7 +++---- app/client/src/pages/Editor/EditorHeader.tsx | 4 ++-- .../pages/Editor/EditorName/NavigationMenuData.ts | 7 ++----- .../src/pages/Editor/Explorer/EntityExplorer.tsx | 7 ++----- app/client/src/pages/Editor/IDE/LeftPane/index.tsx | 4 ++-- app/client/src/pages/Editor/IDE/MainPane/index.tsx | 5 ++--- app/client/src/pages/Editor/IDE/Sidebar/index.tsx | 8 +++----- app/client/src/selectors/ideSelectors.tsx | 3 ++- app/client/src/utils/hooks/useDynamicAppLayout.tsx | 4 ++-- 15 files changed, 45 insertions(+), 44 deletions(-) create mode 100644 app/client/src/navigation/featureFlagHooks.ts diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index 6d309c74c3..bd24cc562a 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -37,6 +37,7 @@ export const FEATURE_FLAG = { ab_create_new_apps_enabled: "ab_create_new_apps_enabled", release_show_new_sidebar_announcement_enabled: "release_show_new_sidebar_announcement_enabled", + rollout_app_sidebar_enabled: "rollout_app_sidebar_enabled", } as const; export type FeatureFlag = keyof typeof FEATURE_FLAG; @@ -71,6 +72,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { ab_onboarding_flow_start_with_data_dev_only_enabled: false, ab_create_new_apps_enabled: false, release_show_new_sidebar_announcement_enabled: false, + rollout_app_sidebar_enabled: false, }; export const AB_TESTING_EVENT_KEYS = { diff --git a/app/client/src/ce/pages/Editor/routes.tsx b/app/client/src/ce/pages/Editor/routes.tsx index 08522389d4..d2176c98f8 100644 --- a/app/client/src/ce/pages/Editor/routes.tsx +++ b/app/client/src/ce/pages/Editor/routes.tsx @@ -26,18 +26,15 @@ import { SaaSEditorRoutes } from "pages/Editor/SaaSEditor/routes"; import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist"; import { DatasourceEditorRoutes } from "pages/routes"; import CurlImportEditor from "pages/Editor/APIEditor/CurlImportEditor"; -import { useFeatureFlag } from "../../../utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "../../entities/FeatureFlag"; import CreateNewDatasourceTab from "../../../pages/Editor/IntegrationEditor/CreateNewDatasourceTab"; +import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; const SentryRoute = Sentry.withSentryRouting(Route); function EditorRoutes() { const { path } = useRouteMatch(); const { pathname } = useLocation(); - const isAppSidebarEnabled = useFeatureFlag( - FEATURE_FLAG.release_app_sidebar_enabled, - ); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); useEffect(() => { return () => { diff --git a/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx b/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx index d8467a692f..d6efeae4bb 100644 --- a/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx +++ b/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx @@ -32,7 +32,7 @@ import { getEditingEntityName } from "@appsmith/selectors/entitiesSelector"; import styled from "styled-components"; import moment from "moment"; import AnalyticsUtil from "../../utils/AnalyticsUtil"; -import { getIsAppSidebarEnabled } from "../../selectors/ideSelectors"; +import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks"; const StyledResizer = styled.div<{ resizing: boolean }>` ${(props) => @@ -60,7 +60,7 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => { const active = useSelector(getExplorerActive); const sidebarRef = useRef(null); const pinned = useSelector(getExplorerPinned); - const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); /** * on entity explorer sidebar width change diff --git a/app/client/src/navigation/featureFlagHooks.ts b/app/client/src/navigation/featureFlagHooks.ts new file mode 100644 index 0000000000..80ec543981 --- /dev/null +++ b/app/client/src/navigation/featureFlagHooks.ts @@ -0,0 +1,14 @@ +import { useFeatureFlag } from "../utils/hooks/useFeatureFlag"; +import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; + +export const useIsAppSidebarEnabled = () => { + const isAppSidebarEnabled = useFeatureFlag( + FEATURE_FLAG.release_app_sidebar_enabled, + ); + + const isAppSidebarRolloutEnabled = useFeatureFlag( + FEATURE_FLAG.rollout_app_sidebar_enabled, + ); + + return isAppSidebarEnabled || isAppSidebarRolloutEnabled; +}; diff --git a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx index 78413b0031..a2ecf97a77 100644 --- a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx +++ b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx @@ -6,10 +6,10 @@ import { APP_SETTINGS_PANE_HEADER, } from "@appsmith/constants/messages"; import { Tooltip } from "design-system"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; import { Button } from "design-system"; -import { getIsAppSidebarEnabled } from "selectors/ideSelectors"; import classNames from "classnames"; +import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; const StyledHeader = styled.div` height: 48px; @@ -25,7 +25,7 @@ const StyledText = styled.div` function PaneHeader() { const dispatch = useDispatch(); - const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); return ( { AnalyticsUtil.logEvent("APP_SETTINGS_BUTTON_CLICK"); diff --git a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx index bfbab671fc..9ef80af75c 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx @@ -9,6 +9,7 @@ import { isHidden, isKVArray } from "components/formControls/utils"; import log from "loglevel"; import CloseEditor from "components/editorComponents/CloseEditor"; import type { FeatureFlags } from "@appsmith/entities/FeatureFlag"; +import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; export const FormContainer = styled.div` display: flex; @@ -48,13 +49,11 @@ export class JSONtoForm< SS = any, > extends React.Component { renderForm = (formContent: any) => { + const isAppSidebarEnabled = useIsAppSidebarEnabled(); return ( // - {this.props.featureFlags?.release_app_sidebar_enabled === - true ? null : ( - - )} + {isAppSidebarEnabled === true ? null : } {formContent} diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx index ef08760c9e..108ee0eb76 100644 --- a/app/client/src/pages/Editor/EditorHeader.tsx +++ b/app/client/src/pages/Editor/EditorHeader.tsx @@ -83,7 +83,7 @@ import { HelperBarInHeader } from "./HelpBarInHeader"; import { AppsmithLink } from "./AppsmithLink"; import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelectors"; import { GetNavigationMenuData } from "./EditorName/NavigationMenuData"; -import { getIsAppSidebarEnabled } from "selectors/ideSelectors"; +import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks"; const { cloudHosting } = getAppsmithConfigs(); @@ -123,7 +123,7 @@ export function EditorHeader() { setShowPublishCommunityTemplateModal, ] = useState(false); - const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); const showEntityExplorerLock = !isAppSidebarEnabled && !signpostingEnabled; diff --git a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts index dccc2c7468..24dcdc0f3a 100644 --- a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts +++ b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts @@ -23,9 +23,8 @@ import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions"; import { toast } from "design-system"; import type { ThemeProp } from "WidgetProvider/constants"; import { DISCORD_URL, DOCS_BASE_URL } from "constants/ThirdPartyConstants"; -import { useFeatureFlag } from "../../../utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import { protectedModeSelector } from "selectors/gitSyncSelectors"; +import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; export interface NavigationMenuDataProps extends ThemeProp { editMode: typeof noop; @@ -38,9 +37,7 @@ export const GetNavigationMenuData = ({ }: NavigationMenuDataProps): MenuItemData[] => { const dispatch = useDispatch(); const history = useHistory(); - const isAppSidebarEnabled = useFeatureFlag( - FEATURE_FLAG.release_app_sidebar_enabled, - ); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); const isProtectedMode = useSelector(protectedModeSelector); const applicationId = useSelector(getCurrentApplicationId); diff --git a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx index ec70e01f69..9b1759d758 100644 --- a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx +++ b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx @@ -31,10 +31,9 @@ import { saveExplorerStatus, } from "@appsmith/pages/Editor/Explorer/helpers"; import { integrationEditorURL } from "@appsmith/RouteBuilder"; -import { useFeatureFlag } from "../../../utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import WalkthroughContext from "components/featureWalkthrough/walkthroughContext"; import DatasourceStarterLayoutPrompt from "./Datasources/DatasourceStarterLayoutPrompt"; +import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; const NoEntityFoundSvg = importSvg( async () => import("assets/svg/no_entities_found.svg"), @@ -97,9 +96,7 @@ function EntityExplorer({ isActive }: { isActive: boolean }) { useContext(WalkthroughContext) || {}; const applicationId = useSelector(getCurrentApplicationId); const isDatasourcesOpen = getExplorerStatus(applicationId, "datasource"); - const isAppSidebarEnabled = useFeatureFlag( - FEATURE_FLAG.release_app_sidebar_enabled, - ); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); const closeWalkthrough = useCallback(() => { if (isWalkthroughOpened && popFeature) { diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx index 3949b139f0..ebdf934de1 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import WidgetsEditorEntityExplorer from "../../WidgetsEditorEntityExplorer"; import { useSelector } from "react-redux"; -import { getIsAppSidebarEnabled } from "selectors/ideSelectors"; import styled from "styled-components"; import { Switch, useRouteMatch } from "react-router"; import { SentryRoute } from "@appsmith/AppRouter"; @@ -17,6 +16,7 @@ import AppSettingsPane from "./AppSettings"; import DataSidePane from "./DataSidePane"; import LibrarySidePane from "./LibrarySidePane"; import { inGuidedTour } from "selectors/onboardingSelectors"; +import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks"; const LeftPaneContainer = styled.div` height: 100%; @@ -26,7 +26,7 @@ const LeftPaneContainer = styled.div` `; const LeftPane = () => { - const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); const { path } = useRouteMatch(); const guidedTourEnabled = useSelector(inGuidedTour); if (!isAppSidebarEnabled || guidedTourEnabled) { diff --git a/app/client/src/pages/Editor/IDE/MainPane/index.tsx b/app/client/src/pages/Editor/IDE/MainPane/index.tsx index 46a2b4ea0c..29929e2ea6 100644 --- a/app/client/src/pages/Editor/IDE/MainPane/index.tsx +++ b/app/client/src/pages/Editor/IDE/MainPane/index.tsx @@ -3,13 +3,12 @@ import { BUILDER_PATH } from "constants/routes"; import { Route, Switch, useRouteMatch } from "react-router"; import * as Sentry from "@sentry/react"; import routes from "./routes"; -import { useSelector } from "react-redux"; -import { getIsAppSidebarEnabled } from "selectors/ideSelectors"; +import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks"; const SentryRoute = Sentry.withSentryRouting(Route); export const MainPane = (props: { id: string }) => { const { path } = useRouteMatch(); - const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); return (
!!flags?.release_app_sidebar_enabled, + (flags) => + !!flags?.release_app_sidebar_enabled || flags?.rollout_app_sidebar_enabled, ); export const getIsAppSidebarAnnouncementEnabled = createSelector( diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx index 4730dba7f3..d0e05f4a34 100644 --- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx +++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx @@ -45,7 +45,7 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import { useLocation } from "react-router"; import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants"; import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; -import { getIsAppSidebarEnabled } from "../../selectors/ideSelectors"; +import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks"; const GUTTER_WIDTH = 72; export const AUTOLAYOUT_RESIZER_WIDTH_BUFFER = 40; @@ -79,7 +79,7 @@ export const useDynamicAppLayout = () => { const queryParams = new URLSearchParams(search); const isEmbed = queryParams.get("embed"); const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar"); - const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled); + const isAppSidebarEnabled = useIsAppSidebarEnabled(); const isPreviewing = isPreviewMode;