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

Abstract out the UI component of Segmented Header #37612

Closed
7 tasks done
Tracked by #37342
ankitakinger opened this issue Nov 21, 2024 · 1 comment
Closed
7 tasks done
Tracked by #37342

Abstract out the UI component of Segmented Header #37612

ankitakinger opened this issue Nov 21, 2024 · 1 comment
Assignees
@ankitakinger
Labels
IDE Pod Issues that new developers face while exploring the IDE IDE Product Issues related to the IDE Product Task A simple Todo

Comments

@ankitakinger
Copy link
Contributor

ankitakinger commented Nov 21, 2024 •
edited
Loading

  • Abstract out the UI component for Segmented Header component containing just the UI structure, without any logic being part of it.
  • Get the selectedSegment and onSegmentChange value from props.
  • This should take care of the padding and background for segmented header.
  • Allow for children that will have more UI controls. These will be placed on the right side of the segments.
  • It should take options as props to show the custom segments in segmented header
  • Replace the old implementation across the product with this new component, keeping intact the test ids being used for unit & integration tests.
  • Add a story in the storybook for this new ADS component.

Component: https://github.com/appsmithorg/appsmith/blob/release/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx

Hover state for segments:
Design: https://www.figma.com/design/dHNLeHtZqHZgTRLPR8kPHM/Entity-explorer-components?node-id=122-12721
Prototype: https://www.figma.com/proto/dHNLeHtZqHZgTRLPR8kPHM/Entity-explorer-components?node-id=122-12754&node-type=frame&t=KgMekgMem8AgJ2dm-0&scaling=min-zoom&content-scaling=fixed&page-id=122%3A12721&starting-point-node-id=122%3A12754
@ankitakinger ankitakinger mentioned this issue Nov 21, 2024
Open
1 task
@Nikhil-Nandagopal Nikhil-Nandagopal added the Task A simple Todo label Nov 21, 2024
@ankitakinger ankitakinger added IDE Product Issues related to the IDE Product IDE Pod Issues that new developers face while exploring the IDE labels Nov 21, 2024
@ankitakinger ankitakinger changed the title Abstract out UI component Abstract out UI component of Segmented Header Nov 21, 2024
@ankitakinger ankitakinger changed the title Abstract out UI component of Segmented Header Abstract out the UI component of Segmented Header Nov 27, 2024
@nerbos
Copy link
Collaborator

nerbos commented Dec 6, 2024

Hey team! Please add your planning poker estimate with Zenhub @alex-golovanov @ankitakinger @hetunandu

@ankitakinger ankitakinger self-assigned this Dec 6, 2024
@ankitakinger ankitakinger mentioned this issue Dec 12, 2024
Merged
2 tasks
ankitakinger added a commit that referenced this issue Dec 18, 2024
@ankitakinger
chore: Moving navigation header to Explorer templates in ADS (#38131)
495f139 
## Description

Moving navigation header to Explorer templates in ADS

Fixes [#37614](#37614)
[#37612](#37612)
[#37611](#37611)

## Automation

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

### 🔍 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/12380719410>
> Commit: 440da6d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12380719410&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE, @tag.Sanity`
> Spec:
> <hr>Tue, 17 Dec 2024 21:00:53 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

- **New Features**
- Introduced a new `SegmentSwitcher` component for enhanced segment
navigation.
- Added `EditorSegments` component for rendering a segmented control
interface.
- **Improvements**
- Replaced the `SegmentedHeader` with `SegmentSwitcher` in the explorer
pane for improved user experience.
- Updated the header component to use the new `NavigationHeader` for
better segment management.
- Enhanced hover interactions and simplified separator logic within the
segmented control.
- **Exports**
- New exports for `EditorSegments` and `SegmentSwitcher` components to
facilitate usage across modules.
- Added new documentation for the `EditorSegments` component to provide
usage guidelines and examples.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
NandanAnantharamu pushed a commit that referenced this issue Dec 27, 2024
@ankitakinger
chore: Moving navigation header to Explorer templates in ADS (#38131)
6f2a893 
## Description

Moving navigation header to Explorer templates in ADS

Fixes [#37614](#37614)
[#37612](#37612)
[#37611](#37611)

## Automation

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

### 🔍 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/12380719410>
> Commit: 440da6d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12380719410&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE, @tag.Sanity`
> Spec:
> <hr>Tue, 17 Dec 2024 21:00:53 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

- **New Features**
- Introduced a new `SegmentSwitcher` component for enhanced segment
navigation.
- Added `EditorSegments` component for rendering a segmented control
interface.
- **Improvements**
- Replaced the `SegmentedHeader` with `SegmentSwitcher` in the explorer
pane for improved user experience.
- Updated the header component to use the new `NavigationHeader` for
better segment management.
- Enhanced hover interactions and simplified separator logic within the
segmented control.
- **Exports**
- New exports for `EditorSegments` and `SegmentSwitcher` components to
facilitate usage across modules.
- Added new documentation for the `EditorSegments` component to provide
usage guidelines and examples.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
github-actions bot pushed a commit to Zeral-Zhang/appsmith that referenced this issue Feb 7, 2025
@ankitakinger
chore: Moving navigation header to Explorer templates in ADS (appsmit…
1d8ef8d 
…horg#38131)

## Description

Moving navigation header to Explorer templates in ADS

Fixes [appsmithorg#37614](appsmithorg#37614)
[appsmithorg#37612](appsmithorg#37612)
[appsmithorg#37611](appsmithorg#37611)

## Automation

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

### 🔍 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/12380719410>
> Commit: 440da6d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12380719410&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE, @tag.Sanity`
> Spec:
> <hr>Tue, 17 Dec 2024 21:00:53 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

- **New Features**
- Introduced a new `SegmentSwitcher` component for enhanced segment
navigation.
- Added `EditorSegments` component for rendering a segmented control
interface.
- **Improvements**
- Replaced the `SegmentedHeader` with `SegmentSwitcher` in the explorer
pane for improved user experience.
- Updated the header component to use the new `NavigationHeader` for
better segment management.
- Enhanced hover interactions and simplified separator logic within the
segmented control.
- **Exports**
- New exports for `EditorSegments` and `SegmentSwitcher` components to
facilitate usage across modules.
- Added new documentation for the `EditorSegments` component to provide
usage guidelines and examples.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ankitakinger ankitakinger

Labels
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
Development

No branches or pull requests
3 participants
@nerbos @Nikhil-Nandagopal @ankitakinger