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

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

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(
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
-    FEATURE_FLAG.release_app_sidebar_enabled,
-  );
 
   useEffect(() => {
     return () => {

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<HTMLDivElement>(null);
   const pinned = useSelector(getExplorerPinned);
-  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
 
   /**
    * on entity explorer sidebar width change

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;
+};

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 (
     <StyledHeader

app/client/src/pages/Editor/CanvasPropertyPane/index.tsx

@@ -14,8 +14,7 @@ import {
   useLayoutSystemFeatures,
 } from "../../../layoutSystems/common/useLayoutSystemFeatures";
 import { MainContainerWidthToggles } from "../MainContainerWidthToggles";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks";
-import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 
 const Title = styled.p`
   color: var(--ads-v2-color-fg);
@@ -25,9 +24,7 @@ const MainHeading = styled.h3`
 `;
 export function CanvasPropertyPane() {
   const dispatch = useDispatch();
-  const isAppSidebarEnabled = useFeatureFlag(
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
-    FEATURE_FLAG.release_app_sidebar_enabled,
-  );
 
   const openAppSettingsPane = () => {
     AnalyticsUtil.logEvent("APP_SETTINGS_BUTTON_CLICK");

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<JSONtoFormProps & P, S, SS> {
   renderForm = (formContent: any) => {
+    const isAppSidebarEnabled = useIsAppSidebarEnabled();
     return (
       // <MainContainer>
       <FormContainer className="t--json-to-form-wrapper">
-        {this.props.featureFlags?.release_app_sidebar_enabled ===
+        {isAppSidebarEnabled === true ? null : <CloseEditor />}
-        true ? null : (
-          <CloseEditor />
-        )}
         <FormContainerBody className="t--json-to-form-body">
           {formContent}
         </FormContainerBody>

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;
 

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(
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
-    FEATURE_FLAG.release_app_sidebar_enabled,
-  );
   const isProtectedMode = useSelector(protectedModeSelector);
 
   const applicationId = useSelector(getCurrentApplicationId);

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(
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
-    FEATURE_FLAG.release_app_sidebar_enabled,
-  );
 
   const closeWalkthrough = useCallback(() => {
     if (isWalkthroughOpened && popFeature) {

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) {

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 { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks";
-import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 export const MainPane = (props: { id: string }) => {
   const { path } = useRouteMatch();
-  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
   return (
     <div
       className="relative flex flex-col flex-1 overflow-auto z-2"

app/client/src/pages/Editor/IDE/Sidebar/index.tsx

@@ -1,8 +1,5 @@
 import React, { useCallback, useState, useEffect } from "react";
-import {
+import { getIsAppSidebarAnnouncementEnabled } from "selectors/ideSelectors";
-  getIsAppSidebarAnnouncementEnabled,
-  getIsAppSidebarEnabled,
-} from "selectors/ideSelectors";
 import { useSelector, useDispatch } from "react-redux";
 import styled from "styled-components";
 import SidebarButton from "./SidebarButton";
@@ -20,6 +17,7 @@ import {
   Button,
 } from "design-system";
 import { inGuidedTour } from "selectors/onboardingSelectors";
+import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks";
 
 const Container = styled.div`
   width: 50px;
@@ -44,7 +42,7 @@ function Sidebar() {
   const dispatch = useDispatch();
   const appState = useCurrentAppState();
   const [isPopoverOpen, setIsPopoverOpen] = useState(true);
-  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
   const isAppSidebarAnnouncementEnabled = useSelector(
     getIsAppSidebarAnnouncementEnabled,
   );

app/client/src/selectors/ideSelectors.tsx

@@ -3,7 +3,8 @@ import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors";
 
 export const getIsAppSidebarEnabled = createSelector(
   selectFeatureFlags,
-  (flags) => !!flags?.release_app_sidebar_enabled,
+  (flags) =>
+    !!flags?.release_app_sidebar_enabled || flags?.rollout_app_sidebar_enabled,
 );
 
 export const getIsAppSidebarAnnouncementEnabled = createSelector(

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;