Improve alignment and logic around Arch linux os version displays (#34420)

**Related issue:** Resolves #34214 

- Alignment in host summary fixed for both Firefox(L) and Chrome(R):
<img width="1728" height="221" alt="Screenshot 2025-10-16 at 6 38 39 PM"
src="https://github.com/user-attachments/assets/27d4489d-7a90-41bd-9b7d-53dfc95e4000"
/>

- Fix detection logic in Software > OS Versions table, render
tooltip-wrapped "rolling" there when appropriate

- [x] QA'd all new/changed functionality manually
This commit is contained in:
jacobshandling 2025-10-17 08:26:42 -07:00 committed by GitHub
parent 5f626e2a8c
commit 4dd9fe822e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 35 additions and 24 deletions

View file

@ -96,21 +96,22 @@ const generateDefaultTableHeaders = (
{
Header: "Version",
disableSortBy: true,
accessor: "version",
Cell: (cellProps: IVersionCellProps) => {
const value = cellProps.cell.value;
const { version, name_only } = cellProps.row.original;
if (
(cellProps.row.values.name_only === "Arch Linux" ||
cellProps.row.values.name_only === "Arch Linux ARM" ||
cellProps.row.values.name_only === "Manjaro Linux" ||
cellProps.row.values.name_only === "Manjaro Linux ARM") &&
value === "rolling"
[
"Arch Linux",
"Arch Linux ARM",
"Manjaro Linux",
"Manjaro Linux ARM",
].includes(name_only) &&
version === "rolling"
) {
return (
<TextCell value={<TooltipWrapperArchLinuxRolling capitalized />} />
);
}
return <TextCell value={value} />;
return <TextCell value={version} />;
},
},
{

View file

@ -254,22 +254,28 @@ const HostSummary = ({
const renderOperatingSystemSummary = () => {
// No tooltip if minimum version is not set, including all Windows, Linux, ChromeOS, Android operating systems
if (!osVersionRequirement?.minimum_version) {
let value = summaryData.os_version;
if (
value === "Arch Linux rolling" ||
value === "Arch Linux ARM rolling" ||
value === "Manjaro Linux rolling" ||
value === "Manjaro Linux ARM rolling"
) {
const archLinuxPrefix = value.slice(0, -8); // removing lowercase "rolling" suffix
value = (
<>
{archLinuxPrefix}&nbsp;
<TooltipWrapperArchLinuxRolling />
</>
);
}
return <DataSet title="Operating system" value={value} />;
const version = summaryData.os_version;
const versionForRender = [
"Arch Linux rolling",
"Arch Linux ARM rolling",
"Manjaro Linux rolling",
"Manjaro Linux ARM rolling",
].includes(version) ? (
// wrap a tooltip aroun the "rolling" suffix
<>
{version.slice(0, -8)}
<TooltipWrapperArchLinuxRolling />
</>
) : (
version
);
return (
<DataSet
title="Operating system"
value={versionForRender}
className={`${baseClass}__os-data-set`}
/>
);
}
const osVersionWithoutPrefix = removeOSPrefix(summaryData.os_version);

View file

@ -4,6 +4,10 @@
padding: $pad-xxlarge;
flex-wrap: wrap;
&__os-data-set dd {
align-items: baseline;
}
// Properly vertically aligns host issue icon
.host-issue {
display: flex;