V2Wizard: Create a folder for Packages step
This creates a new folder for the Packages step and copies over needed file: - Packages.tsx
This commit is contained in:
regexowl
Lucas Garfield
parent
7183d8d88b
commit
607bd6ed45
1 changed files with 545 additions and 0 deletions
545
src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx
Normal file
545
src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx
Normal file
|
|
@ -0,0 +1,545 @@
|
||||||
|
import React, {
|
||||||
|
useCallback,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
|
||||||
|
import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Divider,
|
||||||
|
DualListSelector,
|
||||||
|
DualListSelectorControl,
|
||||||
|
DualListSelectorControlsWrapper,
|
||||||
|
DualListSelectorList,
|
||||||
|
DualListSelectorListItem,
|
||||||
|
DualListSelectorPane,
|
||||||
|
SearchInput,
|
||||||
|
TextContent,
|
||||||
|
} from '@patternfly/react-core';
|
||||||
|
import {
|
||||||
|
AngleDoubleLeftIcon,
|
||||||
|
AngleDoubleRightIcon,
|
||||||
|
AngleLeftIcon,
|
||||||
|
AngleRightIcon,
|
||||||
|
} from '@patternfly/react-icons';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import api from '../../../api';
|
||||||
|
import {
|
||||||
|
useGetArchitecturesQuery,
|
||||||
|
useGetOscapCustomizationsQuery,
|
||||||
|
} from '../../../store/imageBuilderApi';
|
||||||
|
|
||||||
|
const ExactMatch = ({
|
||||||
|
pkgList,
|
||||||
|
search,
|
||||||
|
chosenPackages,
|
||||||
|
selectedAvailablePackages,
|
||||||
|
handleSelectAvailableFunc,
|
||||||
|
}) => {
|
||||||
|
const match = pkgList.find((pkg) => pkg.name === search);
|
||||||
|
return (
|
||||||
|
<DualListSelectorListItem
|
||||||
|
data-testid={`exact-match-${match.name}`}
|
||||||
|
isDisabled={chosenPackages[match.name] ? true : false}
|
||||||
|
isSelected={selectedAvailablePackages.has(match.name)}
|
||||||
|
onOptionSelect={(e) => handleSelectAvailableFunc(e, match.name)}
|
||||||
|
>
|
||||||
|
<TextContent key={`${match.name}`}>
|
||||||
|
<small className="pf-u-mb-sm">Exact match</small>
|
||||||
|
<span className="pf-c-dual-list-selector__item-text">{match.name}</span>
|
||||||
|
<small>{match.summary}</small>
|
||||||
|
<Divider />
|
||||||
|
</TextContent>
|
||||||
|
</DualListSelectorListItem>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RedHatPackages = ({ defaultArch }) => {
|
||||||
|
const { getState } = useFormApi();
|
||||||
|
const distribution = getState()?.values?.release;
|
||||||
|
const arch = getState()?.values?.arch;
|
||||||
|
const { data: distributionInformation, isSuccess: isSuccessDistroInfo } =
|
||||||
|
useGetArchitecturesQuery({ distribution });
|
||||||
|
|
||||||
|
const getAllPackages = async (packagesSearchName) => {
|
||||||
|
// if the env is stage beta then use content-sources api
|
||||||
|
// else use image-builder api
|
||||||
|
if (getState()?.values?.contentSourcesEnabled) {
|
||||||
|
const filteredByArch = distributionInformation.find(
|
||||||
|
(info) => info.arch === arch
|
||||||
|
);
|
||||||
|
const repoUrls = filteredByArch.repositories.map((repo) => repo.baseurl);
|
||||||
|
return await api.getPackagesContentSources(repoUrls, packagesSearchName);
|
||||||
|
} else {
|
||||||
|
const args = [
|
||||||
|
getState()?.values?.release,
|
||||||
|
getState()?.values?.architecture || defaultArch,
|
||||||
|
packagesSearchName,
|
||||||
|
];
|
||||||
|
const response = await api.getPackages(...args);
|
||||||
|
let { data } = response;
|
||||||
|
const { meta } = response;
|
||||||
|
if (data?.length === meta.count) {
|
||||||
|
return data;
|
||||||
|
} else if (data) {
|
||||||
|
({ data } = await api.getPackages(...args, meta.count));
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Packages getAllPackages={getAllPackages} isSuccess={isSuccessDistroInfo} />
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ContentSourcesPackages = () => {
|
||||||
|
const { getState } = useFormApi();
|
||||||
|
|
||||||
|
const getAllPackages = async (packagesSearchName) => {
|
||||||
|
const repos = getState()?.values?.['payload-repositories'];
|
||||||
|
const repoUrls = repos?.map((repo) => repo.baseurl);
|
||||||
|
return await api.getPackagesContentSources(repoUrls, packagesSearchName);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Packages getAllPackages={getAllPackages} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Packages = ({ getAllPackages, isSuccess }) => {
|
||||||
|
const { currentStep } = useContext(WizardContext);
|
||||||
|
const { change, getState } = useFormApi();
|
||||||
|
const [packagesSearchName, setPackagesSearchName] = useState(undefined);
|
||||||
|
const [filterChosen, setFilterChosen] = useState('');
|
||||||
|
const [chosenPackages, setChosenPackages] = useState({});
|
||||||
|
const [focus, setFocus] = useState('');
|
||||||
|
const selectedPackages = getState()?.values?.['selected-packages'];
|
||||||
|
const [availablePackages, setAvailablePackages] = useState(undefined);
|
||||||
|
const [selectedAvailablePackages, setSelectedAvailablePackages] = useState(
|
||||||
|
new Set()
|
||||||
|
);
|
||||||
|
const [selectedChosenPackages, setSelectedChosenPackages] = useState(
|
||||||
|
new Set()
|
||||||
|
);
|
||||||
|
const firstInputElement = useRef(null);
|
||||||
|
|
||||||
|
const oscapProfile = getState()?.values?.['oscap-profile'];
|
||||||
|
|
||||||
|
const { data: customizations, isSuccess: isSuccessCustomizations } =
|
||||||
|
useGetOscapCustomizationsQuery(
|
||||||
|
{
|
||||||
|
distribution: getState()?.values?.['release'],
|
||||||
|
profile: oscapProfile,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
skip: !oscapProfile,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
useEffect(() => {
|
||||||
|
if (customizations && customizations.packages && isSuccessCustomizations) {
|
||||||
|
const oscapPackages = {};
|
||||||
|
for (const pkg of customizations.packages) {
|
||||||
|
oscapPackages[pkg] = { name: pkg };
|
||||||
|
}
|
||||||
|
updateState(oscapPackages);
|
||||||
|
}
|
||||||
|
}, [customizations, isSuccessCustomizations, updateState]);
|
||||||
|
|
||||||
|
// this effect only triggers on mount
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedPackages) {
|
||||||
|
const newChosenPackages = {};
|
||||||
|
for (const pkg of selectedPackages) {
|
||||||
|
newChosenPackages[pkg.name] = pkg;
|
||||||
|
}
|
||||||
|
setChosenPackages(newChosenPackages);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isSuccess) {
|
||||||
|
firstInputElement.current?.focus();
|
||||||
|
}
|
||||||
|
}, [isSuccess]);
|
||||||
|
|
||||||
|
const searchResultsComparator = useCallback((searchTerm) => {
|
||||||
|
return (a, b) => {
|
||||||
|
a = a.name.toLowerCase();
|
||||||
|
b = b.name.toLowerCase();
|
||||||
|
|
||||||
|
// check exact match first
|
||||||
|
if (a === searchTerm) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (b === searchTerm) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// check for packages that start with the search term
|
||||||
|
if (a.startsWith(searchTerm) && !b.startsWith(searchTerm)) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (b.startsWith(searchTerm) && !a.startsWith(searchTerm)) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if both (or neither) start with the search term
|
||||||
|
// sort alphabetically
|
||||||
|
if (a < b) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (b < a) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const availablePackagesDisplayList = useMemo(() => {
|
||||||
|
if (availablePackages === undefined) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const availablePackagesList = Object.values(availablePackages).sort(
|
||||||
|
searchResultsComparator(packagesSearchName)
|
||||||
|
);
|
||||||
|
return availablePackagesList;
|
||||||
|
}, [availablePackages, packagesSearchName, searchResultsComparator]);
|
||||||
|
|
||||||
|
const chosenPackagesDisplayList = useMemo(() => {
|
||||||
|
const chosenPackagesList = Object.values(chosenPackages)
|
||||||
|
.filter((pkg) => (pkg.name.includes(filterChosen) ? true : false))
|
||||||
|
.sort(searchResultsComparator(filterChosen));
|
||||||
|
return chosenPackagesList;
|
||||||
|
}, [chosenPackages, filterChosen, searchResultsComparator]);
|
||||||
|
|
||||||
|
// call api to list available packages
|
||||||
|
const handleAvailablePackagesSearch = async () => {
|
||||||
|
const packageList = await getAllPackages(packagesSearchName);
|
||||||
|
// If no packages are found, Image Builder returns null, while
|
||||||
|
// Content Sources returns an empty array [].
|
||||||
|
if (packageList) {
|
||||||
|
const newAvailablePackages = {};
|
||||||
|
for (const pkg of packageList) {
|
||||||
|
newAvailablePackages[pkg.name] = pkg;
|
||||||
|
}
|
||||||
|
setAvailablePackages(newAvailablePackages);
|
||||||
|
} else {
|
||||||
|
setAvailablePackages([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const keydownHandler = (event) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
if (focus === 'available') {
|
||||||
|
event.stopPropagation();
|
||||||
|
handleAvailablePackagesSearch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.addEventListener('keydown', keydownHandler, true);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', keydownHandler, true);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const updateState = useCallback(
|
||||||
|
(newChosenPackages) => {
|
||||||
|
setSelectedAvailablePackages(new Set());
|
||||||
|
setSelectedChosenPackages(new Set());
|
||||||
|
setChosenPackages(newChosenPackages);
|
||||||
|
change('selected-packages', Object.values(newChosenPackages));
|
||||||
|
},
|
||||||
|
[change]
|
||||||
|
);
|
||||||
|
|
||||||
|
const moveSelectedToChosen = () => {
|
||||||
|
const newChosenPackages = { ...chosenPackages };
|
||||||
|
for (const pkgName of selectedAvailablePackages) {
|
||||||
|
newChosenPackages[pkgName] = { ...availablePackages[pkgName] };
|
||||||
|
}
|
||||||
|
updateState(newChosenPackages);
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveAllToChosen = () => {
|
||||||
|
const newChosenPackages = { ...chosenPackages, ...availablePackages };
|
||||||
|
updateState(newChosenPackages);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeSelectedFromChosen = () => {
|
||||||
|
const newChosenPackages = {};
|
||||||
|
for (const pkgName in chosenPackages) {
|
||||||
|
if (!selectedChosenPackages.has(pkgName)) {
|
||||||
|
newChosenPackages[pkgName] = { ...chosenPackages[pkgName] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
updateState(newChosenPackages);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeAllFromChosen = () => {
|
||||||
|
const newChosenPackages = {};
|
||||||
|
updateState(newChosenPackages);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectAvailable = (event, pkgName) => {
|
||||||
|
const newSelected = new Set(selectedAvailablePackages);
|
||||||
|
newSelected.has(pkgName)
|
||||||
|
? newSelected.delete(pkgName)
|
||||||
|
: newSelected.add(pkgName);
|
||||||
|
setSelectedAvailablePackages(newSelected);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectChosen = (event, pkgName) => {
|
||||||
|
const newSelected = new Set(selectedChosenPackages);
|
||||||
|
newSelected.has(pkgName)
|
||||||
|
? newSelected.delete(pkgName)
|
||||||
|
: newSelected.add(pkgName);
|
||||||
|
setSelectedChosenPackages(newSelected);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearAvailableSearch = () => {
|
||||||
|
setPackagesSearchName('');
|
||||||
|
setAvailablePackages(undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearChosenSearch = () => {
|
||||||
|
setFilterChosen('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
// vv REMOVE WHEN CONTENT REACHABLE AGAIN
|
||||||
|
currentStep.name === 'packages-content-sources' && (
|
||||||
|
<Alert title="Repositories unavailable" variant="warning" isInline>
|
||||||
|
The Content service cannot be reached, please check back later.
|
||||||
|
</Alert>
|
||||||
|
// ^^ REMOVE WHEN CONTENT REACHABLE AGAIN
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<DualListSelector>
|
||||||
|
<DualListSelectorPane
|
||||||
|
title="Available packages"
|
||||||
|
searchInput={
|
||||||
|
<>
|
||||||
|
<SearchInput
|
||||||
|
placeholder="Search for a package"
|
||||||
|
data-testid="search-available-pkgs-input"
|
||||||
|
value={packagesSearchName}
|
||||||
|
ref={firstInputElement}
|
||||||
|
onFocus={() => setFocus('available')}
|
||||||
|
onBlur={() => setFocus('')}
|
||||||
|
onChange={(_, val) => setPackagesSearchName(val)}
|
||||||
|
submitSearchButtonLabel="Search button for available packages"
|
||||||
|
onSearch={handleAvailablePackagesSearch}
|
||||||
|
resetButtonLabel="Clear available packages search"
|
||||||
|
onClear={handleClearAvailableSearch}
|
||||||
|
// Temporarily disable search input for custom packages
|
||||||
|
isDisabled={currentStep.name === 'packages' ? !isSuccess : true}
|
||||||
|
/>
|
||||||
|
{availablePackagesDisplayList.length >= 100 && (
|
||||||
|
<Alert
|
||||||
|
title="Over 100 results found. Refine your search."
|
||||||
|
variant="warning"
|
||||||
|
isPlain
|
||||||
|
isInline
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
status={
|
||||||
|
selectedAvailablePackages.size > 0
|
||||||
|
? `${selectedAvailablePackages.size}
|
||||||
|
of ${availablePackagesDisplayList.length} items`
|
||||||
|
: `${availablePackagesDisplayList.length} items`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<DualListSelectorList data-testid="available-pkgs-list">
|
||||||
|
{availablePackages === undefined ? (
|
||||||
|
<p className="pf-u-text-align-center pf-u-mt-md">
|
||||||
|
Search above to add additional
|
||||||
|
<br />
|
||||||
|
packages to your image
|
||||||
|
</p>
|
||||||
|
) : availablePackagesDisplayList.length === 0 ? (
|
||||||
|
<>
|
||||||
|
<p className="pf-u-text-align-center pf-u-mt-md pf-u-font-size-lg pf-u-font-weight-bold">
|
||||||
|
No results found
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<p className="pf-u-text-align-center pf-u-mt-md">
|
||||||
|
Adjust your search and try again
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
) : availablePackagesDisplayList.length >= 100 ? (
|
||||||
|
<>
|
||||||
|
{availablePackagesDisplayList.some(
|
||||||
|
(pkg) => pkg.name === packagesSearchName
|
||||||
|
) && (
|
||||||
|
<ExactMatch
|
||||||
|
pkgList={availablePackagesDisplayList}
|
||||||
|
search={packagesSearchName}
|
||||||
|
chosenPackages={chosenPackages}
|
||||||
|
selectedAvailablePackages={selectedAvailablePackages}
|
||||||
|
handleSelectAvailableFunc={handleSelectAvailable}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<p className="pf-u-text-align-center pf-u-mt-md pf-u-font-size-lg pf-u-font-weight-bold">
|
||||||
|
Too many results to display
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<p className="pf-u-text-align-center pf-u-mt-md">
|
||||||
|
Please make the search more specific
|
||||||
|
<br />
|
||||||
|
and try again
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
availablePackagesDisplayList.map((pkg) => {
|
||||||
|
return (
|
||||||
|
<DualListSelectorListItem
|
||||||
|
data-testid={`available-pkgs-${pkg.name}`}
|
||||||
|
key={pkg.name}
|
||||||
|
isDisabled={chosenPackages[pkg.name] ? true : false}
|
||||||
|
isSelected={selectedAvailablePackages.has(pkg.name)}
|
||||||
|
onOptionSelect={(e) => handleSelectAvailable(e, pkg.name)}
|
||||||
|
>
|
||||||
|
<TextContent key={`${pkg.name}`}>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
chosenPackages[pkg.name] && 'pf-v5-u-color-400'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{pkg.name}
|
||||||
|
</span>
|
||||||
|
<small>{pkg.summary}</small>
|
||||||
|
</TextContent>
|
||||||
|
</DualListSelectorListItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</DualListSelectorList>
|
||||||
|
</DualListSelectorPane>
|
||||||
|
<DualListSelectorControlsWrapper aria-label="Selector controls">
|
||||||
|
<DualListSelectorControl
|
||||||
|
isDisabled={selectedAvailablePackages.size === 0}
|
||||||
|
onClick={() => moveSelectedToChosen()}
|
||||||
|
aria-label="Add selected"
|
||||||
|
tooltipContent="Add selected"
|
||||||
|
>
|
||||||
|
<AngleRightIcon />
|
||||||
|
</DualListSelectorControl>
|
||||||
|
<DualListSelectorControl
|
||||||
|
isDisabled={
|
||||||
|
availablePackagesDisplayList.length === 0 ||
|
||||||
|
// also disable the "Add all" button if there are too many matches
|
||||||
|
// (even if there's an exact match)
|
||||||
|
availablePackagesDisplayList.length >= 100
|
||||||
|
}
|
||||||
|
onClick={() => moveAllToChosen()}
|
||||||
|
aria-label="Add all"
|
||||||
|
tooltipContent="Add all"
|
||||||
|
>
|
||||||
|
<AngleDoubleRightIcon />
|
||||||
|
</DualListSelectorControl>
|
||||||
|
<DualListSelectorControl
|
||||||
|
isDisabled={Object.values(chosenPackages).length === 0}
|
||||||
|
onClick={() => removeAllFromChosen()}
|
||||||
|
aria-label="Remove all"
|
||||||
|
tooltipContent="Remove all"
|
||||||
|
>
|
||||||
|
<AngleDoubleLeftIcon />
|
||||||
|
</DualListSelectorControl>
|
||||||
|
<DualListSelectorControl
|
||||||
|
onClick={() => removeSelectedFromChosen()}
|
||||||
|
isDisabled={selectedChosenPackages.size === 0}
|
||||||
|
aria-label="Remove selected"
|
||||||
|
tooltipContent="Remove selected"
|
||||||
|
>
|
||||||
|
<AngleLeftIcon />
|
||||||
|
</DualListSelectorControl>
|
||||||
|
</DualListSelectorControlsWrapper>
|
||||||
|
<DualListSelectorPane
|
||||||
|
title="Chosen packages"
|
||||||
|
searchInput={
|
||||||
|
<SearchInput
|
||||||
|
placeholder="Search for a package"
|
||||||
|
data-testid="search-chosen-pkgs-input"
|
||||||
|
value={filterChosen}
|
||||||
|
onFocus={() => setFocus('chosen')}
|
||||||
|
onBlur={() => setFocus('')}
|
||||||
|
onChange={(_, val) => setFilterChosen(val)}
|
||||||
|
resetButtonLabel="Clear chosen packages search"
|
||||||
|
onClear={handleClearChosenSearch}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
status={
|
||||||
|
selectedChosenPackages.size > 0
|
||||||
|
? `${selectedChosenPackages.size}
|
||||||
|
of ${chosenPackagesDisplayList.length} items`
|
||||||
|
: `${chosenPackagesDisplayList.length} items`
|
||||||
|
}
|
||||||
|
isChosen
|
||||||
|
>
|
||||||
|
<DualListSelectorList data-testid="chosen-pkgs-list">
|
||||||
|
{Object.values(chosenPackages).length === 0 ? (
|
||||||
|
<p className="pf-u-text-align-center pf-u-mt-md">
|
||||||
|
No packages added
|
||||||
|
</p>
|
||||||
|
) : chosenPackagesDisplayList.length === 0 ? (
|
||||||
|
<p className="pf-u-text-align-center pf-u-mt-md">
|
||||||
|
No packages found
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
chosenPackagesDisplayList.map((pkg) => {
|
||||||
|
return (
|
||||||
|
<DualListSelectorListItem
|
||||||
|
data-testid={`selected-pkgs-${pkg.name}`}
|
||||||
|
key={pkg.name}
|
||||||
|
isSelected={selectedChosenPackages.has(pkg.name)}
|
||||||
|
onOptionSelect={(e) => handleSelectChosen(e, pkg.name)}
|
||||||
|
>
|
||||||
|
<TextContent key={`${pkg.name}`}>
|
||||||
|
<span className="pf-c-dual-list-selector__item-text">
|
||||||
|
{pkg.name}
|
||||||
|
</span>
|
||||||
|
<small>{pkg.summary}</small>
|
||||||
|
</TextContent>
|
||||||
|
</DualListSelectorListItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</DualListSelectorList>
|
||||||
|
</DualListSelectorPane>
|
||||||
|
</DualListSelector>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ExactMatch.propTypes = {
|
||||||
|
pkgList: PropTypes.arrayOf(PropTypes.object),
|
||||||
|
search: PropTypes.string,
|
||||||
|
chosenPackages: PropTypes.object,
|
||||||
|
selectedAvailablePackages: PropTypes.object,
|
||||||
|
handleSelectAvailableFunc: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
RedHatPackages.propTypes = {
|
||||||
|
defaultArch: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
Packages.propTypes = {
|
||||||
|
getAllPackages: PropTypes.func,
|
||||||
|
isSuccess: PropTypes.bool,
|
||||||
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue