Skip to content

Feature/add table extra rows #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
santipalenque wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feature/add table extra rows #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
acdc55c
chore: adding discount row and change notes row
santipalenque May 5, 2026
a8eab95
chore: missing translations
santipalenque May 5, 2026
b3cbd2e
v5.0.19-beta.1
santipalenque May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "openstack-uicore-foundation",
"version": "5.0.16",
"version": "5.0.19-beta.1",
"description": "ui reactjs components for openstack marketing site",
"main": "lib/openstack-uicore-foundation.js",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export {useSnackbarMessage} from './mui/SnackbarNotification/Context'
export {default as MuiInfiniteTable} from './mui/infinite-table'
export {default as MuiEditableTable} from './mui/editable-table/mui-table-editable'
export {default as MuiTable} from './mui/table/mui-table'
export {TotalRow as MuiTotalRow, NotesRow as MuiNotesRow, FeeRow as MuiFeeRow, PaymentRow as MuiPaymentRow, RefundRow as MuiRefundRow} from './mui/table/extra-rows'
export {TotalRow as MuiTotalRow, NotesRow as MuiNotesRow, FeeRow as MuiFeeRow, PaymentRow as MuiPaymentRow, RefundRow as MuiRefundRow, DiscountRow as MuiDiscountRow} from './mui/table/extra-rows'
export {default as MuiFormikAsyncSelect} from './mui/formik-inputs/mui-formik-async-select'
export {default as MuiFormikCheckboxGroup} from './mui/formik-inputs/mui-formik-checkbox-group'
export {default as MuiFormikCheckbox} from './mui/formik-inputs/mui-formik-checkbox'
Expand Down
62 changes: 62 additions & 0 deletions src/components/mui/table/extra-rows/DiscountRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/**
* Copyright 2026 OpenStack Foundation
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* */

import React from "react";
import T from "i18n-react/dist/i18n-react";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import Typography from "@mui/material/Typography";
import { currencyAmountFromCents } from "../../../../utils/money";


const DiscountRow = ({ discount, discountTotal, colGap = 2, trailing = 0 }) => {

if (discountTotal === 0) return null;
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Guard discountTotal before formatting to prevent invalid output.

At Line 24, only === 0 is checked. If discountTotal is undefined/null/non-numeric, Line 51 can render an invalid amount. Normalize and validate first.

Proposed fix 
-  if (discountTotal === 0) return null;
+  const normalizedDiscountTotal = Number(discountTotal);
+  if (!Number.isFinite(normalizedDiscountTotal) || normalizedDiscountTotal === 0) return null;
...
-          -{currencyAmountFromCents(discountTotal)}
+          -{currencyAmountFromCents(normalizedDiscountTotal)}

Also applies to: 51-51

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/table/extra-rows/DiscountRow.jsx` at line 24, In
DiscountRow.jsx, validate and normalize the discountTotal before
formatting/printing: replace the current lone check (discountTotal === 0) with a
guard that treats null/undefined/non-numeric values as “no discount” and only
continues for finite non-zero numbers (e.g., use Number.isFinite(discountTotal)
or coerce via Number and check isFinite), then format the safe numeric value
when rendering; update the initial early-return in the DiscountRow component and
the place where discountTotal is passed to the formatter so invalid values never
reach the formatting call.


return (
<TableRow sx={{backgroundColor: "#2E7D3214"}}>
<TableCell>{T.translate("mui_table.dis")}</TableCell>
<TableCell>
<Typography
variant="body2"
sx={{ color: "success.main", fontWeight: 500 }}
>
{T.translate("mui_table.discount")}
</Typography>
</TableCell>
{[...Array(colGap)].map((_, i) => (
// eslint-disable-next-line react/no-array-index-key
<TableCell key={`pay-col-gap-${i}`} />
))}
<TableCell>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
{discount}
</Typography>
</TableCell>
<TableCell>
<Typography
variant="body2"
sx={{ color: "success.main", fontWeight: 500 }}
>
-{currencyAmountFromCents(discountTotal)}
</Typography>
</TableCell>
{[...Array(trailing)].map((_, i) => (
// eslint-disable-next-line react/no-array-index-key
<TableCell key={`pay-trailing-col-${i}`} sx={{ width: 40 }} />
))}
</TableRow>
);
};

export default DiscountRow;
13 changes: 10 additions & 3 deletions src/components/mui/table/extra-rows/NotesRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,22 @@ import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import * as React from "react";
import { Typography } from "@mui/material";
import T from "i18n-react";

const NotesRow = ({ colCount, note }) => (
const NotesRow = ({ colCount, note, showCode = false }) => {
const colSpan = showCode ? colCount - 1 : colCount;
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Clamp colSpan to a valid minimum to avoid invalid table layout.

At Line 21, colSpan can become 0, negative, or NaN (e.g., showCode=true with low/missing colCount). Clamp to at least 1 before passing it to TableCell.

Proposed fix 
-  const colSpan = showCode ? colCount - 1 : colCount;
+  const computedColSpan = showCode ? colCount - 1 : colCount;
+  const colSpan = Math.max(1, Number(computedColSpan) || 1);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const colSpan = showCode ? colCount - 1 : colCount;
const computedColSpan = showCode ? colCount - 1 : colCount;
const colSpan = Math.max(1, Number(computedColSpan) || 1);
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/table/extra-rows/NotesRow.jsx` at line 21, colSpan can
become 0/negative/NaN when showCode is true or colCount is missing; clamp it to
a minimum of 1 before passing to TableCell. Update the computation of colSpan
(the constant named colSpan) to coerce colCount to a number and use Math.max(1,
...) — e.g., derive a numericColCount from colCount (parseInt/Number with
fallback) and then set colSpan = Math.max(1, showCode ? numericColCount - 1 :
numericColCount) so TableCell always receives a valid span.

return (
<TableRow>
<TableCell sx={{ fontWeight: 800 }} colSpan={colCount}>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
{showCode && (
<TableCell>{T.translate("mui_table.note")}</TableCell>
)}
<TableCell sx={{fontWeight: 800}} colSpan={colSpan}>
<Typography variant="body2" sx={{color: "text.secondary"}}>
{note}
</Typography>
</TableCell>
</TableRow>
);
}

export default NotesRow;
1 change: 1 addition & 0 deletions src/components/mui/table/extra-rows/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ export { default as NotesRow } from "./NotesRow";
export { default as FeeRow } from "./FeeRow";
export { default as PaymentRow } from "./PaymentRow";
export { default as RefundRow } from "./RefundRow";
export { default as DiscountRow } from "./DiscountRow";
5 changes: 4 additions & 1 deletion src/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,10 @@
"ref": "REF",
"refund": "Refund",
"payfee": "PAYFEE",
"amount_due": "AMOUNT DUE"
"dis": "DIS",
"discount": "Discount",
"amount_due": "AMOUNT DUE",
"note": "NOTE"
},
"meta_fields": {
"delete_value_warning": "Please verify you want to delete the added value",
Expand Down
Loading