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

refactor(web): use queries and TypeScript in storage components #1585

Merged
merged 59 commits into from
Sep 6, 2024

Conversation

Trello: https://trello.com/c/nV7mjrf9/

This is the first step towards adapting the storage code to use queries.
As this part of the code is rather complex, we decided to move as many
components as possible to TypeScript to have a kind of security net.

## What is included

* Add a set of types from from our OpenAPI docs (see #1564) in
`api/storage/types`.
* Add a set of storage UI types in `types/storage`. We should unify the
types, but let's do it later.
* Define a new `api/storage` module moving big chunks of the
`StorageClient` code.
* Define a set of queries under `queries/storage`.
* Adapt the `ProposalPage` component to use queries. It retrieves a lot
of information that injects to nested components.
* Convert `ProposalPage` and `InstallationDeviceField` to TypeScript.

## What is missing

* As you may see, the front end is not building. That problems (and
other subtle bugs) will be fixed as we adapt the rest of storage
components to TypeScript. So a bunch of additional pull requests will
follow.
* Additionally, we are removing all those skeletons from the UI. We will
use a unified mechanism.
* It is not needed as the parser correctly identifies those functions.
…2) (#1583)

Continuation of #1577. It covers the conversion of the following
components/modules:

* `BootConfigField`
* `device-utils`
* `SpaceActionsTable`
* `DeviceSelectorTable`
* `EncryptionSettingsDialog`
* `ProposalActionDialog`
* `ProposalActionSummary`
* `StoragePage`
* `ProposalResultSection`
* `ProposalTransactionalInfo`
* `SpaceActionsTable`
@imobachgs imobachgs changed the title refactor(web): use TanStack Query and TypeScript in storage components refactor(web): use queries and TypeScript in storage components Sep 6, 2024
Copy link
Contributor

@dgdavid dgdavid left a comment

Choose a reason for hiding this comment

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

LGTM, just a few questions and notes plus a console.log leftover there.

I'll approve, feel free to merge it without needing another review if you don't introduce big changes.

Thank you for addressing this one!

web/src/api/storage/proposal.ts Outdated Show resolved Hide resolved
web/src/api/storage/types.ts Show resolved Hide resolved
web/src/components/storage/BootSelection.tsx Show resolved Hide resolved
@@ -71,6 +78,7 @@ export default function ProposalActionsDialog({ actions = [] }) {
subvolActions.length,
);

console.log(actions);
Copy link
Contributor

Choose a reason for hiding this comment

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

Debugging left over, I guess

/**
* Hook that returns the product parameters (e.g., mount points).
*/
const useProductParams = (options?: QueryHookOptions): ProductParams => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting... should it be here or in the software queries?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

IMHO it belongs here. They are storage-related params that depend on the product.

web/src/queries/storage.ts Show resolved Hide resolved
web/src/queries/storage.ts Show resolved Hide resolved
web/src/types/storage.ts Show resolved Hide resolved
*
* @todo This conversion will not be needed after adapting Section to directly work with issues.
*
* @param {import("~/client/mixins").Issue} issue
* @param {import("~/types/issues").Issue} issue
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if would be better to import types at the top of the file.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Well, this is a JavaScript file.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah, right! I overlooked that tiny detail :P

@imobachgs imobachgs merged commit 4373ec5 into master Sep 6, 2024
2 checks passed
@imobachgs imobachgs deleted the storage-typescript branch September 6, 2024 11:54
imobachgs added a commit that referenced this pull request Sep 13, 2024
Trello: https://trello.com/c/MsGbqiwA/

This is a follow-up of #1585 which
adapts the iSCSI-related code to use queries instead of the regular
Agama client. Additionally, it converts a good share of the code to
TypeScript and adds some iSCSI tests, that were not included in the
first version.
@imobachgs imobachgs mentioned this pull request Sep 20, 2024
imobachgs added a commit that referenced this pull request Sep 20, 2024
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.

2 participants