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

chore(ui): migrate Message component to Typescript #511

Merged
merged 28 commits into from
Oct 15, 2024
Merged

chore(ui): migrate Message component to Typescript #511

merged 28 commits into from
Oct 15, 2024

Conversation

guoda-puidokaite
Copy link
Contributor

@guoda-puidokaite guoda-puidokaite commented Oct 10, 2024 •
edited
Loading

Summary

  • Migrated the Message component to TypeScript, enhancing code quality, maintainability, and scalability.
  • Utilised static typing to minimize runtime errors and improve the development experience.
  • Refactored the component for cleaner, more maintainable code.

Changes Made

TypeScript Migration:

  • Converted Message component files to TypeScript.
  • Added comprehensive type annotations.

Bug Fix:

  • Auto-dismiss is now correctly triggered only for values greater than or equal to one.

Refactoring:

  • Made necessary adjustments to address TypeScript-detected issues.
  • Further refactored for cleaner and more understandable code.

Testing:

  • Added tests for bug fix.
  • Fixed tests that weren't checking for the close button in case of duplicates.
  • Organised tests by what they check for better readability and maintenance.
  • Verified component behaviour using Storybook.
  • Updated tests to use vitest.

Cleanup:

  • Removed deprecated code. It wasn't needed for any .js components.

Documentation:

  • Updated Storybook documentation.

Screenshot: Deprecated .js code on the left, migrated .ts code on the right (see notes)

Screenshot 2024-10-14 at 08 13 31

Release:

  • Generated a changeset file, mentioning the migration and bug fix.

Related Issues

Testing Instructions

  1. Run Storybook
  2. Run Message tests

Checklist

  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.
  • I have made corresponding changes to the documentation (if applicable).
  • My changes generate no new warnings or errors.

@guoda-puidokaite
chore(ui): convert Message to typescript
bd29884 
- Change file extensions
- Add ts types
- Refactor code
- Remove legacy code
- Change tests to vitest
@guoda-puidokaite
chore(ui): changeset
b96be9f
@guoda-puidokaite guoda-puidokaite added enhancement New feature or request package All tasks related to package under packages/ ui-components All tasks related to juno-ui-components library labels Oct 10, 2024
@guoda-puidokaite guoda-puidokaite self-assigned this Oct 10, 2024
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Oct 10, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 7f5411a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudoperators/juno-ui-components Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 10, 2024 •
edited
Loading

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-10-15 13:19 UTC

@guoda-puidokaite guoda-puidokaite marked this pull request as ready for review October 10, 2024 09:58
@guoda-puidokaite guoda-puidokaite requested review from franzheidl and a team as code owners October 10, 2024 09:58
@guoda-puidokaite guoda-puidokaite changed the title chore(ui): change Message component to Typescript chore(ui): migrate Message component to Typescript Oct 10, 2024
guoda-puidokaite
guoda-puidokaite commented Oct 10, 2024
View reviewed changes
Copy link
Contributor Author

@guoda-puidokaite guoda-puidokaite left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Bug found: A timeout of zero or a negative number initiates a message dismissal. Mentioned in main issue.

andypf
andypf reviewed Oct 10, 2024
View reviewed changes
Copy link
Collaborator

@andypf andypf left a comment

Choose a reason for hiding this comment

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

Good Job Guoda 👍. However, I found a couple of issues.

packages/ui-components/src/components/Message/Message.types.ts Outdated Show resolved Hide resolved
@andypf
Copy link
Collaborator

andypf commented Oct 10, 2024

Bug found: A timeout of zero or a negative number initiates a message dismissal

Did you fix it?

@guoda-puidokaite
Copy link
Contributor Author

guoda-puidokaite commented Oct 10, 2024 •
edited
Loading

Hey, @andypf and @edda. I made the changes and added comments for everything else. Thank You for the review. 🚀

Requested changes made:

  • Bug fixed: Auto dismiss is triggered for values less than one
  • Added tests for fix and grouped tests by type
  • Updated the changeset message to include bug fix
  • Moved all externalised css, icon and timeout logic back to the main component
  • Added "to do" comments for externalisation where logic is duplicated between Message and other components e.g. Badge

Additional:

  • Updated MessageProps to allow arbitrary props
  • Reverted test for this
  • Made naming consistent with Badge component

@guoda-puidokaite guoda-puidokaite linked an issue Oct 10, 2024 that may be closed by this pull request
[TASK](ui): Migrate Message component to TypeScript #238
Closed
7 tasks
andypf
andypf previously approved these changes Oct 11, 2024
View reviewed changes
Copy link
Collaborator

@andypf andypf left a comment

Choose a reason for hiding this comment

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

LGTM

barsukov
barsukov requested changes Oct 14, 2024
View reviewed changes
Copy link
Contributor

@barsukov barsukov left a comment

Choose a reason for hiding this comment

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

Good job! I have few comments left, lets jump on a call and discuss :) 🔢

packages/ui-components/src/components/Message/Message.test.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/Message/Message.test.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/Message/Message.test.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/Message/Message.component.tsx Outdated Show resolved Hide resolved
@guoda-puidokaite guoda-puidokaite marked this pull request as draft October 14, 2024 09:21
@guoda-puidokaite
Merge branch 'main' into guoda-convert-message-to-ts
e2c5ce9
@guoda-puidokaite
chore(ui): make suggested changes
4b5276d 
- Remove unnecessary comments, use describe in tests instead
- Remove test.each, separate tests and remove some variant tests
- Remove .setup() from tests
- Use waitFor instead of new Promise
@guoda-puidokaite guoda-puidokaite marked this pull request as ready for review October 15, 2024 08:53
barsukov
barsukov requested changes Oct 15, 2024
View reviewed changes
Copy link
Contributor

@barsukov barsukov left a comment

Choose a reason for hiding this comment

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

Getting close :) Few comments left

packages/ui-components/src/components/Message/Message.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/Message/Message.component.tsx Show resolved Hide resolved
barsukov
barsukov approved these changes Oct 15, 2024
View reviewed changes
Copy link
Contributor

@barsukov barsukov left a comment

Choose a reason for hiding this comment

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

Great! 🥇

andypf
andypf approved these changes Oct 15, 2024
View reviewed changes
Copy link
Collaborator

@andypf andypf left a comment

Choose a reason for hiding this comment

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

👍

edda
edda approved these changes Oct 15, 2024
View reviewed changes
Copy link
Contributor

@edda edda left a comment

Choose a reason for hiding this comment

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

🚀

@andypf andypf merged commit 3ec48c0 into main Oct 15, 2024
15 checks passed
@andypf andypf deleted the guoda-convert-message-to-ts branch October 15, 2024 13:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andypf andypf andypf approved these changes

@barsukov barsukov barsukov approved these changes

@edda edda edda approved these changes

@franzheidl franzheidl Awaiting requested review from franzheidl franzheidl is a code owner

Assignees

@guoda-puidokaite guoda-puidokaite

Labels
enhancement New feature or request package All tasks related to package under packages/ refactor ui-components All tasks related to juno-ui-components library
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[TASK](ui): Migrate Message component to TypeScript
4 participants
@guoda-puidokaite @andypf @edda @barsukov