Skip to content

Commit

Permalink
chore: Make App Sidebar Generally Available (#30923)
Browse files Browse the repository at this point in the history 
## 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 -->
  • Loading branch information
@hetunandu
hetunandu authored Feb 7, 2024
1 parent 078f450 commit e68cf54
Show file tree
Hide file tree
Showing 27 changed files with 74 additions and 624 deletions.
19 changes: 1 addition & 18 deletions app/client/src/actions/appSettingsPaneActions.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
7 changes: 0 additions & 7 deletions app/client/src/ce/entities/FeatureFlag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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:
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
11 changes: 2 additions & 9 deletions app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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);

Expand Down Expand Up @@ -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}`,
},
Expand Down Expand Up @@ -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}`,
},
Expand Down
9 changes: 2 additions & 7 deletions app/client/src/ce/pages/Editor/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 () => {
Expand All @@ -45,9 +42,7 @@ function EditorRoutes() {
return (
<Switch key={path}>
<SentryRoute
component={
isAppSidebarEnabled ? CreateNewDatasourceTab : IntegrationEditor
}
component={CreateNewDatasourceTab}
exact
path={`${path}${INTEGRATION_EDITOR_PATH}`}
/>
Expand Down
96 changes: 6 additions & 90 deletions app/client/src/components/editorComponents/EntityExplorerSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,19 @@ 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";
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) =>
Expand All @@ -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
Expand All @@ -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
*/
Expand All @@ -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);

Expand All @@ -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}
Expand Down
47 changes: 16 additions & 31 deletions app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -86,16 +82,13 @@ 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
* 5. if only one widget is selected -> WidgetPropertyPane
*/
const propertyPane = useMemo(() => {
switch (true) {
case isAppSettingsPaneOpen:
return <AppSettingsPane />;
case selectedWidgetsLength > 1:
return <MultiSelectPropertyPane />;
case selectedWidgetsLength === 1:
Expand All @@ -107,7 +100,6 @@ export const PropertyPaneSidebar = memo((props: Props) => {
return <CanvasPropertyPane />;
}
}, [
isAppSettingsPaneOpen,
selectedWidgetsLength,
isDraggingForSelection,
shouldNotRenderPane,
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit e68cf54

Please sign in to comment.