Skip to content
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.

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

chore: Side by Side exits beta phase #38347

Open
wants to merge 6 commits into
base: release
Choose a base branch
from

Conversation

hetunandu
Copy link
Member

@hetunandu hetunandu commented Dec 24, 2024

Description

Update user communication about Side by Side mode.

  • Side by Side will be out of beta when Action Redesign flag is enabled.
  • We will not show the Beta announcement to users
  • We will show a timed nudge to users

Fixes #38305

Automation

/ok-to-test tags="@tag.IDE"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12489545230
Commit: 3e673c8
Cypress dashboard.
Tags: @tag.IDE
Spec:


Wed, 25 Dec 2024 05:26:42 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

  • Yes
  • No

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Introduced a feature flag mechanism for controlling the visibility of the Announcement component.
    • Added a nudge feature in the ScreenModeToggle component, prompting users to switch to split screen mode.
    • Introduced a new Nudge component to enhance user guidance.
    • Added a new hook for managing the visibility of the nudge based on feature flags and widget action connections.
  • Bug Fixes

    • Improved the rendering logic to conditionally display UI elements based on user interactions.
  • Style

    • Enhanced visual presentation with new styled components for better user experience.
  • Chores

    • Added a new constant for local storage to track nudge visibility.

Copy link
Contributor

coderabbitai bot commented Dec 24, 2024

Walkthrough

The pull request introduces a feature flag mechanism for conditional rendering in the Announcement component and enhances the ScreenModeToggle component with a nudge feature. A new Nudge component is created to provide user prompts, and styled components are added to improve the UI. Additionally, a custom hook for managing nudge visibility is introduced, collectively enhancing the interactivity and responsiveness of the application based on feature flag states.

Changes

File Change Summary
app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx Added feature flag import and conditional rendering to control announcement visibility.
app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx Introduced state management for nudge visibility and updated rendering logic to include the Nudge component.
app/client/src/IDE/Components/Nudge/Nudge.tsx Created new Nudge component with props for customization and internal state management for visibility.
app/client/src/IDE/Components/Nudge/index.ts Added export statement for the new Nudge component to facilitate imports.
app/client/src/IDE/Components/Nudge/styles.ts Introduced styled components for the Nudge popover and its elements to enhance UI consistency.
app/client/src/pages/Editor/IDE/hooks.ts Added new hook useShowSideBySideNudge for managing nudge visibility based on feature flags and widget action connections.
app/client/src/utils/localStorage.tsx Added constant for local storage key related to nudge visibility and modified error handling in local storage class.

Assessment against linked issues

Objective Addressed Explanation
Remove the beta warning for users the first time they move to side-by-side mode (#38305) The changes do not include the removal of any beta warning.
Add a nudge to all existing users to move over to side-by-side mode (#38305) The implementation of the Nudge component fulfills this requirement.
Ensure the nudge is shown only once per user (#38305) The useShowSideBySideNudge hook manages nudge visibility based on user interaction.

Possibly related PRs

Suggested labels

Enhancement, ok-to-test, User Testing

Suggested reviewers

  • ankitakinger
  • albinAppsmith
  • ayushpahwa

Poem

🎉 In the code where features play,
Flags are waving, bright and gay.
Nudges guide with gentle cheer,
Enhancing flows, the path is clear!
🌟 With styles that make the UI shine,
Innovation sings, all is fine!


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@hetunandu
Copy link
Member Author

/build-deploy-preview

Copy link

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12480287402.
Workflow: On demand build Docker image and deploy preview.
skip-tests: . env: .
PR: 38347.
recreate: .

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx (1)

47-50: Consider user experience if disabling the announcement.
While returning null effectively hides the announcement, confirm this aligns with any product requirement for existing users.

app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx (2)

26-52: Styling approach looks consistent.
The styled components maintain a uniform design language. Consider consolidating shared styles or using a theme object if these styles are repeated elsewhere.


115-147: Popover logic is well-structured.
Adding the nudge overlay is straightforward. Watch out for potential overuse, which may distract users with too many prompts.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f2733c6 and 559613d.

📒 Files selected for processing (2)
  • app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx (3 hunks)
  • app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx (4 hunks)
🔇 Additional comments (5)
app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx (2)

7-8: Good use of feature flags.
Your imports are organized correctly, and you've appropriately used the useFeatureFlag hook and FEATURE_FLAG constants.


27-29: Check feature usage across the codebase.
Ensure all references to release_actions_redesign_enabled are intentional and consistently applied.

app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx (3)

1-12: Relevant imports and usage.
The newly added imports match their usage in the subsequent code. This is concise and clear.


94-95: Intuitive default state.
Using true helps users discover the new popover nudge. Just ensure it doesn't impede existing workflows.


148-148: Clean fallback flow.
The fallback to a simpler tooltip ensures minimal impact if the nudge is dismissed.

Copy link

Deploy-Preview-URL: https://ce-38347.dp.appsmith.com

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
app/client/src/IDE/Components/Nudge/styles.ts (3)

8-12: Consider using theme variables for the box shadow color.
It is often preferable to replace raw hex values with theme tokens to ensure consistency and maintainability of your design.


14-22: Avoid frequent usage of !important in styling.
Using !important can lead to specificity conflicts in your stylesheet. Consider alternative approaches, such as more specific selectors, to maintain style priority.


24-38: Use theme-based color tokens instead of hardcoded hex values.
Replacing #ffffff and #ffffff33 with theme color tokens can improve maintainability and consistency across the UI.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 559613d and 4c2664f.

📒 Files selected for processing (4)
  • app/client/src/IDE/Components/Nudge/Nudge.tsx (1 hunks)
  • app/client/src/IDE/Components/Nudge/index.ts (1 hunks)
  • app/client/src/IDE/Components/Nudge/styles.ts (1 hunks)
  • app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx (4 hunks)
✅ Files skipped from review due to trivial changes (1)
  • app/client/src/IDE/Components/Nudge/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
🔇 Additional comments (2)
app/client/src/IDE/Components/Nudge/Nudge.tsx (2)

6-12: Interface looks clear and concise.
The optional props (align, side) and mandatory fields are well-defined.


14-48: The component design is straightforward and handles cleanup properly.
The setTimeout approach is clean and the unmount cleanup prevents memory leaks.

@hetunandu
Copy link
Member Author

/build-deploy-preview

Copy link

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12481531692.
Workflow: On demand build Docker image and deploy preview.
skip-tests: . env: .
PR: 38347.
recreate: .

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
app/client/src/pages/Editor/IDE/hooks.ts (1)

206-217: Consider re-checking state when conditions change.
This hook uses the initial condition for widgetBindingsExist and isActionRedesignEnabled. If either changes at runtime, the value might not reflect the new state. For dynamic updates, consider a derived state or a useEffect.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4c2664f and af69363.

📒 Files selected for processing (3)
  • app/client/src/IDE/Components/Nudge/Nudge.tsx (1 hunks)
  • app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx (4 hunks)
  • app/client/src/pages/Editor/IDE/hooks.ts (2 hunks)
🔇 Additional comments (11)
app/client/src/pages/Editor/IDE/hooks.ts (1)

32-35: Looks good!
These additional imports cleanly separate concerns for feature flags and state hooks.

app/client/src/IDE/Components/Nudge/Nudge.tsx (3)

1-5: Imports are well-structured.
These libraries align with the intended UI and positioning functionality.


6-13: Prop definitions are concise.
The optional props and clear naming make this component self-explanatory and straightforward to use.


15-52: Practical popover usage with delayed open.
The managed visibility and cleanup logic are properly implemented. Ensure that the onDismissClick callback also toggles the open state if needed.

app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx (7)

17-18: Selective imports for the new feature.
Bringing in Nudge and useShowSideBySideNudge is aligned with the new side-by-side encouragement functionality.


46-47: Clear naming for nudge toggles.
These state variables convey their purpose well.


53-54: Dismissing the nudge when switching modes is appropriate.
This ensures the UI hint doesn’t linger unnecessarily.


62-63: Dependency array includes dismissNudge.
Great for ensuring the callback behavior remains consistent.


64-77: Memoized button approach is efficient.
Helps avoid unnecessary re-renders, leveraging useMemo effectively.


98-110: Nudge integration effectively guides users.
The user flow to open and dismiss the nudge is straightforward.


115-117: Tooltip alignment and usage are neat.
Maintains UX consistency when the nudge is not in use.

@github-actions github-actions bot added IDE Pod Issues that new developers face while exploring the IDE IDE Product Issues related to the IDE Product Task A simple Todo labels Dec 24, 2024
@hetunandu hetunandu changed the title fix/side-by-side-beta-exit chore: Side by Side exits beta phase Dec 24, 2024
@github-actions github-actions bot added the skip-changelog Adding this label to a PR prevents it from being listed in the changelog label Dec 24, 2024
Copy link

Deploy-Preview-URL: https://ce-38347.dp.appsmith.com

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
app/client/src/utils/localStorage.tsx (1)

34-34: Good reference usage.
Linking to Modernizr’s local storage detection logic is helpful as a reference for future maintainers.

app/client/src/pages/Editor/IDE/hooks.ts (1)

206-227: Custom hook is clearly structured.
This hook reliably manages the “side-by-side mode” nudge state based on local storage and feature flags.

Consider parsing the stored value ("false") into a boolean for explicit type safety, e.g. JSON.parse() or a custom parser. This would reduce reliance on string literals if the key value evolves.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af69363 and 3e673c8.

📒 Files selected for processing (2)
  • app/client/src/pages/Editor/IDE/hooks.ts (2 hunks)
  • app/client/src/utils/localStorage.tsx (2 hunks)
🔇 Additional comments (3)
app/client/src/utils/localStorage.tsx (2)

13-13: New local storage key is consistent.
The new NUDGE_SHOWN_SPLIT_PANE key aligns well with existing naming conventions and provides an intuitive identifier for the nudge feature.


18-18: Explicitly setting the error name is a good practice.
Ensuring the LocalStorageNotSupportedError name accurately reflects the error source improves clarity when handling exceptions elsewhere.

app/client/src/pages/Editor/IDE/hooks.ts (1)

32-36: Imports are well-organized and purposeful.
Using useBoolean, isWidgetActionConnectionPresent, and useFeatureFlag is appropriate for enhancing this feature’s logic in a modular way.

@hetunandu hetunandu added the ok-to-test Required label for CI label Dec 25, 2024
export const CloseIcon = styled(Icon)`
svg {
path {
fill: #ffffff;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use ADS color variables for this one?

backgroundColor="var(--ads-v2-color-bg-emphasis-max)"
gap="spaces-2"
>
<Text color="#fff" kind="heading-xs">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ADS color variable?

}, [dispatch, isAnimatedIDEEnabled]);
}, [dispatch, dismissNudge, isAnimatedIDEEnabled]);

const maximiseButton = useMemo(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icon and testid has the name minimize while we are naming this one as maximiseButton. Any particular reason?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thats a miss. The name should be minimiseButton

@@ -198,3 +203,25 @@ export const useIDETabClickHandlers = () => {

return { addClickHandler, tabClickHandler, closeClickHandler };
};

export const useShowSideBySideNudge: () => [boolean, () => void] = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not a big deal at this point, but I would suggest to put hooks in separate files. [nit]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
IDE Pod Issues that new developers face while exploring the IDE IDE Product Issues related to the IDE Product ok-to-test Required label for CI skip-changelog Adding this label to a PR prevents it from being listed in the changelog Task A simple Todo
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Task]: Move side by side out of beta
3 participants