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

[frontend] Add Update Channels #245

Merged
merged 10 commits into from
May 3, 2023

Conversation

szakhlypa
Copy link
Contributor

@szakhlypa szakhlypa commented Feb 27, 2023

Adds forms and logic to create, update and delete Update Channels.

Create Update Channel:

update.channel.create.mp4

Create Update Channel (disabled target groups are in use for other Update Channels):

update.channel.create.some.tagret.groups.are.disabled.mp4

Update and delete Update Channel:

update.and.delete.update.channel.mp4

frontend/src/components/MultiSelect.tsx Outdated Show resolved Hide resolved
Comment on lines +52 to +70
const TargetGroupsErrors = ({ errors }: { errors: unknown }) => {
if (errors == null) {
return null;
}
if (typeof errors === "object" && !Array.isArray(errors)) {
if (
"message" in errors &&
typeof (errors as Record<"message", unknown>).message === "string"
) {
const message = (errors as Record<"message", string>).message;
return <FormattedMessage id={message} />;
}
}
return null;
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

Not sure if this component with all this code is really necessary. I wonder if following the pattern already used for the other error messages would keep the code leaner and clearer:

errors.targetGroups?.message && <FormattedMessage id={errors.targetGroups.message} />

Copy link
Contributor Author

Choose a reason for hiding this comment

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

RHF does not return valid type for targetGroups validation errors so we need to type guard it.
I've added comment with more detailed explanation and TODO note.

frontend/src/forms/UpdateUpdateChannel.tsx Outdated Show resolved Hide resolved
frontend/src/forms/UpdateUpdateChannel.tsx Outdated Show resolved Hide resolved
frontend/src/pages/UpdateChannel.tsx Outdated Show resolved Hide resolved
frontend/src/pages/UpdateChannelCreate.tsx Outdated Show resolved Hide resolved
@coveralls
Copy link

coveralls commented Mar 9, 2023

Pull Request Test Coverage Report for Build 4488882488

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-81.9%) to 0.0%

Totals Coverage Status
Change from base Build e2245a7614ce3a2286d8eaeb0730fcea17b4b1b7: -81.9%
Covered Lines: 0
Relevant Lines: 0

💛 - Coveralls

@szakhlypa szakhlypa marked this pull request as draft March 13, 2023 09:19
npm run relay:generate-schema
npm run format

Signed-off-by: Sergey Zakhlypa <[email protected]>
add stubbed data to mock Relay's responses for UpdateChannel queries

Signed-off-by: Sergey Zakhlypa <[email protected]>
Add the UpdateChannelsTable React component

Signed-off-by: Sergey Zakhlypa <[email protected]>
Add a page a fetch and list available Update Channels

Signed-off-by: Sergey Zakhlypa <[email protected]>
npm update react-select

Signed-off-by: Sergey Zakhlypa <[email protected]>
Add optional properties:
- `creatable` to configure if new options can be created
- `invalid` to style component with `MultiSelect.scss`
- `getOptionLabel` to pass custom label resolver
- `getOptionValue` to pass custom value resolver
- `isOptionDisabled` with logic to detect whether an option is disabled
- `onBlur` callback to call on blur event

Signed-off-by: Sergey Zakhlypa <[email protected]>
@szakhlypa szakhlypa marked this pull request as ready for review March 22, 2023 10:38
Comment on lines +173 to +186
<SidebarItem
label={
<FormattedMessage
id="components.Sidebar.updateChannelsLabel"
defaultMessage="Update Channels"
/>
}
route={Route.updateChannels}
activeRoutes={[
Route.updateChannels,
Route.updateChannelsEdit,
Route.updateChannelsNew,
]}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Putting the Update Channels under the Models menu group feels a bit odd.
We could have a separate Software Updates menu group that includes Update Channels, and maybe also Base Image Collections.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We will review Sidebar menu groups after first implementation of fleet operations.

Add a page with a form to view and edit Update Channel

Signed-off-by: Sergey Zakhlypa <[email protected]>
Add a page with a form to create Update Channel

Signed-off-by: Sergey Zakhlypa <[email protected]>
npm run i18n:extract

Signed-off-by: Sergey Zakhlypa <[email protected]>
Signed-off-by: Sergey Zakhlypa <[email protected]>
@rbino rbino merged commit 47477bd into edgehog-device-manager:main May 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants