Blueprints: Add import Wizard (HMS-3690) #1928

avitova · 2024-04-12T09:43:16Z

Sooo...I think we are ready for a discussion on what we want to export AND import, since this is ready. :)

avitova · 2024-04-12T09:43:51Z

src/Components/Blueprints/ImportBlueprintModal.tsx

@@ -96,15 +102,25 @@ export const ImportBlueprintModal: React.FunctionComponent<
            <HelperText>
              <HelperTextItem variant={isRejected ? 'error' : 'default'}>
                {isRejected
-                  ? 'Must be a JSON file no larger than 1 KB'
+                  ? 'Must be a JSON file no larger than 6 KB'


In case we want to export even the gpg key and overall everything, 1 KB does not seem to be enough.

with the first boot script it can be larger, I guess we can increase it a bit more.

lucasgarfield · 2024-04-12T11:13:47Z

Should this be working, @avitova? When I tried importing a blueprint, I just got kicked back to the table.

avitova · 2024-04-16T10:13:51Z

@lucasgarfield Yeah, you are right, let me correct this:)

avitova · 2024-04-17T12:25:39Z

Rebase done. I have also incorporated toast notification for when something goes wrong with the import. :) Thoughts? @lucasgarfield @amirfefer

amirfefer

Thanks @avitova, this looks and works great! 👍
I have a suggestion regarding the json parsing

amirfefer · 2024-04-17T18:46:25Z

src/Components/Blueprints/ImportBlueprintModal.tsx

@@ -96,15 +102,25 @@ export const ImportBlueprintModal: React.FunctionComponent<
            <HelperText>
              <HelperTextItem variant={isRejected ? 'error' : 'default'}>
                {isRejected
-                  ? 'Must be a JSON file no larger than 1 KB'
+                  ? 'Must be a JSON file no larger than 6 KB'


with the first boot script it can be larger, I guess we can increase it a bit more.

amirfefer · 2024-04-17T18:54:37Z

src/Components/CreateImageWizardV2/ImportImageWizard.tsx

+        const importedBlueprint: BlueprintResponse = JSON.parse(blueprint);
+        const importBlueprintState = mapRequestToState(importedBlueprint);


I suggest to parse the json before the router transition and loading the wizard, but after the user uploads the data in the import modal, this allows us to verify whether it complies with the blueprintResponse first. Then we can propagate the blueprint request object in the router's state.

I agree, thank you for this idea. :)

avitova · 2024-04-22T09:32:15Z

I addressed your comments @amirfefer :) Ready for re-review.

amirfefer

Thanks @avitova, tested a full export-import scenario, and it works well! 👍
I left a few minor inline comments, mainly for wrong casting.

This feature is guarded by a feature flag, so I'm ok to add unit tests as follow-up. react testing library has upload API for mimicking upload input, like here

amirfefer · 2024-04-24T16:51:02Z

src/Components/Blueprints/ImportBlueprintModal.tsx

+  const [importedBlueprint, setImportedBlueprint] = React.useState(
+    {} as wizardState


no need to use as here

Suggested change

const [importedBlueprint, setImportedBlueprint] = React.useState(

{} as wizardState

const [importedBlueprint, setImportedBlueprint] = React.useState<wizardState>()

amirfefer · 2024-04-24T16:52:09Z

src/Components/Blueprints/ImportBlueprintModal.tsx

@@ -49,17 +61,27 @@ export const ImportBlueprintModal: React.FunctionComponent<
    setJsonContent(value);
  };
  const handleDataChange = (_: DropEvent, value: string) => {
-    setJsonContent(value);
+    try {
+      const importedBlueprint = JSON.parse(value) as BlueprintResponse;


ditto

Suggested change

const importedBlueprint = JSON.parse(value) as BlueprintResponse;

const importedBlueprint: BlueprintResponse = JSON.parse(value);

amirfefer · 2024-04-24T17:00:18Z

src/Components/Blueprints/ImportBlueprintModal.tsx

                  : 'Upload a JSON file'}
              </HelperTextItem>
            </HelperText>
          </FormHelperText>
        </FormGroup>
        <ActionGroup>
-          <Button type="button">Review and finish</Button>
+          <Button


can you please add ouid prop for testing?

amirfefer · 2024-05-01T16:23:36Z

src/Components/CreateImageWizardV2/ImportImageWizard.tsx

+      );
+    }
+  }, [blueprint, dispatch]);
+  return <CreateImageWizard startStepIndex={1} />;


This is the reason why this fails to build, startStepIndex prop no longer exists, and isn't needed here, the default is 1 anyway.

regexowl

Thank you for working on this! Added some comments

src/Components/Blueprints/BlueprintCard.tsx

src/Components/Blueprints/ImportBlueprintModal.tsx

regexowl · 2024-05-13T12:15:23Z

src/Components/Blueprints/ImportBlueprintModal.tsx

+            ouiaId="import-blueprint-finish"
+          >
+            Review and finish
+          </Button>


When I tried to import a compose request, it didn't work which makes sense. The request is missing values that blueprint needs to have.

But the failure currently crashes the service and leaves the user stuck on the import path which means that even refreshing the page will not help.

Thank you for catching this!

avitova · 2024-05-16T12:40:11Z

So I added a test and rebased. The tests mostly cover which files should be accepted and which should not. It is quite plain, but I think that we can go with this for a while.

regexowl · 2024-05-22T08:12:48Z

@avitova Looks great! Can you please resolve the conflict and rebase?

avitova · 2024-05-22T08:24:55Z

@regexowl rebased:)

regexowl · 2024-05-22T08:44:45Z

/retest

regexowl

Excellent, thank you! Looks and works great 🚀

regexowl · 2024-05-22T08:53:12Z

/retest

regexowl · 2024-05-22T10:06:06Z

/retest

regexowl · 2024-05-22T11:48:34Z

/retest

regexowl · 2024-05-22T13:32:50Z

/retest

avitova · 2024-05-22T15:03:51Z

🥳 Thank you!

schutzbot added the 🌟 best practice label Apr 12, 2024

avitova commented Apr 12, 2024

View reviewed changes

avitova force-pushed the import-wizard branch from 76fd570 to 895d00f Compare April 12, 2024 09:45

avitova force-pushed the import-wizard branch 2 times, most recently from 4091f07 to 37a85ab Compare April 16, 2024 11:01

avitova requested review from amirfefer and lucasgarfield April 16, 2024 14:04

avitova force-pushed the import-wizard branch 2 times, most recently from 85a5ba7 to 916aaf2 Compare April 17, 2024 10:32

amirfefer reviewed Apr 17, 2024

View reviewed changes

avitova force-pushed the import-wizard branch 4 times, most recently from e91f59f to 94624c7 Compare April 22, 2024 09:23

amirfefer reviewed Apr 24, 2024

View reviewed changes

amirfefer reviewed May 1, 2024

View reviewed changes

avitova force-pushed the import-wizard branch from 61a13ea to 093db54 Compare May 7, 2024 10:26

regexowl force-pushed the import-wizard branch from 093db54 to 244c285 Compare May 13, 2024 11:39

regexowl reviewed May 13, 2024

View reviewed changes

regexowl added the 🔧 needs work label May 13, 2024

avitova force-pushed the import-wizard branch 5 times, most recently from b6341cf to 998ead3 Compare May 16, 2024 12:09

avitova requested review from amirfefer and regexowl May 16, 2024 12:40

regexowl added needs rebase and removed 🔧 needs work labels May 22, 2024

Blueprints: Add import Wizard (HMS-3690)

7f773d2

avitova force-pushed the import-wizard branch from 998ead3 to 7f773d2 Compare May 22, 2024 08:17

regexowl approved these changes May 22, 2024

View reviewed changes

regexowl removed the needs rebase label May 22, 2024

regexowl merged commit 3018d64 into osbuild:main May 22, 2024
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blueprints: Add import Wizard (HMS-3690) #1928

Blueprints: Add import Wizard (HMS-3690) #1928

avitova commented Apr 12, 2024

avitova Apr 12, 2024

amirfefer Apr 17, 2024 •

edited

lucasgarfield commented Apr 12, 2024

avitova commented Apr 16, 2024

avitova commented Apr 17, 2024

amirfefer left a comment •

edited

amirfefer Apr 17, 2024 •

edited

amirfefer Apr 17, 2024 •

edited

avitova Apr 18, 2024

avitova commented Apr 22, 2024

amirfefer left a comment

amirfefer Apr 24, 2024

amirfefer Apr 24, 2024

amirfefer Apr 24, 2024

amirfefer May 1, 2024 •

edited by ezr-ondrej

regexowl left a comment

regexowl May 13, 2024

avitova May 15, 2024

avitova commented May 16, 2024

regexowl commented May 22, 2024

avitova commented May 22, 2024

regexowl commented May 22, 2024

regexowl left a comment

regexowl commented May 22, 2024

regexowl commented May 22, 2024

regexowl commented May 22, 2024

regexowl commented May 22, 2024

avitova commented May 22, 2024

		const importedBlueprint: BlueprintResponse = JSON.parse(blueprint);
		const importBlueprintState = mapRequestToState(importedBlueprint);

		const [importedBlueprint, setImportedBlueprint] = React.useState(
		{} as wizardState

	const importedBlueprint = JSON.parse(value) as BlueprintResponse;
	const importedBlueprint: BlueprintResponse = JSON.parse(value);

Blueprints: Add import Wizard (HMS-3690) #1928

Blueprints: Add import Wizard (HMS-3690) #1928

Conversation

avitova commented Apr 12, 2024

avitova Apr 12, 2024

Choose a reason for hiding this comment

amirfefer Apr 17, 2024 • edited

Choose a reason for hiding this comment

lucasgarfield commented Apr 12, 2024

avitova commented Apr 16, 2024

avitova commented Apr 17, 2024

amirfefer left a comment • edited

Choose a reason for hiding this comment

amirfefer Apr 17, 2024 • edited

Choose a reason for hiding this comment

amirfefer Apr 17, 2024 • edited

Choose a reason for hiding this comment

avitova Apr 18, 2024

Choose a reason for hiding this comment

avitova commented Apr 22, 2024

amirfefer left a comment

Choose a reason for hiding this comment

amirfefer Apr 24, 2024

Choose a reason for hiding this comment

amirfefer Apr 24, 2024

Choose a reason for hiding this comment

amirfefer Apr 24, 2024

Choose a reason for hiding this comment

amirfefer May 1, 2024 • edited by ezr-ondrej

Choose a reason for hiding this comment

regexowl left a comment

Choose a reason for hiding this comment

regexowl May 13, 2024

Choose a reason for hiding this comment

avitova May 15, 2024

Choose a reason for hiding this comment

avitova commented May 16, 2024

regexowl commented May 22, 2024

avitova commented May 22, 2024

regexowl commented May 22, 2024

regexowl left a comment

Choose a reason for hiding this comment

regexowl commented May 22, 2024

regexowl commented May 22, 2024

regexowl commented May 22, 2024

regexowl commented May 22, 2024

avitova commented May 22, 2024

amirfefer Apr 17, 2024 •

edited

amirfefer left a comment •

edited

amirfefer Apr 17, 2024 •

edited

amirfefer Apr 17, 2024 •

edited

amirfefer May 1, 2024 •

edited by ezr-ondrej