packages: load the oscap profile when available

The packages list is now pre populated with the customization packages
asked by the oscap profile the user has selected.

HMS-2077

src/Components/CreateImageWizard/formComponents/Oscap.js

@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 
 import { useGetOscapProfilesQuery } from '../../../store/imageBuilderApi';
 import { reinitFileSystemConfiguratioStep } from '../steps/fileSystemConfiguration';
+import { reinitPackagesStep } from '../steps/packages';
 
 /**
  * Every time there is change on this form step's state, reinitialise the steps
@@ -24,6 +25,7 @@ import { reinitFileSystemConfiguratioStep } from '../steps/fileSystemConfigurati
  */
 const reinitDependingSteps = (change) => {
   reinitFileSystemConfiguratioStep(change);
+  reinitPackagesStep(change);
 };
 
 /**

src/Components/CreateImageWizard/formComponents/Packages.js

@@ -30,7 +30,10 @@ import {
 import PropTypes from 'prop-types';
 
 import api from '../../../api';
-import { useGetArchitecturesQuery } from '../../../store/imageBuilderApi';
+import {
+  useGetArchitecturesQuery,
+  useGetOscapCustomizationsQuery,
+} from '../../../store/imageBuilderApi';
 
 const ExactMatch = ({
   pkgList,
@@ -126,6 +129,28 @@ const Packages = ({ getAllPackages, isSuccess }) => {
   );
   const firstInputElement = useRef(null);
 
+  const oscapPolicy = getState()?.values?.['oscap-policy'];
+
+  const { data: customizations, isSuccess: isSuccessCustomizations } =
+    useGetOscapCustomizationsQuery(
+      {
+        distribution: getState()?.values?.['release'],
+        profile: oscapPolicy,
+      },
+      {
+        skip: !oscapPolicy,
+      }
+    );
+  useEffect(() => {
+    if (customizations && customizations.packages && isSuccessCustomizations) {
+      const oscapPackages = {};
+      for (const pkg of customizations.packages) {
+        oscapPackages[pkg] = { name: pkg };
+      }
+      updateState(oscapPackages);
+    }
+  }, [customizations, isSuccessCustomizations]);
+
   // this effect only triggers on mount
   useEffect(() => {
     if (selectedPackages) {

src/Components/CreateImageWizard/steps/packages.js

@@ -7,6 +7,10 @@ import StepTemplate from './stepTemplate';
 
 import CustomButtons from '../formComponents/CustomButtons';
 
+export const reinitPackagesStep = (change) => {
+  change('selected-packages', undefined);
+};
+
 const packagesStep = {
   StepTemplate,
   id: 'wizard-systemconfiguration-packages',