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.

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

Jump to bottom

[Task] - New UI for overflow tabs #33432

Closed
albinAppsmith opened this issue May 14, 2024 · 2 comments · Fixed by #34150 or #34658
Closed

[Task] - New UI for overflow tabs #33432

albinAppsmith opened this issue May 14, 2024 · 2 comments · Fixed by #34150 or #34658
Assignees
@albinAppsmith
Labels
IDE Navigation Issues/feature requests related to IDE navigation, and context switching IDE Pod Issues that new developers face while exploring the IDE IDE Product Issues related to the IDE Product Task A simple Todo

Comments

@albinAppsmith
Copy link
Collaborator

albinAppsmith commented May 14, 2024 •
edited
Loading

Design: https://app.zeplin.io/project/660e4f58a0437c27988148ee/screen/663e2c9e114e0421d24d08a1
@albinAppsmith albinAppsmith added the IDE Pod Issues that new developers face while exploring the IDE label May 14, 2024
@Nikhil-Nandagopal Nikhil-Nandagopal added the Task A simple Todo label May 14, 2024
@albinAppsmith albinAppsmith self-assigned this May 14, 2024
@albinAppsmith albinAppsmith added IDE Navigation Issues/feature requests related to IDE navigation, and context switching and removed IDE Pod Issues that new developers face while exploring the IDE labels May 14, 2024
@github-actions github-actions bot added the IDE Pod Issues that new developers face while exploring the IDE label May 14, 2024
@akshayvijayjain
Copy link

@albinAppsmith , can the design be made public?
we can pick it for development

@albinAppsmith
Copy link
Collaborator Author

@akshayvijayjain, Thank you for showing interest in this task. I have already picked it up, but I encourage you to explore other opportunities, such as the Good First Issues.

@albinAppsmith albinAppsmith mentioned this issue Jun 10, 2024
Merged
2 tasks
@albinAppsmith albinAppsmith reopened this Jul 3, 2024
@albinAppsmith albinAppsmith mentioned this issue Jul 3, 2024
Merged
2 tasks
hetunandu pushed a commit that referenced this issue Jul 5, 2024
@albinAppsmith
fix: Overflow list new UI restore (#34658)
a1b3109 
## Description

Overflow list view changes was reverted because of Anvil failures in EE.
This PR add the changes back.


Fixes #33432 

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> 🔴 🔴 🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9802067318>
> Commit: 18b7a57
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9802067318&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.All
> The following are new failures, please fix them before merging the PR:
<ol>
>
<li>cypress/e2e/Regression/ClientSide/PartialImportExport/PartialExport_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Fri, 05 Jul 2024 03:11:20 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

- **New Features**
- Introduced several new React components (`FileTab`, `AddTab`, `List`,
`ScreenModeToggle`, `EditorTabs`) to enhance the IDE tab management and
user interaction.

- **Bug Fixes**
- Improved drag-and-drop (DnD) simulation logic by using `realMouseMove`
method.

- **Refactor**
- Simplified and refactored the `FileTabs` component, improving its
encapsulation and rendering logic.
- Enhanced state and props handling across various tab components and
hooks.

- **Tests**
- Updated test IDs and test logic to ensure consistency and correctness
for tab interactions and states.
  
- **Style**
- Updated styled components, replacing tab-related styles with
list-related styles to improve UI consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Shivam-z pushed a commit to Shivam-z/appsmith that referenced this issue Jul 10, 2024
@albinAppsmith @Shivam-z
feat: Overflow tabs list view (appsmithorg#34150)
208c12d 
## Description

This PR implements the new design for the list view.


Fixes appsmithorg#33432  

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9660135881>
> Commit: fb8addb
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9660135881&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.IDE`

<!-- end of auto-generated comment: Cypress test results  -->










## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

- **New Features**
  - Introduced `AddTab` component to add new JavaScript or Query tabs.
- Added `ScreenModeToggle` for switching between full-screen and
split-screen modes.
  - Added `FileTab` component for improved tab interactions.
- Introduced `List` component for conditional rendering based on editor
state.

- **Bug Fixes**
- Corrected test assertions and tab names in `JSRender.test.tsx` and
`QueryRender.test.tsx`.
- Fixed tab closure and interaction flow in
`IDE_Add_Pane_Interactions_spec.ts`.

- **Refactor**
- Simplified selector functions and updated component imports for better
readability and performance.

- **Tests**
- Updated tests to include `currentEntity` props and use
`sanitizeString` for tab titles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Shivam-z pushed a commit to Shivam-z/appsmith that referenced this issue Jul 10, 2024
@albinAppsmith @Shivam-z
fix: Overflow list new UI restore (appsmithorg#34658)
3484986 
## Description

Overflow list view changes was reverted because of Anvil failures in EE.
This PR add the changes back.


Fixes appsmithorg#33432 

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> 🔴 🔴 🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9802067318>
> Commit: 18b7a57
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9802067318&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.All
> The following are new failures, please fix them before merging the PR:
<ol>
>
<li>cypress/e2e/Regression/ClientSide/PartialImportExport/PartialExport_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Fri, 05 Jul 2024 03:11:20 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

- **New Features**
- Introduced several new React components (`FileTab`, `AddTab`, `List`,
`ScreenModeToggle`, `EditorTabs`) to enhance the IDE tab management and
user interaction.

- **Bug Fixes**
- Improved drag-and-drop (DnD) simulation logic by using `realMouseMove`
method.

- **Refactor**
- Simplified and refactored the `FileTabs` component, improving its
encapsulation and rendering logic.
- Enhanced state and props handling across various tab components and
hooks.

- **Tests**
- Updated test IDs and test logic to ensure consistency and correctness
for tab interactions and states.
  
- **Style**
- Updated styled components, replacing tab-related styles with
list-related styles to improve UI consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
@Nikhil-Nandagopal Nikhil-Nandagopal added the IDE Product Issues related to the IDE Product label Aug 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@albinAppsmith albinAppsmith

Labels
IDE Navigation Issues/feature requests related to IDE navigation, and context switching IDE Pod Issues that new developers face while exploring the IDE IDE Product Issues related to the IDE Product Task A simple Todo
Projects
None yet
Milestone
No milestone
3 participants
@Nikhil-Nandagopal @albinAppsmith @akshayvijayjain