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

chore: Make App Sidebar Generally Available (#30923)

Browse Source 
## Description

Makes App Sidebar Generally Available

- Removes any feature flag control for App Sidebar
- Removes any older functionalities to handle non App Sidebar IDE
versions like:
    - App Settings having an open or close state
    - Entity Explorer ability to be hidden
- Removes the announcement for App Sidebar


#### PR fixes following issue(s)
Fixes #29232

#### Type of change

- Chore (housekeeping or task changes that don't impact user perception)



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Refactor**
- Streamlined component logic by consolidating functions and removing
unnecessary dependencies.
- Simplified rendering and logic flow in various editor components for
improved user experience.
- **Style**
- Enhanced styling and layout in the app settings pane and editor
sidebar components.
- **Chores**
- Improved code maintainability by cleaning up unused imports,
variables, and functions.
- **Bug Fixes**
- Addressed UI inconsistencies by removing deprecated feature flags and
adjusting component behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Hetu Nandu 2024-02-07 11:25:23 +05:30 committed by GitHub
parent 078f450d81
commit e68cf54360
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 74 additions and 624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/client/src/actions/appSettingsPaneActions.ts
View File

@ -1,22 +1,5 @@
import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
import type {
AppSettingsPaneContext,
AppSettingsPaneReduxState,
} from "reducers/uiReducers/appSettingsPaneReducer";
import type { Action } from "redux";
export const openAppSettingsPaneAction = (context?: AppSettingsPaneContext) => {
return {
type: ReduxActionTypes.OPEN_APP_SETTINGS_PANE,
payload: context,
};
};
export const closeAppSettingsPaneAction = (): Action => {
return {
type: ReduxActionTypes.CLOSE_APP_SETTINGS_PANE,
};
};
import type { AppSettingsPaneReduxState } from "reducers/uiReducers/appSettingsPaneReducer";
export const updateAppSettingsPaneSelectedTabAction = (
payload: AppSettingsPaneReduxState,

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

@ -22,7 +22,6 @@ export const FEATURE_FLAG = {
release_anvil_enabled: "release_anvil_enabled",
ab_show_templates_instead_of_blank_canvas_enabled:
"ab_show_templates_instead_of_blank_canvas_enabled",
release_app_sidebar_enabled: "release_app_sidebar_enabled",
release_server_dsl_migrations_enabled:
"release_server_dsl_migrations_enabled",
license_git_branch_protection_enabled:
@ -36,9 +35,6 @@ export const FEATURE_FLAG = {
license_widget_rtl_support_enabled: "license_widget_rtl_support_enabled",
release_custom_widgets_enabled: "release_custom_widgets_enabled",
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",
release_show_partial_import_export_enabled:
"release_show_partial_import_export_enabled",
release_show_new_sidebar_pages_pane_enabled:
@ -77,7 +73,6 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
license_gac_enabled: false,
release_anvil_enabled: false,
ab_show_templates_instead_of_blank_canvas_enabled: false,
release_app_sidebar_enabled: false,
release_server_dsl_migrations_enabled: false,
license_git_branch_protection_enabled: false,
release_git_autocommit_feature_enabled: false,
@ -86,8 +81,6 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
license_widget_rtl_support_enabled: false,
release_custom_widgets_enabled: false,
ab_create_new_apps_enabled: false,
release_show_new_sidebar_announcement_enabled: false,
rollout_app_sidebar_enabled: false,
release_show_partial_import_export_enabled: false,
release_show_new_sidebar_pages_pane_enabled: false,
ab_one_click_learning_popover_enabled: false,

11
app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
View File

@ -24,7 +24,6 @@ import {
WIDGETS_EDITOR_ID_PATH,
} from "constants/routes";
import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
import IntegrationEditor from "pages/Editor/IntegrationEditor";
import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist";
import ApiEditor from "pages/Editor/APIEditor";
import QueryEditor from "pages/Editor/QueryEditor";
@ -42,7 +41,6 @@ import DataSourceEditor from "pages/Editor/DataSourceEditor";
import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState";
import GeneratePage from "pages/Editor/GeneratePage";
import type { RouteProps } from "react-router";
import { useIsAppSidebarEnabled } from "navigation/featureFlagHooks";
import { JSBlankState } from "pages/Editor/JSEditor/JSBlankState";
import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
import { useSelector } from "react-redux";
@ -59,7 +57,6 @@ export interface RouteReturnType extends RouteProps {
*/
function useRoutes(path: string): RouteReturnType[] {
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
const editorMode = useSelector(getIDEViewMode);
@ -104,9 +101,7 @@ function useRoutes(path: string): RouteReturnType[] {
},
{
key: "Datasource Create and Active",
component: isAppSidebarEnabled
? CreateNewDatasourceTab
: IntegrationEditor,
component: CreateNewDatasourceTab,
exact: true,
path: `${path}${INTEGRATION_EDITOR_PATH}`,
},
@ -159,9 +154,7 @@ function useRoutes(path: string): RouteReturnType[] {
},
{
key: "Datasource Create and Active",
component: isAppSidebarEnabled
? CreateNewDatasourceTab
: IntegrationEditor,
component: CreateNewDatasourceTab,
exact: true,
path: `${path}${INTEGRATION_EDITOR_PATH}`,
},

9
app/client/src/ce/pages/Editor/routes.tsx
View File

@ -2,7 +2,6 @@ import React, { useEffect } from "react";
import { Route, Switch } from "react-router-dom";
import { useLocation, useRouteMatch } from "react-router";
import ApiEditor from "pages/Editor/APIEditor";
import IntegrationEditor from "pages/Editor/IntegrationEditor";
import QueryEditor from "pages/Editor/QueryEditor";
import JSEditor from "pages/Editor/JSEditor";
import GeneratePage from "pages/Editor/GeneratePage";
@ -23,15 +22,13 @@ 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 CreateNewDatasourceTab from "../../../pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks";
import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
const SentryRoute = Sentry.withSentryRouting(Route);
function EditorRoutes() {
const { path } = useRouteMatch();
const { pathname } = useLocation();
const isAppSidebarEnabled = useIsAppSidebarEnabled();
useEffect(() => {
return () => {
@ -45,9 +42,7 @@ function EditorRoutes() {
return (
<Switch key={path}>
<SentryRoute
component={
isAppSidebarEnabled ? CreateNewDatasourceTab : IntegrationEditor
}
component={CreateNewDatasourceTab}
exact
path={`${path}${INTEGRATION_EDITOR_PATH}`}
/>

96
app/client/src/components/editorComponents/EntityExplorerSidebar.tsx
View File

@ -13,13 +13,9 @@ import { useDispatch, useSelector } from "react-redux";
import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
import {
setExplorerActiveAction,
updateExplorerWidthAction,
} from "actions/explorerActions";
import { updateExplorerWidthAction } from "actions/explorerActions";
import {
getExplorerActive,
getExplorerPinned,
getExplorerWidth,
} from "selectors/explorerSelector";
import { tailwindLayers } from "constants/Layers";
@ -27,12 +23,9 @@ import { Tooltip } from "design-system";
import useHorizontalResize from "utils/hooks/useHorizontalResize";
import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
import { SIDEBAR_ID } from "constants/Explorer";
import { EntityClassNames } from "pages/Editor/Explorer/Entity";
import { getEditingEntityName } from "@appsmith/selectors/entitiesSelector";
import styled from "styled-components";
import moment from "moment";
import AnalyticsUtil from "../../utils/AnalyticsUtil";
import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks";
const StyledResizer = styled.div<{ resizing: boolean }>`
${(props) =>
@ -59,8 +52,6 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
const width = useSelector(getExplorerWidth);
const active = useSelector(getExplorerActive);
const sidebarRef = useRef<HTMLDivElement>(null);
const pinned = useSelector(getExplorerPinned);
const isAppSidebarEnabled = useIsAppSidebarEnabled();
/**
* on entity explorer sidebar width change
@ -82,82 +73,11 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
const resizer = useHorizontalResize(sidebarRef, onWidthChange, onDragEnd);
const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
const isEditingEntityName = useSelector(getEditingEntityName);
PerformanceTracker.startTracking(PerformanceTransactionName.SIDE_BAR_MOUNT);
useEffect(() => {
PerformanceTracker.stopTracking();
});
// registering event listeners
useEffect(() => {
document.addEventListener("mousemove", onMouseMove);
return () => {
document.removeEventListener("mousemove", onMouseMove);
};
}, [active, pinned, resizer.resizing, isEditingEntityName]);
/**
* passing the event to touch move on mouse move
*
* @param event
*/
const onMouseMove = (event: MouseEvent) => {
const eventWithTouches = Object.assign({}, event, {
touches: [{ clientX: event.clientX, clientY: event.clientY }],
});
onTouchMove(eventWithTouches);
};
/**
* Is a context menu of any of the explorer entities open
*/
const isContextMenuOpen = () => {
const menus = document.getElementsByClassName(
EntityClassNames.CONTEXT_MENU_CONTENT,
);
const node = menus[0];
if (!document.body.contains(node)) {
return false;
}
return true;
};
/**
* calculate the new width based on the pixel moved
*
* @param event
*/
const onTouchMove = (
event:
| TouchEvent
| (MouseEvent & { touches: { clientX: number; clientY: number }[] }),
) => {
const currentX = event.touches[0].clientX;
// only calculate the following in unpin mode
if (!pinned) {
if (active) {
// if user cursor is out of the entity explorer width ( with some extra window = 20px ), make the
// entity explorer inactive. Also, 20px here is to increase the window in which a user can drag the resizer
if (
currentX >= width + 20 &&
!resizer.resizing &&
!isContextMenuOpen() &&
!isEditingEntityName
) {
dispatch(setExplorerActiveAction(false));
}
} else {
// check if user cursor is at extreme left when the explorer is inactive, if yes, make the explorer active
if (currentX <= 20) {
dispatch(setExplorerActiveAction(true));
}
}
}
};
/**
* on hover of resizer, show tooltip
*/
@ -179,15 +99,15 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
* resizer left position
*/
const resizerLeft = useMemo(() => {
return !pinned && !active ? 0 : width;
}, [pinned, active, width]);
return !active ? 0 : width;
}, [active, width]);
useEffect(() => {
dispatch({
type: ReduxActionTypes.SET_ENTITY_INFO,
payload: { show: false },
});
}, [resizerLeft, pinned]);
}, [resizerLeft]);
const [hoverStartTime, setHoverStartTime] = useState(0);
@ -206,13 +126,9 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
return (
<div
className={classNames({
"js-entity-explorer t--entity-explorer transition-transform transform flex h-full duration-400":
"js-entity-explorer t--entity-explorer transition-transform transform flex h-full duration-400 relative":
true,
"border-r": !isAppSidebarEnabled,
relative: pinned,
"-translate-x-80": !pinned && !active,
"shadow-xl": !pinned,
fixed: !pinned,
"-translate-x-80": !active,
})}
data-testid={active ? "sidebar-active" : "sidebar"}
id={SIDEBAR_ID}

47
app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
View File

@ -15,9 +15,6 @@ import { getIsDraggingForSelection } from "selectors/canvasSelectors";
import MultiSelectPropertyPane from "pages/Editor/MultiSelectPropertyPane";
import { getIsDraggingOrResizing } from "selectors/widgetSelectors";
import { selectedWidgetsPresentInCanvas } from "selectors/propertyPaneSelectors";
import { getIsAppSettingsPaneOpen } from "selectors/appSettingsPaneSelectors";
import AppSettingsPane from "pages/Editor/AppSettingsPane";
import { APP_SETTINGS_PANE_WIDTH } from "constants/AppConstants";
import styled from "styled-components";
import WalkthroughContext from "components/featureWalkthrough/walkthroughContext";
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
@ -54,7 +51,6 @@ export const PropertyPaneSidebar = memo((props: Props) => {
const selectedWidgetIds = useSelector(getSelectedWidgets);
const isDraggingOrResizing = useSelector(getIsDraggingOrResizing);
const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
const { isOpened: isWalkthroughOpened, popFeature } =
useContext(WalkthroughContext) || {};
//while dragging or resizing and
@ -86,7 +82,6 @@ export const PropertyPaneSidebar = memo((props: Props) => {
/**
* renders the property pane:
* 1. if isAppSettingsPaneOpen -> AppSettingsPane
* 2. if no widget is selected -> CanvasPropertyPane
* 3. if more than one widget is selected -> MultiWidgetPropertyPane
* 4. if user is dragging for selection -> CanvasPropertyPane
@ -94,8 +89,6 @@ export const PropertyPaneSidebar = memo((props: Props) => {
*/
const propertyPane = useMemo(() => {
switch (true) {
case isAppSettingsPaneOpen:
return <AppSettingsPane />;
case selectedWidgetsLength > 1:
return <MultiSelectPropertyPane />;
case selectedWidgetsLength === 1:
@ -107,7 +100,6 @@ export const PropertyPaneSidebar = memo((props: Props) => {
return <CanvasPropertyPane />;
}
}, [
isAppSettingsPaneOpen,
selectedWidgetsLength,
isDraggingForSelection,
shouldNotRenderPane,
@ -138,33 +130,26 @@ export const PropertyPaneSidebar = memo((props: Props) => {
ref={sidebarRef}
>
{/* RESIZER */}
{!isAppSettingsPaneOpen && (
<StyledResizer
className={`absolute top-0 left-0 w-2 h-full -ml-1 group cursor-ew-resize ${tailwindLayers.resizer}`}
onMouseDown={onMouseDown}
onTouchEnd={onMouseUp}
onTouchStart={onTouchStart}
resizing={resizing}
>
<div
className={classNames({
"w-1 h-full bg-transparent transform transition flex items-center":
true,
})}
/>
</StyledResizer>
)}
<StyledResizer
className={`absolute top-0 left-0 w-2 h-full -ml-1 group cursor-ew-resize ${tailwindLayers.resizer}`}
onMouseDown={onMouseDown}
onTouchEnd={onMouseUp}
onTouchStart={onTouchStart}
resizing={resizing}
>
<div
className={classNames({
"w-1 h-full bg-transparent transform transition flex items-center":
true,
})}
/>
</StyledResizer>
<div
className={classNames({
"h-full p-0 overflow-y-auto min-w-72": true,
"max-w-104": !isAppSettingsPaneOpen,
"h-full p-0 overflow-y-auto min-w-72 max-w-104": true,
"transition-all duration-100": !resizing,
})}
style={{
width: isAppSettingsPaneOpen
? APP_SETTINGS_PANE_WIDTH
: props.width,
}}
style={{ width: props.width }}
>
{propertyPane}
</div>

14
app/client/src/navigation/featureFlagHooks.ts
View File

@ -1,14 +0,0 @@
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;
};

17
app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx
View File

@ -28,10 +28,7 @@ import {
import { Colors } from "constants/Colors";
import EmbedSettings from "./EmbedSettings";
import NavigationSettings from "./NavigationSettings";
import {
closeAppSettingsPaneAction,
updateAppSettingsPaneSelectedTabAction,
} from "actions/appSettingsPaneActions";
import { updateAppSettingsPaneSelectedTabAction } from "actions/appSettingsPaneActions";
import AnalyticsUtil from "utils/AnalyticsUtil";
import { Divider } from "design-system";
import { ImportAppSettings } from "./ImportAppSettings";
@ -79,7 +76,7 @@ const PageSectionTitle = styled.p`
const ThemeContentWrapper = styled.div`
height: calc(100% - 48px);
overflow-y: overlay;
overflow-y: scroll;
`;
function AppSettings() {
@ -116,9 +113,13 @@ function AppSettings() {
},
}),
);
return () => {
dispatch(closeAppSettingsPaneAction());
dispatch(
updateAppSettingsPaneSelectedTabAction({
isOpen: false,
context: undefined,
}),
);
};
}, [selectedTab]);
@ -196,7 +197,7 @@ function AppSettings() {
{SectionHeadersConfig.map((config) => (
<SectionHeader key={config.name} {...config} />
))}
<Divider />
<Divider orientation={"horizontal"} />
<PageSectionTitle>{PAGE_SETTINGS_SECTION_HEADER()}</PageSectionTitle>
<DraggablePageList
onPageSelect={(pageId: string) =>

34
app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx
View File

@ -1,15 +1,6 @@
import React from "react";
import styled from "styled-components";
import { closeAppSettingsPaneAction } from "actions/appSettingsPaneActions";
import {
APP_SETTINGS_CLOSE_TOOLTIP,
APP_SETTINGS_PANE_HEADER,
} from "@appsmith/constants/messages";
import { Tooltip } from "design-system";
import { useDispatch } from "react-redux";
import { Button } from "design-system";
import classNames from "classnames";
import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks";
import { APP_SETTINGS_PANE_HEADER } from "@appsmith/constants/messages";
const StyledHeader = styled.div`
height: 48px;
@ -24,29 +15,8 @@ const StyledText = styled.div`
`;
function PaneHeader() {
const dispatch = useDispatch();
const isAppSidebarEnabled = useIsAppSidebarEnabled();
return (
<StyledHeader
className={classNames({
"flex justify-start items-center py-2.5": !isAppSidebarEnabled,
"flex items-center py-2.5 pl-4": isAppSidebarEnabled,
})}
>
{!isAppSidebarEnabled && (
<Tooltip content={APP_SETTINGS_CLOSE_TOOLTIP()} placement="bottom">
<Button
className="ml-2 pr-2"
id="t--close-app-settings-pane"
isIconButton
kind="tertiary"
onClick={() => dispatch(closeAppSettingsPaneAction())}
size="md"
startIcon={"double-arrow-right"}
/>
</Tooltip>
)}
<StyledHeader className={"flex items-center py-2.5 pl-4"}>
<StyledText>{APP_SETTINGS_PANE_HEADER()}</StyledText>
</StyledHeader>
);

47
app/client/src/pages/Editor/AppSettingsPane/index.tsx
View File

@ -1,58 +1,11 @@
import { closeAppSettingsPaneAction } from "actions/appSettingsPaneActions";
import React, { useRef } from "react";
import { useDispatch } from "react-redux";
import { useOnClickOutside } from "utils/hooks/useOnClickOutside";
import AppSettings from "./AppSettings";
import PaneHeader from "./PaneHeader";
function AppSettingsPane() {
const dispatch = useDispatch();
const paneRef = useRef(null);
const portalRef = useRef(null);
// Close app settings pane when clicked outside
useOnClickOutside([paneRef, portalRef], (event) => {
if (document.getElementById("save-theme-modal")) return;
if (document.getElementById("delete-theme-modal")) return;
if (document.getElementById("manual-upgrades-modal")) return;
if (document.getElementById("confirm-fork-modal")) return;
// If logo configuration navigation setting dropdown is open
if (
document.getElementsByClassName(
"t--navigation-settings-logo-configuration",
)?.[0] &&
document.getElementsByClassName("bp3-overlay-open")?.[0]
) {
return;
}
// No id property for `Dialog` component, so using class name
if (document.querySelector(".t--import-application-modal")) {
return;
}
// When we select a new theme font
if (
document
.querySelector(".t--theme-font-dropdown")
?.contains(event?.target as Node)
) {
return;
}
// When interacting with the save theme menu
if (
document
.querySelector(".t--save-theme-menu")
?.contains(event?.target as Node)
) {
return;
}
dispatch(closeAppSettingsPaneAction());
});
return (
<div className="h-full" ref={paneRef}>
<div

36
app/client/src/pages/Editor/CanvasPropertyPane/index.tsx
View File

@ -1,20 +1,13 @@
import * as Sentry from "@sentry/react";
import React from "react";
import { useDispatch } from "react-redux";
import { Button, Tooltip } from "design-system";
import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions";
import ConversionButton from "../CanvasLayoutConversion/ConversionButton";
import styled from "styled-components";
import AnalyticsUtil from "utils/AnalyticsUtil";
import {
LayoutSystemFeatures,
useLayoutSystemFeatures,
} from "../../../layoutSystems/common/useLayoutSystemFeatures";
import { MainContainerWidthToggles } from "../MainContainerWidthToggles";
import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks";
const Title = styled.p`
color: var(--ads-v2-color-fg);
@ -23,14 +16,6 @@ const MainHeading = styled.h3`
color: var(--ads-v2-color-fg-emphasis);
`;
export function CanvasPropertyPane() {
const dispatch = useDispatch();
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const openAppSettingsPane = () => {
AnalyticsUtil.logEvent("APP_SETTINGS_BUTTON_CLICK");
dispatch(openAppSettingsPaneAction());
};
const checkLayoutSystemFeatures = useLayoutSystemFeatures();
const [enableLayoutControl, enableLayoutConversion] =
checkLayoutSystemFeatures([
@ -53,27 +38,6 @@ export function CanvasPropertyPane() {
</>
)}
{enableLayoutConversion && <ConversionButton />}
{!isAppSidebarEnabled && (
<Tooltip
content={
<>
<p className="text-center">Update your app theme, URL</p>
<p className="text-center">and other settings</p>
</>
}
placement="bottom"
>
<Button
UNSAFE_width="100%"
className="t--app-settings-cta"
kind="secondary"
onClick={openAppSettingsPane}
size="md"
>
App settings
</Button>
</Tooltip>
)}
</div>
</div>
</div>

12
app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
View File

@ -7,7 +7,6 @@ import type { ControlProps } from "components/formControls/BaseControl";
import type { Datasource } from "entities/Datasource";
import { isHidden, isKVArray } from "components/formControls/utils";
import log from "loglevel";
import CloseEditor from "components/editorComponents/CloseEditor";
import type { FeatureFlags } from "@appsmith/entities/FeatureFlag";
export const FormContainer = styled.div`
@ -49,20 +48,9 @@ export class JSONtoForm<
SS = any,
> extends React.Component<JSONtoFormProps & P, S, SS> {
renderForm = (formContent: any) => {
const { featureFlags } = this.props;
const isSidebarEnabled =
featureFlags?.release_app_sidebar_enabled === true ||
featureFlags?.rollout_app_sidebar_enabled === true;
const isPagePaneSegmentsEnabled =
featureFlags?.release_show_new_sidebar_pages_pane_enabled;
return (
// <MainContainer>
<FormContainer className="t--json-to-form-wrapper">
{isSidebarEnabled ||
isPagePaneSegmentsEnabled ||
!!this.props.isOnboardingFlow ? null : (
<CloseEditor />
)}
<FormContainerBody className="t--json-to-form-body">
{formContent}
</FormContainerBody>

25
app/client/src/pages/Editor/DataSourceEditor/index.tsx
View File

@ -61,7 +61,6 @@ import SaveOrDiscardDatasourceModal from "./SaveOrDiscardDatasourceModal";
import { toast, Callout } from "design-system";
import styled from "styled-components";
import CloseEditor from "components/editorComponents/CloseEditor";
import {
isDatasourceAuthorizedForQueryCreation,
isEnabledForPreviewData,
@ -91,12 +90,8 @@ import { DEFAULT_ENV_ID } from "@appsmith/api/ApiUtils";
import { isStorageEnvironmentCreated } from "@appsmith/utils/Environments";
import type { CalloutKind } from "design-system";
import type { FeatureFlags } from "@appsmith/entities/FeatureFlag";
import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
import {
selectFeatureFlagCheck,
selectFeatureFlags,
} from "@appsmith/selectors/featureFlagsSelectors";
import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors";
import AnalyticsUtil from "utils/AnalyticsUtil";
import { setCurrentEditingEnvironmentID } from "@appsmith/actions/environmentAction";
import { getCurrentEnvironmentDetails } from "@appsmith/selectors/environmentSelectors";
@ -107,7 +102,6 @@ import {
} from "@appsmith/utils/BusinessFeatures/permissionPageHelpers";
import DatasourceTabs from "../DatasourceInfo/DatasorceTabs";
import DatasourceInformation, { ViewModeWrapper } from "./DatasourceSection";
import { getIsAppSidebarEnabled } from "../../../selectors/ideSelectors";
interface ReduxStateProps {
canDeleteDatasource: boolean;
@ -144,8 +138,6 @@ interface ReduxStateProps {
showDebugger: boolean;
featureFlags?: FeatureFlags;
isPluginAllowedToPreviewData: boolean;
isAppSidebarEnabled: boolean;
isPagePaneSegmentsEnabled: boolean;
isOnboardingFlow?: boolean;
}
@ -903,12 +895,10 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
datasourceId,
formData,
history,
isAppSidebarEnabled,
isDeleting,
isInsideReconnectModal,
isNewDatasource,
isOnboardingFlow,
isPagePaneSegmentsEnabled,
isPluginAuthorized,
isSaving,
isTesting,
@ -962,11 +952,6 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
e.preventDefault();
}}
>
{isAppSidebarEnabled ||
isPagePaneSegmentsEnabled ||
!!isOnboardingFlow ? null : (
<CloseEditor />
)}
{!isInsideReconnectModal && (
<DSFormHeader
canDeleteDatasource={canDeleteDatasource}
@ -1141,12 +1126,6 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
const isPluginAllowedToPreviewData =
!!plugin && isEnabledForPreviewData(datasource as Datasource, plugin);
const isAppSidebarEnabled = getIsAppSidebarEnabled(state);
const isPagePaneSegmentsEnabled = selectFeatureFlagCheck(
state,
FEATURE_FLAG.release_show_new_sidebar_pages_pane_enabled,
);
return {
canDeleteDatasource,
canManageDatasource,
@ -1181,8 +1160,6 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
defaultKeyValueArrayConfig,
initialValue,
showDebugger,
isAppSidebarEnabled,
isPagePaneSegmentsEnabled,
};
};

22
app/client/src/pages/Editor/EditorHeader.tsx
View File

@ -3,7 +3,6 @@ import { ThemeProvider } from "styled-components";
import AppInviteUsersForm from "pages/workspace/AppInviteUsersForm";
import AnalyticsUtil from "utils/AnalyticsUtil";
import {
combinedPreviewModeSelector,
getCurrentApplicationId,
getCurrentPageId,
getIsPageSaving,
@ -65,7 +64,6 @@ import {
import { viewerURL } from "@appsmith/RouteBuilder";
import { useHref } from "./utils";
import { getAppsmithConfigs } from "@appsmith/configs";
import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";
import type { NavigationSetting } from "constants/AppConstants";
import CommunityTemplatesPublishInfo from "./CommunityTemplates/Modals/CommunityTemplatesPublishInfo";
import PublishCommunityTemplateModal from "./CommunityTemplates/Modals/PublishCommunityTemplate";
@ -73,14 +71,11 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
import { getEmbedSnippetForm } from "@appsmith/utils/BusinessFeatures/privateEmbedHelpers";
import { HeaderSection, HeaderWrapper } from "./commons/EditorHeaderComponents";
import { LockEntityExplorer } from "./commons/LockEntityExplorer";
import { Omnibar } from "./commons/Omnibar";
import { EditorShareButton } from "./EditorShareButton";
import { HelperBarInHeader } from "./HelpBarInHeader";
import { AppsmithLink } from "./AppsmithLink";
import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelectors";
import { GetNavigationMenuData } from "./EditorName/NavigationMenuData";
import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks";
const { cloudHosting } = getAppsmithConfigs();
@ -93,8 +88,6 @@ export function EditorHeader() {
const isGitConnected = useSelector(getIsGitConnected);
const isErroredSavingName = useSelector(getIsErroredSavingAppName);
const applicationList = useSelector(getApplicationList);
const isPreviewMode = useSelector(combinedPreviewModeSelector);
const signpostingEnabled = useSelector(getIsFirstTimeUserOnboardingEnabled);
const workspaceId = useSelector(getCurrentWorkspaceId);
const currentWorkspace = useSelector(getCurrentAppWorkspace);
const applicationId = useSelector(getCurrentApplicationId);
@ -107,11 +100,6 @@ export function EditorHeader() {
const isProtectedMode = useSelector(protectedModeSelector);
const deployLink = useHref(viewerURL, { pageId });
const isAppSettingsPaneWithNavigationTabOpen = useSelector(
getIsAppSettingsPaneWithNavigationTabOpen,
);
const isPreviewingApp =
isPreviewMode || isAppSettingsPaneWithNavigationTabOpen;
const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
const [showModal, setShowModal] = useState(false);
@ -120,10 +108,6 @@ export function EditorHeader() {
setShowPublishCommunityTemplateModal,
] = useState(false);
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const showEntityExplorerLock = !isAppSidebarEnabled && !signpostingEnabled;
const handlePublish = () => {
if (applicationId) {
dispatch(publishApplication(applicationId));
@ -204,11 +188,7 @@ export function EditorHeader() {
data-testid="t--appsmith-editor-header"
>
<HeaderSection className="space-x-2">
{showEntityExplorerLock ? (
<LockEntityExplorer isPreviewingApp={isPreviewingApp} />
) : (
<div />
)}
<div />
<AppsmithLink />

13
app/client/src/pages/Editor/EditorName/NavigationMenuData.ts
View File

@ -19,12 +19,9 @@ import { Colors } from "constants/Colors";
import { getCurrentApplicationId } from "selectors/editorSelectors";
import { redoAction, undoAction } from "actions/pageActions";
import { redoShortCut, undoShortCut } from "utils/helpers";
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 { protectedModeSelector } from "selectors/gitSyncSelectors";
import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
@ -39,8 +36,6 @@ export const GetNavigationMenuData = ({
}: NavigationMenuDataProps): MenuItemData[] => {
const dispatch = useDispatch();
const history = useHistory();
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const isProtectedMode = useSelector(protectedModeSelector);
const applicationId = useSelector(getCurrentApplicationId);
@ -84,8 +79,6 @@ export const GetNavigationMenuData = ({
});
};
const openAppSettingsPane = () => dispatch(openAppSettingsPaneAction());
const deleteApplication = () => {
if (applicationId && applicationId.length > 0) {
dispatch({
@ -166,12 +159,6 @@ export const GetNavigationMenuData = ({
},
],
},
{
text: "Settings",
onClick: openAppSettingsPane,
type: MenuTypes.MENU,
isVisible: !isAppSidebarEnabled && !isProtectedMode,
},
{
text: "Help",
type: MenuTypes.PARENT,

14
app/client/src/pages/Editor/Explorer/EntityExplorer.test.tsx
View File

@ -146,13 +146,6 @@ describe("Entity Explorer tests", () => {
<WidgetsEditorEntityExplorer />
</MockPageDSL>,
);
const widgetsTree: any = component.queryByText("Widgets", {
selector: "div.t--entity-name",
});
act(() => {
fireEvent.click(widgetsTree);
jest.runAllTimers();
});
const tabsWidget = component.queryByText(children[0].widgetName);
expect(tabsWidget).toBeTruthy();
});
@ -178,6 +171,13 @@ describe("Entity Explorer tests", () => {
<WidgetsEditorEntityExplorer />
</MockPageDSL>,
);
const widgetsTree: any = component.queryByText("Widgets", {
selector: "div.t--entity-name",
});
act(() => {
fireEvent.click(widgetsTree);
jest.runAllTimers();
});
const tabsWidget: any = component.queryByText(children[0].widgetName);
act(() => {
fireEvent.click(tabsWidget);

68
app/client/src/pages/Editor/Explorer/EntityExplorer.tsx
View File

@ -1,7 +1,6 @@
import React, { useRef, useCallback, useEffect, useContext } from "react";
import React, { useRef, useCallback, useEffect } from "react";
import styled from "styled-components";
import { NonIdealState, Classes } from "@blueprintjs/core";
import JSDependencies from "./Libraries";
import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
@ -13,7 +12,6 @@ import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelecto
import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions";
import { forceOpenWidgetPanel } from "actions/widgetSidebarActions";
import Datasources from "./Datasources";
import Files from "./Files";
import ExplorerWidgetGroup from "./Widgets/WidgetGroup";
import { builderURL } from "@appsmith/RouteBuilder";
@ -28,14 +26,6 @@ import { importSvg } from "design-system-old";
import AnalyticsUtil from "utils/AnalyticsUtil";
import { EntityExplorerWrapper } from "./Common/EntityExplorerWrapper";
import { getCurrentApplicationId } from "selectors/editorSelectors";
import { INTEGRATION_TABS } from "constants/routes";
import {
getExplorerStatus,
saveExplorerStatus,
} from "@appsmith/pages/Editor/Explorer/helpers";
import { integrationEditorURL } from "@appsmith/RouteBuilder";
import WalkthroughContext from "components/featureWalkthrough/walkthroughContext";
import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks";
import { FilesContextProvider } from "./Files/FilesContextProvider";
import { getHasCreateActionPermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
@ -100,11 +90,7 @@ function EntityExplorer({ isActive }: { isActive: boolean }) {
dispatch(fetchWorkspace(currentWorkspaceId));
}, [currentWorkspaceId]);
const { isOpened: isWalkthroughOpened, popFeature } =
useContext(WalkthroughContext) || {};
const applicationId = useSelector(getCurrentApplicationId);
const isDatasourcesOpen = getExplorerStatus(applicationId, "datasource");
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const pagePermissions = useSelector(getPagePermissions);
@ -117,45 +103,6 @@ function EntityExplorer({ isActive }: { isActive: boolean }) {
const showWorkflows = useSelector(getShowWorkflowFeature);
const closeWalkthrough = useCallback(() => {
if (isWalkthroughOpened && popFeature) {
popFeature("EXPLORER_DATASOURCE_ADD");
}
}, [isWalkthroughOpened, popFeature]);
const addDatasource = useCallback(
(entryPoint: string) => {
history.push(
integrationEditorURL({
pageId,
selectedTab: INTEGRATION_TABS.NEW,
}),
);
// Event for datasource creation click
AnalyticsUtil.logEvent("NAVIGATE_TO_CREATE_NEW_DATASOURCE_PAGE", {
entryPoint,
});
closeWalkthrough();
},
[pageId, closeWalkthrough],
);
const listDatasource = useCallback(() => {
history.push(
integrationEditorURL({
pageId,
selectedTab: INTEGRATION_TABS.ACTIVE,
}),
);
}, [pageId]);
const onDatasourcesToggle = useCallback(
(isOpen: boolean) => {
saveExplorerStatus(applicationId, "datasource", isOpen);
},
[applicationId],
);
return (
<EntityExplorerWrapper explorerRef={explorerRef} isActive={isActive}>
<ExplorerWidgetGroup
@ -180,19 +127,6 @@ function EntityExplorer({ isActive }: { isActive: boolean }) {
title="No entities found"
/>
)}
{!isAppSidebarEnabled && (
<>
<Datasources
addDatasource={addDatasource}
entityId={pageId}
isDatasourcesOpen={isDatasourcesOpen}
listDatasource={listDatasource}
onDatasourcesToggle={onDatasourcesToggle}
/>
<JSDependencies />
</>
)}
</EntityExplorerWrapper>
);
}

19
app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx
View File

@ -18,12 +18,9 @@ import {
CONTEXT_DELETE,
CONFIRM_CONTEXT_DELETE,
createMessage,
CONTEXT_SETTINGS,
CONTEXT_PARTIAL_EXPORT,
CONTEXT_PARTIAL_IMPORT,
} from "@appsmith/constants/messages";
import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions";
import { AppSettingsTabs } from "pages/Editor/AppSettingsPane/AppSettings";
import { getPageById } from "selectors/editorSelectors";
import {
getCurrentApplication,
@ -65,9 +62,6 @@ export function PageContextMenu(props: {
const [showPartialExportModal, setShowPartialExportModal] = useState(false);
const [showPartialImportModal, setShowPartialImportModal] = useState(false);
const [confirmDelete, setConfirmDelete] = useState(false);
const isAppSidebarEnabled = useFeatureFlag(
FEATURE_FLAG.release_app_sidebar_enabled,
);
const partialImportExportLoadingState = useSelector(
getPartialImportExportLoadingState,
@ -151,14 +145,6 @@ export function PageContextMenu(props: {
],
);
const openAppSettingsPane = () =>
dispatch(
openAppSettingsPaneAction({
type: AppSettingsTabs.Page,
pageId: props.pageId,
}),
);
const openPartialExportModal = () => setShowPartialExportModal(true);
const openPartialImportModal = () => setShowPartialImportModal(true);
@ -232,11 +218,6 @@ export function PageContextMenu(props: {
onSelect: openPartialImportModal,
label: createMessage(CONTEXT_PARTIAL_IMPORT),
},
!isAppSidebarEnabled && {
value: "settings",
onSelect: openAppSettingsPane,
label: createMessage(CONTEXT_SETTINGS),
},
!props.isDefaultPage &&
canDeletePages && {
className: "t--apiFormDeleteBtn single-select",

5
app/client/src/pages/Editor/IDE/LeftPane/index.tsx
View File

@ -14,7 +14,6 @@ import {
import AppSettingsPane from "./AppSettings";
import DataSidePane from "./DataSidePane";
import LibrarySidePane from "./LibrarySidePane";
import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks";
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
import EditorPane from "../EditorPane";
@ -26,14 +25,10 @@ export const LeftPaneContainer = styled.div`
`;
const LeftPane = () => {
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const isPagesPaneEnabled = useFeatureFlag(
FEATURE_FLAG.release_show_new_sidebar_pages_pane_enabled,
);
const { path } = useRouteMatch();
if (!isAppSidebarEnabled) {
return <WidgetsEditorEntityExplorer />;
}
return (
<LeftPaneContainer>
<Switch>

65
app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx
View File

@ -1,14 +1,7 @@
import React, { useState } from "react";
import React from "react";
import styled from "styled-components";
import SidebarButton from "./SidebarButton";
import type { SidebarButton as SidebarButtonType } from "@appsmith/entities/IDE/constants";
import {
AnnouncementPopover,
AnnouncementPopoverTrigger,
AnnouncementPopoverContent,
Button,
} from "design-system";
import { useIsAppSidebarEnabled } from "navigation/featureFlagHooks";
const Container = styled.div`
width: 50px;
@ -21,72 +14,18 @@ const Container = styled.div`
position: relative;
`;
const DummyTrigger = styled.div`
width: 0;
height: 0;
position: absolute;
right: 0;
top: 10%;
`;
interface SidebarComponentProps {
topButtons: SidebarButtonType[];
bottomButtons: SidebarButtonType[];
appState: string;
onClick: (suffix: string) => void;
isAppSidebarAnnouncementEnabled: boolean;
}
function SidebarComponent(props: SidebarComponentProps) {
const {
appState,
bottomButtons,
isAppSidebarAnnouncementEnabled,
onClick,
topButtons,
} = props;
const [isPopoverOpen, setIsPopoverOpen] = useState(true);
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const isAppSidebarAnnouncementDismissed =
localStorage.getItem("isAppSidebarAnnouncementDismissed") === "true";
const handlePopoverClose = () => {
setIsPopoverOpen(false);
localStorage.setItem(
"isAppSidebarAnnouncementDismissed",
JSON.stringify(true),
);
};
if (!isAppSidebarEnabled) {
return null;
}
const { appState, bottomButtons, onClick, topButtons } = props;
return (
<Container className="t--sidebar" id="t--app-sidebar">
{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/pages/Editor/IDE/Sidebar/index.tsx
View File

@ -1,5 +1,4 @@
import React, { useCallback, useEffect } from "react";
import { getIsAppSidebarAnnouncementEnabled } from "selectors/ideSelectors";
import { useSelector, useDispatch } from "react-redux";
import { builderURL } from "@appsmith/RouteBuilder";
import { getCurrentPageId } from "selectors/editorSelectors";
@ -13,9 +12,6 @@ import { BottomButtons, TopButtons } from "@appsmith/entities/IDE/constants";
function Sidebar() {
const dispatch = useDispatch();
const appState = useCurrentAppState();
const isAppSidebarAnnouncementEnabled = useSelector(
getIsAppSidebarAnnouncementEnabled,
);
const pageId = useSelector(getCurrentPageId);
const currentWorkspaceId = useSelector(getCurrentWorkspaceId);
@ -43,7 +39,6 @@ function Sidebar() {
<SidebarComponent
appState={appState}
bottomButtons={BottomButtons}
isAppSidebarAnnouncementEnabled={isAppSidebarAnnouncementEnabled}
onClick={onClick}
topButtons={TopButtons}
/>

13
app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx
View File

@ -25,8 +25,6 @@ import NewQueryScreen from "./NewQuery";
import { isAirgapped } from "@appsmith/utils/airgapHelpers";
import history from "utils/history";
import { showDebuggerFlag } from "../../../selectors/debuggerSelectors";
import classNames from "classnames";
import { getIsAppSidebarEnabled } from "../../../selectors/ideSelectors";
import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
import {
createMessage,
@ -241,7 +239,6 @@ interface CreateNewDatasourceScreenProps {
canCreateDatasource?: boolean;
showDebugger: boolean;
pageId: string;
isAppSidebarEnabled: boolean;
isEnabledForCreateNew: boolean;
isOnboardingScreen?: boolean;
}
@ -273,7 +270,6 @@ class CreateNewDatasourceTab extends React.Component<
const {
canCreateDatasource = false,
dataSources,
isAppSidebarEnabled,
isCreating,
isEnabledForCreateNew,
isOnboardingScreen,
@ -288,12 +284,7 @@ class CreateNewDatasourceTab extends React.Component<
/>
) : null;
return (
<NewIntegrationsContainer
className={classNames({
"p-4": isAppSidebarEnabled,
})}
id="new-integrations-wrapper"
>
<NewIntegrationsContainer className="p-4" id="new-integrations-wrapper">
{dataSources.length === 0 && <AddDatasourceSecurely />}
{dataSources.length === 0 && this.props.mockDatasources.length > 0 && (
<>
@ -384,7 +375,6 @@ const mapStateToProps = (state: AppState) => {
const isEnabledForCreateNew =
!!featureFlags[FEATURE_FLAG.ab_create_new_apps_enabled];
const isAppSidebarEnabled = getIsAppSidebarEnabled(state);
return {
dataSources: getDatasources(state),
mockDatasources: getMockDatasources(state),
@ -393,7 +383,6 @@ const mapStateToProps = (state: AppState) => {
canCreateDatasource,
showDebugger,
pageId,
isAppSidebarEnabled,
isEnabledForCreateNew,
};
};

15
app/client/src/pages/Editor/WidgetsEditor/NavigationPreview.tsx
View File

@ -4,13 +4,18 @@ import classNames from "classnames";
import { useSelector } from "react-redux";
import { combinedPreviewModeSelector } from "selectors/editorSelectors";
import { Navigation } from "pages/AppViewer/Navigation";
import { useCurrentAppState } from "../IDE/hooks";
import { EditorState } from "@appsmith/entities/IDE/constants";
import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";
const NavigationPreview = forwardRef(
(
props: { isAppSettingsPaneWithNavigationTabOpen?: boolean },
ref: LegacyRef<HTMLDivElement> | undefined,
) => {
const { isAppSettingsPaneWithNavigationTabOpen } = props;
(props: unknown, ref: LegacyRef<HTMLDivElement> | undefined) => {
const isNavigationSelectedInSettings = useSelector(
getIsAppSettingsPaneWithNavigationTabOpen,
);
const appState = useCurrentAppState();
const isAppSettingsPaneWithNavigationTabOpen =
appState === EditorState.SETTINGS && isNavigationSelectedInSettings;
const isPreviewMode = useSelector(combinedPreviewModeSelector);
return (

16
app/client/src/pages/Editor/WidgetsEditor/index.tsx
View File

@ -51,6 +51,8 @@ import {
} from "layoutSystems/common/useLayoutSystemFeatures";
import OverlayCanvasContainer from "layoutSystems/common/WidgetNamesCanvas";
import { protectedModeSelector } from "selectors/gitSyncSelectors";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { EditorState } from "@appsmith/entities/IDE/constants";
const BannerWrapper = styled.div`
z-index: calc(var(--on-canvas-ui-z-index) + 1);
@ -72,9 +74,12 @@ function WidgetsEditor() {
const appSettingsPaneContext = useSelector(getAppSettingsPaneContext);
const navigationPreviewRef = useRef(null);
const [navigationHeight, setNavigationHeight] = useState(0);
const isAppSettingsPaneWithNavigationTabOpen = useSelector(
const isNavigationSelectedInSettings = useSelector(
getIsAppSettingsPaneWithNavigationTabOpen,
);
const appState = useCurrentAppState();
const isAppSettingsPaneWithNavigationTabOpen =
appState === EditorState.SETTINGS && isNavigationSelectedInSettings;
const canvasWidth = useSelector(getCanvasWidth);
const appMode = useSelector(getAppMode);
@ -172,14 +177,7 @@ function WidgetsEditor() {
const showNavigation = () => {
if (isPreviewingNavigation) {
return (
<NavigationPreview
isAppSettingsPaneWithNavigationTabOpen={
isAppSettingsPaneWithNavigationTabOpen
}
ref={navigationPreviewRef}
/>
);
return <NavigationPreview ref={navigationPreviewRef} />;
}
};

14
app/client/src/selectors/appSettingsPaneSelectors.tsx
View File

@ -2,23 +2,9 @@ import { AppSettingsTabs } from "pages/Editor/AppSettingsPane/AppSettings";
import type { AppState } from "@appsmith/reducers";
import type { AppSettingsPaneReduxState } from "reducers/uiReducers/appSettingsPaneReducer";
import { createSelector } from "reselect";
import { getIsAppSidebarEnabled } from "./ideSelectors";
export const getAppSettingsPane = (state: AppState) => state.ui.appSettingsPane;
export const getIsAppSettingsPaneOpen = createSelector(
getAppSettingsPane,
getIsAppSidebarEnabled,
(
appSettingsPane: AppSettingsPaneReduxState,
isAppSidebarEnabled: boolean,
) => {
// When sidebar is enabled we depend only on the url
if (isAppSidebarEnabled) return false;
return appSettingsPane.isOpen;
},
);
export const getAppSettingsPaneContext = createSelector(
getAppSettingsPane,
(appSettingsPane: AppSettingsPaneReduxState) => appSettingsPane.context,

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

@ -4,17 +4,6 @@ import type { AppState } from "@appsmith/reducers";
import { getPageActions } from "@appsmith/selectors/entitiesSelector";
import { EditorEntityTab } from "@appsmith/entities/IDE/constants";
export const getIsAppSidebarEnabled = createSelector(
selectFeatureFlags,
(flags) =>
!!flags?.release_app_sidebar_enabled || flags?.rollout_app_sidebar_enabled,
);
export const getIsAppSidebarAnnouncementEnabled = createSelector(
selectFeatureFlags,
(flags) => !!flags?.release_show_new_sidebar_announcement_enabled,
);
export const getIsSideBySideEnabled = createSelector(
selectFeatureFlags,
(flags) => flags.release_side_by_side_ide_enabled,

44
app/client/src/utils/hooks/useDynamicAppLayout.tsx
View File

@ -4,10 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
import { updateLayoutForMobileBreakpointAction } from "actions/autoLayoutActions";
import { updateCanvasLayoutAction } from "actions/editorActions";
import {
APP_SETTINGS_PANE_WIDTH,
APP_SIDEBAR_WIDTH,
} from "constants/AppConstants";
import { APP_SIDEBAR_WIDTH } from "constants/AppConstants";
import {
DefaultLayoutType,
layoutConfigurations,
@ -22,15 +19,9 @@ import {
getMainCanvasProps,
} from "selectors/editorSelectors";
import { getAppMode } from "@appsmith/selectors/entitiesSelector";
import {
getExplorerPinned,
getExplorerWidth,
} from "selectors/explorerSelector";
import { getExplorerWidth } from "selectors/explorerSelector";
import { getIsCanvasInitialized } from "selectors/mainCanvasSelectors";
import {
getIsAppSettingsPaneOpen,
getIsAppSettingsPaneWithNavigationTabOpen,
} from "selectors/appSettingsPaneSelectors";
import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";
import {
getAppSidebarPinned,
getCurrentApplication,
@ -45,7 +36,6 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
import { useLocation } from "react-router";
import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks";
import { getIDEViewMode } from "selectors/ideSelectors";
import {
EditorEntityTab,
@ -60,7 +50,6 @@ export const useDynamicAppLayout = () => {
const dispatch = useDispatch();
const explorerWidth = useSelector(getExplorerWidth);
const propertyPaneWidth = useSelector(getPropertyPaneWidth);
const isExplorerPinned = useSelector(getExplorerPinned);
const appMode: APP_MODE | undefined = useSelector(getAppMode);
const { width: screenWidth } = useWindowSizeHooks();
const mainCanvasProps = useSelector(getMainCanvasProps);
@ -68,7 +57,6 @@ export const useDynamicAppLayout = () => {
const currentPageId = useSelector(getCurrentPageId);
const isCanvasInitialized = useSelector(getIsCanvasInitialized);
const appLayout = useSelector(getCurrentApplicationLayout);
const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
const layoutSystemType = useSelector(getLayoutSystemType);
const isAppSidebarPinned = useSelector(getAppSidebarPinned);
const sidebarWidth = useSelector(getSidebarWidth);
@ -85,7 +73,6 @@ export const useDynamicAppLayout = () => {
const queryParams = new URLSearchParams(search);
const isEmbed = queryParams.get("embed");
const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
const isAppSidebarEnabled = useIsAppSidebarEnabled();
const editorMode = useSelector(getIDEViewMode);
const { segment } = useCurrentEditorState();
@ -142,33 +129,16 @@ export const useDynamicAppLayout = () => {
layoutSystemType === LayoutSystemTypes.AUTO ? 0 : GUTTER_WIDTH;
// if preview mode is not on and the app setting pane is not opened, we need to subtract the width of the property pane
if (
isPreviewing === false &&
!isAppSettingsPaneOpen &&
appMode === APP_MODE.EDIT
) {
if (!isPreviewing && appMode === APP_MODE.EDIT) {
calculatedWidth -= propertyPaneWidth;
}
// if app setting pane is open, we need to subtract the width of app setting page width
if (
isAppSettingsPaneOpen === true &&
appMode === APP_MODE.EDIT &&
!isAppSidebarEnabled
) {
calculatedWidth -= APP_SETTINGS_PANE_WIDTH;
}
// if explorer is closed or its preview mode, we don't need to subtract the EE width
if (
isExplorerPinned === true &&
!isPreviewing &&
appMode === APP_MODE.EDIT
) {
if (!isPreviewing && appMode === APP_MODE.EDIT) {
calculatedWidth -= explorerWidth;
}
if (appMode === APP_MODE.EDIT && isAppSidebarEnabled) {
if (appMode === APP_MODE.EDIT) {
calculatedWidth -= APP_SIDEBAR_WIDTH;
}
@ -323,9 +293,7 @@ export const useDynamicAppLayout = () => {
explorerWidth,
sidebarWidth,
propertyPaneWidth,
isExplorerPinned,
propertyPaneWidth,
isAppSettingsPaneOpen,
isAppSidebarPinned,
currentApplicationDetails?.applicationDetail?.navigationSetting
?.orientation,