particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

V2Wizard: Deduplicate minimum size popover and set width

Browse source 
This sets a maximum width to the minimum size popover. Also moved code to a reusable component.
This commit is contained in:
regexowl 2024-04-24 16:59:03 +02:00 • committed by Lucas Garfield
parent 99da1e2957
commit 47a2653a9f
2 changed files with 29 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemTable.tsx
View file

@ -21,6 +21,31 @@ import {
selectPartitions,
} from '../../../../store/wizardSlice';
export const MinimumSizePopover = () => {
return (
<Popover
maxWidth="30rem"
bodyContent={
<TextContent>
<Text>
Image Builder may extend this size based on requirements, selected
packages, and configurations.
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="File system configuration info"
aria-describedby="file-system-configuration-info"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
>
<HelpIcon />
</Button>
</Popover>
);
};
const FileSystemTable = () => {
const [draggedItemId, setDraggedItemId] = useState<string | null>(null);
const [draggingToItemIndex, setDraggingToItemIndex] = useState<number | null>(
@ -170,27 +195,7 @@ const FileSystemTable = () => {
<Th></Th>
<Th>Type</Th>
<Th>
Minimum size
<Popover
hasAutoWidth
bodyContent={
<TextContent>
<Text>
Image Builder may extend this size based on requirements,
selected packages, and configurations.
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="File system configuration info"
aria-describedby="file-system-configuration-info"
className="pf-c-form__group-label-help"
>
<HelpIcon />
</Button>
</Popover>
Minimum size <MinimumSizePopover />
</Th>
<Th />
<Th />

25
src/Components/CreateImageWizardV2/steps/Review/ReviewStepTextLists.tsx
View file

@ -13,7 +13,7 @@ import {
TextVariants,
FormGroup,
} from '@patternfly/react-core';
import { ExclamationTriangleIcon, HelpIcon } from '@patternfly/react-icons';
import { ExclamationTriangleIcon } from '@patternfly/react-icons';
import ActivationKeyInformation from './../Registration/ActivationKeyInformation';
import { PackagesTable, RepositoriesTable } from './ReviewStepTables';
@ -53,6 +53,7 @@ import {
selectRecommendedRepositories,
} from '../../../../store/wizardSlice';
import { toMonthAndYear } from '../../../../Utilities/time';
import { MinimumSizePopover } from '../FileSystem/FileSystemTable';
import { MajorReleasesLifecyclesChart } from '../ImageOutput/ReleaseLifecycle';
import OscapProfileInformation from '../Oscap/OscapProfileInformation';
import { PopoverActivation } from '../Registration/ActivationKeysList';
@ -147,27 +148,7 @@ export const FSCList = () => {
{fileSystemPartitionMode === 'manual' && (
<>
<TextListItem component={TextListItemVariants.dt}>
Image size (minimum)
<Popover
hasAutoWidth
bodyContent={
<TextContent>
<Text>
Image Builder may extend this size based on requirements,
selected packages, and configurations.
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="File system configuration info"
aria-describedby="file-system-configuration-info"
className="pf-c-form__group-label-help"
>
<HelpIcon />
</Button>
</Popover>
Image size (minimum) <MinimumSizePopover />
</TextListItem>
<MinSize />
</>