Skip to content

chore: Extracting out showNudge config from screen mode toggle component #38833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ankitakinger merged 3 commits into from
Jan 24, 2025
Merged

chore: Extracting out showNudge config from screen mode toggle component #38833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9c8157
extracting out showNudge config from screen mode toggle component
ankitakinger Jan 24, 2025
578816a
making props optional
ankitakinger Jan 24, 2025
1a30130
addressing review comment
ankitakinger Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,14 @@ import type { AppState } from "ee/reducers";
import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import { Nudge } from "IDE/Components/Nudge";
import { useShowSideBySideNudge } from "../hooks";

export const ScreenModeToggle = () => {
interface Props {
showNudge?: boolean;
dismissNudge?: () => void;
}

export const ScreenModeToggle = (props: Props) => {
const { dismissNudge, showNudge = false } = props;
const dispatch = useDispatch();
const ideViewMode = useSelector(getIDEViewMode);
const isAnimatedIDEEnabled = useSelector((state: AppState) => {
Expand All @@ -43,14 +48,14 @@ export const ScreenModeToggle = () => {
}
}, [dispatch, isAnimatedIDEEnabled]);

const [showNudge, dismissNudge] = useShowSideBySideNudge();

const switchToSplitScreen = useCallback(() => {
AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
to: EditorViewMode.SplitScreen,
});

dismissNudge();
if (dismissNudge) {
dismissNudge();
}

if ("startViewTransition" in document && isAnimatedIDEEnabled) {
document.startViewTransition(() => {
Expand Down Expand Up @@ -95,7 +100,7 @@ export const ScreenModeToggle = () => {
);
}

if (showNudge) {
if (showNudge && dismissNudge) {
return (
<Nudge
align="center"
Expand Down
9 changes: 7 additions & 2 deletions app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import {
} from "ee/entities/IDE/constants";

import Container from "./Container";
import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
import {
useCurrentEditorState,
useIDETabClickHandlers,
useShowSideBySideNudge,
} from "../hooks";
import { SCROLL_AREA_OPTIONS, TabSelectors } from "./constants";
import { AddButton } from "./AddButton";
import { useLocation } from "react-router";
Expand All @@ -32,6 +36,7 @@ const EditorTabs = () => {
const entities = useSelector(tabsConfig.listSelector, shallowEqual);
const files = useSelector(tabsConfig.tabsSelector, shallowEqual);
const isListViewActive = useSelector(getListViewActiveState);
const [showNudge, dismissNudge] = useShowSideBySideNudge();

const location = useLocation();
const dispatch = useDispatch();
Expand Down Expand Up @@ -147,7 +152,7 @@ const EditorTabs = () => {
</ScrollArea>
{files.length > 0 ? <AddButton /> : null}
{/* Switch screen mode button */}
<ScreenModeToggle />
<ScreenModeToggle dismissNudge={dismissNudge} showNudge={showNudge} />
</Container>

{/* Overflow list */}
Expand Down
Loading