Blueprint: show basic version diff

api/schema/imageBuilder.yaml

@@ -213,6 +213,14 @@ paths:
       operationId: getBlueprint
       tags:
         - blueprint
+      parameters:
+        - in: query
+          name: version
+          schema:
+            type: integer
+          description: |
+            Filter by a specific version of the Blueprint we want to fetch.
+            Omit or pass -1 to fetch latest version.
       responses:
         '200':
           description: detail of a blueprint

src/Components/Blueprints/BlueprintDiffModal.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { DiffEditor } from '@monaco-editor/react';
+import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+
+import { BuildImagesButtonEmptyState } from './BuildImagesButton';
+
+import { selectSelectedBlueprintId } from '../../store/BlueprintSlice';
+import { useAppSelector } from '../../store/hooks';
+import { useGetBlueprintQuery } from '../../store/imageBuilderApi';
+
+type blueprintDiffProps = {
+  // baseVersion is the version of the blueprint to compare the latest version against
+  baseVersion: number | null | undefined;
+  blueprintName: string | undefined;
+  isOpen: boolean;
+  onClose?: () => void;
+};
+
+const BlueprintDiffModal = ({
+  baseVersion,
+  blueprintName,
+  isOpen,
+  onClose,
+}: blueprintDiffProps) => {
+  const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
+
+  const { data: baseBlueprint } = useGetBlueprintQuery(
+    { id: selectedBlueprintId as string, version: baseVersion || -1 },
+    { skip: !selectedBlueprintId || !baseVersion }
+  );
+  const { data: blueprint } = useGetBlueprintQuery(
+    { id: selectedBlueprintId as string },
+    { skip: !selectedBlueprintId }
+  );
+
+  if (!baseBlueprint || !blueprint) {
+    return null;
+  }
+
+  return (
+    <Modal
+      variant={ModalVariant.large}
+      titleIconVariant={'info'}
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Compare ${blueprintName || ''} versions`}
+      actions={[
+        <BuildImagesButtonEmptyState key="build-button" />,
+        <Button
+          key="cancel-button"
+          variant="link"
+          type="button"
+          onClick={onClose}
+        >
+          Cancel
+        </Button>,
+      ]}
+    >
+      <DiffEditor
+        height="90vh"
+        language="json"
+        original={JSON.stringify(baseBlueprint, undefined, 2)}
+        modified={JSON.stringify(blueprint, undefined, 2)}
+      />
+    </Modal>
+  );
+};
+
+export default BlueprintDiffModal;

src/Components/ImagesTable/ImagesTableToolbar.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import {
   Alert,
+  AlertActionLink,
   Pagination,
   Toolbar,
   ToolbarContent,
@@ -22,6 +23,7 @@ import {
   Distributions,
 } from '../../store/imageBuilderApi';
 import { BlueprintActionsMenu } from '../Blueprints/BlueprintActionsMenu';
+import BlueprintDiffModal from '../Blueprints/BlueprintDiffModal';
 import BlueprintVersionFilter from '../Blueprints/BlueprintVersionFilter';
 import { BuildImagesButton } from '../Blueprints/BuildImagesButton';
 import { DeleteBlueprintModal } from '../Blueprints/DeleteBlueprintModal';
@@ -43,6 +45,7 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
   onPerPageSelect,
 }: imagesTableToolbarProps) => {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showDiffModal, setShowDiffModal] = useState(false);
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
 
@@ -110,6 +113,14 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
         setShowDeleteModal={setShowDeleteModal}
         isOpen={showDeleteModal}
       />
+      {itemCount > 0 && isBlueprintOutSync && (
+        <BlueprintDiffModal
+          baseVersion={latestImageVersion}
+          blueprintName={selectedBlueprintName}
+          isOpen={showDiffModal}
+          onClose={() => setShowDiffModal(false)}
+        />
+      )}
       <Toolbar>
         <ToolbarContent>
           <Title headingLevel="h2">
@@ -127,6 +138,14 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
             isInline
             title={`The selected blueprint is at version ${selectedBlueprintVersion}, the latest images are at version ${latestImageVersion}. Build images to synchronize with the latest version.`}
             ouiaId="blueprint-out-of-sync-alert"
+            actionLinks={
+              <AlertActionLink
+                onClick={() => setShowDiffModal(true)}
+                id="blueprint_view_version_difference"
+              >
+                View the difference
+              </AlertActionLink>
+            }
           />
         )}
         {blueprintsComposes &&

src/store/imageBuilderApi.ts

@@ -39,7 +39,10 @@ const injectedRtkApi = api.injectEndpoints({
       }),
     }),
     getBlueprint: build.query<GetBlueprintApiResponse, GetBlueprintApiArg>({
-      query: (queryArg) => ({ url: `/blueprints/${queryArg.id}` }),
+      query: (queryArg) => ({
+        url: `/blueprints/${queryArg.id}`,
+        params: { version: queryArg.version },
+      }),
     }),
     deleteBlueprint: build.mutation<
       DeleteBlueprintApiResponse,
@@ -198,6 +201,10 @@ export type GetBlueprintApiResponse =
 export type GetBlueprintApiArg = {
   /** UUID of a blueprint */
   id: string;
+  /** Filter by a specific version of the Blueprint we want to fetch.
+    Omit or pass -1 to fetch latest version.
+     */
+  version?: number;
 };
 export type DeleteBlueprintApiResponse =
   /** status 204 Successfully deleted */ void;