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

src: Update <Content> tag components

Browse source
This commit is contained in:
regexowl 2025-05-19 14:05:42 +02:00 • committed by Lucas Garfield
parent d98dd02fa3
commit 91577343df
38 changed files with 70 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Components/CreateImageWizard/steps/Details/index.tsx
View file

@ -48,7 +48,7 @@ const DetailsStep = () => {
<Title headingLevel="h1" size="xl">
Details
</Title>
<Content component="p">
<Content>
Enter a name to identify your blueprint. If no name is entered, the
images created from this blueprint will use the name of the parent
blueprint.

2
src/Components/CreateImageWizard/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
View file

@ -9,7 +9,7 @@ const FileSystemAutomaticPartition = () => {
return (
<Content>
<Content component={ContentVariants.h3}>Automatic partitioning</Content>
<Content component="p">
<Content>
The system automatically partitions your image storage depending on the
target environment(s). The target environment sometimes dictates all or
part of the partitioning scheme. Automatic partitioning applies the most

4
src/Components/CreateImageWizard/steps/FileSystem/FileSystemConfiguration.tsx
View file

@ -48,12 +48,12 @@ const FileSystemConfiguration = () => {
partition?.mountpoint?.includes('/usr')
) && <UsrSubDirectoriesDisabled />}
<Content>
<Content component="p">
<Content>
Create partitions for your image by defining mount points and minimum
sizes. Image builder creates partitions with a logical volume (LVM)
device type.
</Content>
<Content component="p">
<Content>
The order of partitions may change when the image is installed in
order to conform to best practices and ensure functionality.
<br></br>

2
src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx
View file

@ -46,7 +46,7 @@ export const MinimumSizePopover = () => {
maxWidth="30rem"
bodyContent={
<Content>
<Content component="p">
<Content>
Image Builder may extend this size based on requirements, selected
packages, and configurations.
</Content>

2
src/Components/CreateImageWizard/steps/FileSystem/index.tsx
View file

@ -22,7 +22,7 @@ const FileSystemStep = () => {
<Title headingLevel="h1" size="xl">
File system configuration
</Title>
<Content component="p">Define the partitioning of the image.</Content>
<Content>Define the partitioning of the image.</Content>
{hasIsoTargetOnly ? (
<FileSystemAutomaticPartition />
) : fileSystemConfigurationType === 'automatic' ? (

4
src/Components/CreateImageWizard/steps/Firewall/index.tsx
View file

@ -11,9 +11,7 @@ const FirewallStep = () => {
<Title headingLevel="h1" size="xl">
Firewall
</Title>
<Content component="p">
Customize firewall settings for your image.
</Content>
<Content>Customize firewall settings for your image.</Content>
<PortsInput />
<Services />
</Form>

4
src/Components/CreateImageWizard/steps/FirstBoot/index.tsx
View file

@ -52,7 +52,7 @@ const FirstBootStep = () => {
<Title headingLevel="h1" size="xl">
First boot configuration
</Title>
<Content component="p">
<Content>
Configure the image with a custom script that will execute on its first
boot.
</Content>
@ -62,7 +62,7 @@ const FirstBootStep = () => {
isInline
title="Important: please do not include sensitive information"
>
<Content component="p">
<Content>
Please ensure that your script does not contain any secrets,
passwords, or other sensitive data. All scripts should be crafted
without including confidential information to maintain security and

2
src/Components/CreateImageWizard/steps/Hostname/index.tsx
View file

@ -10,7 +10,7 @@ const HostnameStep = () => {
<Title headingLevel="h1" size="xl">
Hostname
</Title>
<Content component="p">Select a hostname for your image.</Content>
<Content>Select a hostname for your image.</Content>
<HostnameInput />
</Form>
);

8
src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
View file

@ -255,7 +255,7 @@ const TargetEnvironment = () => {
position="right"
bodyContent={
<Content>
<Content component="p">
<Content>
An OVA file is a virtual appliance used by
virtualization platforms such as VMware
vSphere. It is a package that contains files
@ -303,7 +303,7 @@ const TargetEnvironment = () => {
position="right"
bodyContent={
<Content>
<Content component="p">
<Content>
A VMDK file is a virtual disk that stores the
contents of a virtual machine. This disk has to
be imported into vSphere using govc import.vmdk,
@ -379,14 +379,14 @@ const TargetEnvironment = () => {
position="right"
headerContent={
<Content>
<Content component="p">
<Content>
WSL is not officially supported by Red Hat
</Content>
</Content>
}
bodyContent={
<Content>
<Content component="p">
<Content>
You can use RHEL on Microsoft&apos;s Windows Subsystem
for Linux (WSL) for development and learning use cases.
Red Hat supports WSL under the Validated Software

2
src/Components/CreateImageWizard/steps/ImageOutput/index.tsx
View file

@ -38,7 +38,7 @@ const ImageOutputStep = () => {
<Title headingLevel="h1" size="xl">
Image output
</Title>
<Content component="p">
<Content>
Images enables you to create customized blueprints, create custom images
from the blueprints, and push them to target environments.
<br />

4
src/Components/CreateImageWizard/steps/Kernel/index.tsx
View file

@ -11,9 +11,7 @@ const KernelStep = () => {
<Title headingLevel="h1" size="xl">
Kernel
</Title>
<Content component="p">
Customize kernel name and kernel arguments.
</Content>
<Content>Customize kernel name and kernel arguments.</Content>
<KernelName />
<KernelArguments />
</Form>

2
src/Components/CreateImageWizard/steps/Locale/index.tsx
View file

@ -11,7 +11,7 @@ const LocaleStep = () => {
<Title headingLevel="h1" size="xl">
Locale
</Title>
<Content component="p">Select the locale for your image.</Content>
<Content>Select the locale for your image.</Content>
<LanguagesDropDown />
<KeyboardDropDown />
</Form>

2
src/Components/CreateImageWizard/steps/Oscap/index.tsx
View file

@ -114,7 +114,7 @@ const OscapContent = () => {
<Title headingLevel="h1" size="xl">
{complianceEnabled ? 'Compliance' : 'OpenSCAP profile'}
</Title>
<Content component="p">
<Content>
Below you can select which Insights compliance policy or OpenSCAP
profile your image will be compliant to. Insights compliance allows the
use of tailored policies, whereas OpenSCAP gives you the default

4
src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx
View file

@ -170,7 +170,7 @@ const PackageRecommendations = () => {
onHide={() => setIsExpanded(false)}
bodyContent={
<Content>
<Content component="p">
<Content>
RHEL Lightspeed provides intelligent tools to
improve the productivity and efficiency of teams
using RHEL.
@ -209,7 +209,7 @@ const PackageRecommendations = () => {
{isSuccess && data && data?.packages && (
<>
<Content>
<Content component="p">
<Content>
Other users commonly add these packages with the ones you
selected.
</Content>

4
src/Components/CreateImageWizard/steps/Packages/Packages.tsx
View file

@ -1189,9 +1189,7 @@ const Packages = () => {
</Tbody>
</Table>
) : (
<Content component="p">
This group has no packages
</Content>
<Content>This group has no packages</Content>
)}
</div>
}

4
src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx
View file

@ -9,10 +9,10 @@ const PackageInfoNotAvailablePopover = () => {
headerContent="Package description"
bodyContent={
<Content>
<Content component="p">
<Content>
The package description provides more information about the package.
</Content>
<Content component="p">
<Content>
When editing an existing blueprint, you may see a &quot;Not
available&quot; value in the field because information about
previously added packages can not be fetched.

4
src/Components/CreateImageWizard/steps/Packages/components/RepoPopovers.tsx
View file

@ -8,7 +8,7 @@ export const IncludedReposPopover = () => {
<Popover
bodyContent={
<Content>
<Content component="p">
<Content>
View packages from the Red Hat repository and repositories
you&apos;ve selected.
</Content>
@ -33,7 +33,7 @@ export const OtherReposPopover = () => {
<Popover
bodyContent={
<Content>
<Content component="p">
<Content>
View packages from popular repositories and your other repositories
not included in the image.
</Content>

2
src/Components/CreateImageWizard/steps/Packages/index.tsx
View file

@ -16,7 +16,7 @@ const PackagesStep = () => {
<Title headingLevel="h1" size="xl">
Additional packages
</Title>
<Content component="p">
<Content>
Blueprints created with Images include all required packages.
</Content>
{!process.env.IS_ON_PREMISE && (

2
src/Components/CreateImageWizard/steps/Registration/ActivationKeyInformation.tsx
View file

@ -54,7 +54,7 @@ const ActivationKeyInformation = (): JSX.Element => {
<Popover
bodyContent={
<Content>
<Content component="p">
<Content>
The core repositories for your operating system version
are always enabled and do not need to be explicitly added
to the activation key.

2
src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx
View file

@ -262,7 +262,7 @@ const ActivationKeysList = () => {
<SelectList>{prepareSelectOptions()}</SelectList>
</Select>
<Content>
<Content component="p">
<Content>
Create and manage activation keys on the <ManageKeysButton />
</Content>
</Content>

4
src/Components/CreateImageWizard/steps/Registration/Registration.tsx
View file

@ -27,7 +27,7 @@ const InsightsPopover = () => {
minWidth="30rem"
bodyContent={
<Content>
<Content component="p">
<Content>
Red Hat Insights client provides actionable intelligence about your
Red Hat Enterprise Linux environments, helping to identify and
address operational and vulnerability risks before an issue results
@ -66,7 +66,7 @@ const RhcPopover = () => {
minWidth="30rem"
bodyContent={
<Content>
<Content component="p">
<Content>
Remote host configuration allows Red Hat Enterprise Linux hosts to
connect to Red Hat Insights. Remote host configuration is required
to use the Red Hat Insights Remediations service.

8
src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx
View file

@ -22,18 +22,16 @@ const PopoverActivation = () => {
maxWidth="35rem"
bodyContent={
<Content>
<Content component="p">
<Content>
Activation keys enable you to register a system with appropriate
subscriptions, system purpose, and repositories attached.
</Content>
<Content component="p">
<Content>
If using an activation key with command line registration, you must
provide your organization&apos;s ID.
</Content>
{orgId ? (
<Content component="p">
Your organization&apos;s ID is {orgId}
</Content>
<Content>Your organization&apos;s ID is {orgId}</Content>
) : (
<Spinner size="md" />
)}

2
src/Components/CreateImageWizard/steps/Registration/index.tsx
View file

@ -21,7 +21,7 @@ const RegistrationStep = () => {
<Title headingLevel="h1" size="xl">
Register systems using this image
</Title>
<Content component="p">
<Content>
You can either automatically register your systems with Red Hat to
enhance security and track your spending or choose to register your
system during initial boot.

2
src/Components/CreateImageWizard/steps/Repositories/components/UploadRepositoryLabel.tsx
View file

@ -9,7 +9,7 @@ const UploadRepositoryLabel = () => {
return (
<Tooltip
content={
<Content component="p">
<Content>
Upload repository: Snapshots will only be taken when new content is
uploaded.&nbsp;
<Button

2
src/Components/CreateImageWizard/steps/Repositories/index.tsx
View file

@ -37,7 +37,7 @@ const RepositoriesStep = () => {
<Title headingLevel="h1" size="xl">
Custom repositories
</Title>
<Content component="p">
<Content>
Select the linked custom repositories from which you can add packages to
the image.
<br />

4
src/Components/CreateImageWizard/steps/Review/index.tsx
View file

@ -19,9 +19,7 @@ const ReviewStep = () => {
<Title headingLevel="h1" size="xl">
Review {blueprintName} blueprint
</Title>
{blueprintDescription && (
<Content component="p">{blueprintDescription}</Content>
)}
{blueprintDescription && <Content>{blueprintDescription}</Content>}
<Review />
</Form>
);

4
src/Components/CreateImageWizard/steps/Services/index.tsx
View file

@ -10,9 +10,7 @@ const ServicesStep = () => {
<Title headingLevel="h1" size="xl">
Systemd services
</Title>
<Content component="p">
Enable, disable and mask systemd services.
</Content>
<Content>Enable, disable and mask systemd services.</Content>
<ServicesInput />
</Form>
);

4
src/Components/CreateImageWizard/steps/Snapshot/Snapshot.tsx
View file

@ -99,7 +99,7 @@ export default function Snapshot() {
Use latest content
</Title>
<Grid>
<Content component="p">
<Content>
Image Builder will automatically use the newest state of
repositories when building this image.
</Content>
@ -149,7 +149,7 @@ export default function Snapshot() {
</Flex>
</FormGroup>
<Grid>
<Content component="p">
<Content>
Image Builder will reflect the state of repositories based on the
selected date when building this image.
</Content>

2
src/Components/CreateImageWizard/steps/Snapshot/index.tsx
View file

@ -14,7 +14,7 @@ export default function SnapshotStep() {
Repeatable build
</Title>
<Grid>
<Content component="p">
<Content>
Control the consistency of the packages in the repository used to
build the image.
</Content>

4
src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx
View file

@ -58,11 +58,11 @@ const Aws = () => {
<Title headingLevel="h1" size="xl">
Target environment - Amazon Web Services
</Title>
<Content component="p">
<Content>
Your image will be uploaded to AWS and shared with the account you
provide below.
</Content>
<Content component="p">
<Content>
<b>The shared image will expire within 14 days.</b> To permanently
access the image, copy the image, which will be shared to your account
by Red Hat, to your own AWS account.

4
src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/index.tsx
View file

@ -68,12 +68,12 @@ const Azure = () => {
<Title headingLevel="h1" size="xl">
Target environment - Microsoft Azure
</Title>
<Content component="p">
<Content>
Upon build, Image Builder sends the image to the selected authorized
Azure account. The image will be uploaded to the resource group in the
subscription you specify.
</Content>
<Content component="p">
<Content>
To authorize Image Builder to push images to Microsoft Azure, the
account owner must configure Image Builder as an authorized application
for a specific tenant ID and give it the role of &quot;Contributor&quot;

15
src/Components/CreateImageWizard/steps/TargetEnvironment/Gcp/index.tsx
View file

@ -1,6 +1,13 @@
import React from 'react';
import { Radio, Content, Form, Title, FormGroup } from '@patternfly/react-core';
import {
Radio,
Content,
Form,
Title,
FormGroup,
ContentVariants,
} from '@patternfly/react-core';
import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
import {
@ -34,7 +41,7 @@ const Gcp = () => {
<Title headingLevel="h1" size="xl">
Target environment - Google Cloud Platform
</Title>
<Content component="p">
<Content>
Select how to share your image. The image you create can be used to
launch instances on GCP, regardless of which method you select.
</Content>
@ -44,7 +51,7 @@ const Gcp = () => {
label="Share image with a Google account"
name="radio-1"
description={
<Content component="p">
<Content component={ContentVariants.small}>
Your image will be uploaded to GCP and shared with the account you
provide below.
<b>The image expires in 14 days.</b> To keep permanent access to
@ -63,7 +70,7 @@ const Gcp = () => {
label="Share image with Red Hat Insights only"
name="radio-2"
description={
<Content component="p">
<Content component={ContentVariants.small}>
Your image will be uploaded to GCP and shared with Red Hat
Insights.
<b> The image expires in 14 days.</b> You cannot access or

2
src/Components/CreateImageWizard/steps/Timezone/index.tsx
View file

@ -11,7 +11,7 @@ const TimezoneStep = () => {
<Title headingLevel="h1" size="xl">
Timezone
</Title>
<Content component="p">Select a timezone for your image.</Content>
<Content>Select a timezone for your image.</Content>
<TimezoneDropDown />
<NtpServersInput />
</Form>

2
src/Components/CreateImageWizard/steps/Users/index.tsx
View file

@ -16,7 +16,7 @@ const UsersStep = () => {
<Title headingLevel="h1" size="xl">
Users
</Title>
<Content component="p">Add a user to your image.</Content>
<Content>Add a user to your image.</Content>
{users.length !== 0 ? <UserInfo /> : <EmptyUserState />}
</Form>
);

8
src/Components/ImagesTable/EmptyState.tsx
View file

@ -36,7 +36,7 @@ const EmptyBlueprintsImagesTable = () => (
variant={EmptyStateVariant.lg}
>
<EmptyStateBody>
<Content component="p">
<Content>
The selected blueprint version doesn&apos;t contain any images. Build
an image from this version, or adjust the filters.
</Content>
@ -63,7 +63,7 @@ const EmptyImagesTable = () => {
headingLevel="h4"
/>
<EmptyStateBody>
<Content component="p">
<Content>
Image builder is a tool for creating deployment-ready customized
system images: installation disks, virtual machines, cloud
vendor-specific images, and others. By using image builder, you
@ -71,10 +71,10 @@ const EmptyImagesTable = () => {
it eliminates the specific configurations required for each output
type.
</Content>
<Content component="p">
<Content>
There are no images yet. Create a blueprint to create images.
</Content>
<Content component="p">
<Content>
<Button
component="a"
target="_blank"

8
src/Components/LandingPage/LandingPage.tsx
View file

@ -101,13 +101,13 @@ export const LandingPage = () => {
body={
<div>
<Content>
<Content component="p">
<Content>
With RPM-DNF, you can manage the system software by
using the DNF package manager and updated RPM packages.
This is a simple and adaptive method of managing and
modifying the system over its lifecycle.
</Content>
<Content component="p">
<Content>
<Button
component="a"
target="_blank"
@ -136,7 +136,7 @@ export const LandingPage = () => {
header={'Immutable (OSTree)'}
body={
<Content>
<Content component="p">
<Content>
With OSTree, you can manage the system software by
referencing a central image repository. OSTree images
contain a complete operating system ready to be remotely
@ -145,7 +145,7 @@ export const LandingPage = () => {
address changes and keep the operating system unchanged.
The updates are quick, and the rollbacks are easy.
</Content>
<Content component="p">
<Content>
<Button
component="a"
target="_blank"

2
src/Components/LandingPage/NewAlert.tsx
View file

@ -73,7 +73,7 @@ export const NewAlert = ({ setShowAlert }: NewAlertPropTypes) => {
}
>
<Content>
<Content component="p">
<Content>
New options for blueprint customization are now available:
</Content>
<Content component="ul">

6
src/Components/sharedComponents/ImageBuilderHeader.tsx
View file

@ -43,7 +43,7 @@ const AboutImageBuilderPopover = () => {
headerContent={'About image builder'}
bodyContent={
<Content>
<Content component="p">
<Content>
Image builder is a tool for creating deployment-ready customized
system images: installation disks, virtual machines, cloud
vendor-specific images, and others. By using image builder, you can
@ -51,7 +51,7 @@ const AboutImageBuilderPopover = () => {
eliminates the specific configurations required for each output
type.
</Content>
<Content component="p">
<Content>
<Button
component="a"
target="_blank"
@ -64,7 +64,7 @@ const AboutImageBuilderPopover = () => {
Image builder for RPM-DNF documentation
</Button>
</Content>
<Content component="p">
<Content>
<Button
component="a"
target="_blank"