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;