Skip to content

Commit 057df4b

Browse files
yomattersyomatters
committed
Merge branch 'ramps-100-variable-marketplace'
2 parents f29daaa + 8039697 commit 057df4b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+4738
-8047
lines changed

‎.github/workflows/create-release.yml

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ on:
44
push:
55
branches:
66
- main
7+
- ramps-100-variable-marketplace
78

89
jobs:
910
release:
@@ -22,6 +23,7 @@ jobs:
2223
uses: googleapis/release-please-action@v4
2324
with:
2425
release-type: node
26+
target-branch: ${{ github.ref_name }}
2527

2628
build-publish:
2729
name: Build and publish module

‎package-lock.json

+2,020-5,483
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/edit-resource/AddNewModal.jsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import PropTypes from "prop-types";
2+
3+
export const AddNewModal = ({
4+
show,
5+
onClose,
6+
title,
7+
children,
8+
onSave,
9+
buttonText,
10+
}) => {
11+
if (!show) {
12+
return null;
13+
}
14+
15+
return (
16+
<div
17+
style={{
18+
position: "fixed",
19+
top: 0,
20+
left: 0,
21+
width: "100%",
22+
height: "100%",
23+
backgroundColor: "rgba(0, 0, 0, 0.8)",
24+
display: "flex",
25+
alignItems: "center",
26+
zIndex: 1050,
27+
}}
28+
>
29+
<div
30+
className="modal fade in"
31+
tabIndex="-1"
32+
role="dialog"
33+
aria-hidden="true"
34+
style={{
35+
width: "90%",
36+
maxWidth: "600px",
37+
maxHeight: "90%",
38+
overflow: "auto",
39+
backgroundColor: "white",
40+
position: "relative",
41+
}}
42+
>
43+
<div className="modal-dialog" role="document">
44+
<div className="modal-content">
45+
<div className="modal-header">
46+
<button
47+
type="button"
48+
className="close"
49+
data-dismiss="modal"
50+
onClick={onClose}
51+
aria-label="Close"
52+
>
53+
<h3 aria-hidden="true" className="text-danger">
54+
&times;
55+
</h3>
56+
</button>
57+
<h3 className="modal-title">{title}</h3>
58+
</div>
59+
<div className="modal-body">{children}</div>
60+
<div
61+
className="modal-footer"
62+
style={{
63+
padding: "15px",
64+
textAlign: "right",
65+
borderTop: "1px solid #e5e5e5",
66+
backgroundColor: "#f8f9fa",
67+
}}
68+
>
69+
<button className="btn btn-success" onClick={onSave}>
70+
{buttonText}
71+
</button>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
);
78+
};
79+
80+
AddNewModal.propTypes = {
81+
show: PropTypes.bool.isRequired,
82+
onClose: PropTypes.func.isRequired,
83+
title: PropTypes.string.isRequired,
84+
children: PropTypes.node.isRequired,
85+
onSave: PropTypes.func.isRequired,
86+
buttonText: PropTypes.string,
87+
};

‎src/edit-resource/AdvancedSettingsSection.jsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import PropTypes from "prop-types";
2+
import style from "./AdvancedSettingsSection.module.scss";
3+
4+
export const AdvancedSettingsSection = ({
5+
headerText,
6+
header,
7+
children,
8+
isEditing = false,
9+
onEditingChange,
10+
warningMessage = "",
11+
}) => {
12+
const altWarningBanner = headerText && headerText.type === "label";
13+
return (
14+
<div className={style["advanced-settings"]}>
15+
{(headerText || header) && (
16+
<div className={style["header-wrapper"]}>
17+
{headerText}
18+
{header && (
19+
<div
20+
className={`${style["header-buttons-container"]} ${
21+
!isEditing ? style["blurred"] : ""
22+
}`}
23+
>
24+
{header}
25+
</div>
26+
)}
27+
</div>
28+
)}
29+
<div style={{ width: "100%" }}>
30+
{!isEditing && (
31+
<div
32+
className={
33+
altWarningBanner
34+
? `${style["alt-warning-banner"]}`
35+
: style["warning-banner"]
36+
}
37+
>
38+
<span className={style["warning-text"]}>
39+
<strong>CAUTION! </strong> {warningMessage}
40+
</span>
41+
<button
42+
className="btn btn-danger"
43+
onClick={() => onEditingChange(true)}
44+
>
45+
I understand the risks
46+
</button>
47+
</div>
48+
)}
49+
<div
50+
className={`${style["content-container"]} ${
51+
!isEditing ? style["blurred"] : ""
52+
}`}
53+
>
54+
{children}
55+
</div>
56+
</div>
57+
</div>
58+
);
59+
};
60+
61+
AdvancedSettingsSection.propTypes = {
62+
headerText: PropTypes.node,
63+
header: PropTypes.node,
64+
children: PropTypes.node.isRequired,
65+
isEditing: PropTypes.bool,
66+
onEditingChange: PropTypes.func.isRequired,
67+
warningMessage: PropTypes.string,
68+
};

‎src/edit-resource/AdvancedSettingsSection.module.scss

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.advanced-settings {
2+
position: relative;
3+
}
4+
5+
.header-wrapper {
6+
display: flex;
7+
justify-content: space-between;
8+
align-items: center;
9+
}
10+
11+
.content-container {
12+
transition: filter 0.3s ease;
13+
border-radius: 4px;
14+
}
15+
16+
.blurred {
17+
filter: blur(4px) brightness(0.95);
18+
pointer-events: none;
19+
}
20+
21+
.warning-banner {
22+
position: absolute;
23+
top: 50%;
24+
left: 0;
25+
right: 0;
26+
transform: translateY(-50%);
27+
z-index: 1;
28+
display: flex;
29+
align-items: center;
30+
justify-content: space-between;
31+
padding: 0.75rem;
32+
background-color: #fff3cd;
33+
border: 1px solid #ffeeba;
34+
border-radius: 4px;
35+
margin: 0 1rem;
36+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
37+
color: #856404;
38+
}
39+
40+
.alt-warning-banner {
41+
composes: warning-banner;
42+
position: relative;
43+
transform: none;
44+
margin: 0 0 1rem;
45+
height: 18px;
46+
max-width: 750px;
47+
padding: 0.75rem;
48+
}

‎src/edit-resource/AllocationTypesGrid.jsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import Grid from "../shared/Grid";
4+
import style from "./AllocationTypesGrid.module.scss";
5+
6+
export const AllocationGridHeader = ({
7+
onAddAllocationType,
8+
onAddRequiredResource,
9+
}) => (
10+
<div className={style["header-buttons"]}>
11+
<button className="btn btn-primary" onClick={onAddAllocationType}>
12+
<i className="fa fa-plus"></i> Add Allocation Type
13+
</button>
14+
<button className="btn btn-primary" onClick={onAddRequiredResource}>
15+
<i className="fa fa-plus"></i> Add Required Resource
16+
</button>
17+
</div>
18+
);
19+
20+
AllocationGridHeader.propTypes = {
21+
headerText: PropTypes.node,
22+
onAddAllocationType: PropTypes.func.isRequired,
23+
onAddRequiredResource: PropTypes.func.isRequired,
24+
};
25+
26+
export const AllocationGrid = React.memo(function AllocationGrid({
27+
columns,
28+
rows,
29+
}) {
30+
return (
31+
<div className={style["allocation-types-grid"]}>
32+
<Grid
33+
columns={columns}
34+
rows={rows}
35+
rowClasses={Array(rows.length).fill(style["vertical-align-center"])}
36+
scroll={false}
37+
/>
38+
</div>
39+
);
40+
});
41+
42+
AllocationGrid.propTypes = {
43+
columns: PropTypes.array.isRequired,
44+
rows: PropTypes.array.isRequired,
45+
};

‎src/edit-resource/AllocationTypesGrid.module.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.header-buttons {
2+
display: flex;
3+
gap: 1rem; /* Space between the buttons */
4+
}
5+
6+
.allocation-types-grid {
7+
margin-top: 1rem;
8+
}
9+
10+
.vertical-align-center td {
11+
vertical-align: middle;
12+
}

0 commit comments

Comments
 (0)