Merge branch 'ramps-583-implement-relative-order-column-in-allocation…

…s_process_resources' into ramps-100-variable-marketplace

merge AdvancedSettingsSection

src/edit-resource/AddNewModal.jsx

@@ -1,6 +1,13 @@
 import PropTypes from "prop-types";
 
-export const AddNewModal = ({ show, onClose, title, children, onSave }) => {
+export const AddNewModal = ({
+  show,
+  onClose,
+  title,
+  children,
+  onSave,
+  buttonText,
+}) => {
   if (!show) {
     return null;
   }
@@ -60,7 +67,7 @@ export const AddNewModal = ({ show, onClose, title, children, onSave }) => {
               }}
             >
               <button className="btn btn-success" onClick={onSave}>
-                Save
+                {buttonText}
               </button>
             </div>
           </div>
@@ -76,4 +83,5 @@ AddNewModal.propTypes = {
   title: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   onSave: PropTypes.func.isRequired,
+  buttonText: PropTypes.string,
 };

src/edit-resource/AdvancedSettingsSection.jsx

@@ -0,0 +1,68 @@
+import PropTypes from "prop-types";
+import style from "./AdvancedSettingsSection.module.scss";
+
+export const AdvancedSettingsSection = ({
+  headerText,
+  header,
+  children,
+  isEditing = false,
+  onEditingChange,
+  warningMessage = "",
+}) => {
+  const altWarningBanner = headerText && headerText.type === "label";
+  return (
+    <div className={style["advanced-settings"]}>
+      {(headerText || header) && (
+        <div className={style["header-wrapper"]}>
+          {headerText}
+          {header && (
+            <div
+              className={`${style["header-buttons-container"]} ${
+                !isEditing ? style["blurred"] : ""
+              }`}
+            >
+              {header}
+            </div>
+          )}
+        </div>
+      )}
+      <div style={{ width: "100%" }}>
+        {!isEditing && (
+          <div
+            className={
+              altWarningBanner
+                ? `${style["alt-warning-banner"]}`
+                : style["warning-banner"]
+            }
+          >
+            <span className={style["warning-text"]}>
+              <strong>CAUTION! </strong> {warningMessage}
+            </span>
+            <button
+              className="btn btn-danger"
+              onClick={() => onEditingChange(true)}
+            >
+              I understand the risks
+            </button>
+          </div>
+        )}
+        <div
+          className={`${style["content-container"]} ${
+            !isEditing ? style["blurred"] : ""
+          }`}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AdvancedSettingsSection.propTypes = {
+  headerText: PropTypes.node,
+  header: PropTypes.node,
+  children: PropTypes.node.isRequired,
+  isEditing: PropTypes.bool,
+  onEditingChange: PropTypes.func.isRequired,
+  warningMessage: PropTypes.string,
+};

src/edit-resource/AdvancedSettingsSection.module.scss

@@ -0,0 +1,48 @@
+.advanced-settings {
+  position: relative;
+}
+
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content-container {
+  transition: filter 0.3s ease;
+  border-radius: 4px;
+}
+
+.blurred {
+  filter: blur(4px) brightness(0.95);
+  pointer-events: none;
+}
+
+.warning-banner {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background-color: #fff3cd;
+  border: 1px solid #ffeeba;
+  border-radius: 4px;
+  margin: 0 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: #856404;
+}
+
+.alt-warning-banner {
+  composes: warning-banner;
+  position: relative;
+  transform: none;
+  margin: 0 0 1rem;
+  height: 18px;
+  max-width: 750px;
+  padding: 0.75rem;
+}

src/edit-resource/AllocationTypesGrid.jsx

@@ -3,25 +3,32 @@ import PropTypes from "prop-types";
 import Grid from "../shared/Grid";
 import style from "./AllocationTypesGrid.module.scss";
 
+export const AllocationGridHeader = ({
+  onAddAllocationType,
+  onAddRequiredResource,
+}) => (
+  <div className={style["header-buttons"]}>
+    <button className="btn btn-primary" onClick={onAddAllocationType}>
+      <i className="fa fa-plus"></i> Add Allocation Type
+    </button>
+    <button className="btn btn-primary" onClick={onAddRequiredResource}>
+      <i className="fa fa-plus"></i> Add Required Resource
+    </button>
+  </div>
+);
+
+AllocationGridHeader.propTypes = {
+  headerText: PropTypes.node,
+  onAddAllocationType: PropTypes.func.isRequired,
+  onAddRequiredResource: PropTypes.func.isRequired,
+};
+
 export const AllocationGrid = React.memo(function AllocationGrid({
   columns,
   rows,
-  onAddRequiredResource,
-  onAddAllocationType,
 }) {
   return (
     <div className={style["allocation-types-grid"]}>
-      <div className={style["header-container"]}>
-        <h2 className={style["header-title"]}>Allocation Types</h2>
-        <div className={style["header-buttons"]}>
-          <button className="btn btn-primary" onClick={onAddAllocationType}>
-            <i className="fa fa-plus"></i> Add Allocation Type
-          </button>
-          <button className="btn btn-primary" onClick={onAddRequiredResource}>
-            <i className="fa fa-plus"></i> Add Required Resource
-          </button>
-        </div>
-      </div>
       <Grid
         columns={columns}
         rows={rows}
@@ -35,6 +42,4 @@ export const AllocationGrid = React.memo(function AllocationGrid({
 AllocationGrid.propTypes = {
   columns: PropTypes.array.isRequired,
   rows: PropTypes.array.isRequired,
-  onAddRequiredResource: PropTypes.func.isRequired,
-  onAddAllocationType: PropTypes.func.isRequired,
 };

src/edit-resource/AllocationTypesGrid.module.scss

@@ -1,18 +1,10 @@
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
 .header-buttons {
   display: flex;
   gap: 1rem; /* Space between the buttons */
 }
 
 .allocation-types-grid {
-  margin-bottom: 0.8rem;
-  margin-top: 0.8rem;
+  margin-top: 1rem;
 }
 
 .vertical-align-center td {

src/edit-resource/EditResource.jsx

@@ -1,18 +1,20 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import LoadingSpinner from "../shared/LoadingSpinner";
 import { SelectInput } from "../shared/SelectInput/SelectInput";
 import { ResourceForm } from "./ResourceForm";
-import { AllocationGrid } from "./AllocationTypesGrid";
+import { AllocationGridHeader, AllocationGrid } from "./AllocationTypesGrid";
 import { AddNewModal } from "./AddNewModal";
 import { ExchangeRates } from "./ExchangeRates";
 import Alert from "../shared/Alert";
+import { AdvancedSettingsSection } from "./AdvancedSettingsSection";
 import {
   useResourceData,
   useResourceOptions,
   useAllocationGrid,
   useResourceSubmit,
   useAllocationRowsAndColumns,
+  useAdvancedSettings,
 } from "./helpers/hooks";
 import { useExchangeRates } from "./helpers/useExchangeRates";
 export default function EditResource({
@@ -24,6 +26,12 @@ export default function EditResource({
     resourceId,
     relativeUrlRoot
   );
+
+  const {
+    isEditing: isEditingAdvanced,
+    handleEditingChange: handleAdvancedEditingChange,
+  } = useAdvancedSettings();
+
   const { resourceData, loading, errors, successMessage } = state;
   const resourceDetails = resourceData?.resource_details;
   const usesExchangeRates = resourceData?.uses_exchange_rates;
@@ -87,6 +95,8 @@ export default function EditResource({
     handleRequiredResourceChange
   );
 
+  const [isDollarValueEditing, setIsDollarValueEditing] = useState(false);
+
   if (loading) return <LoadingSpinner />;
   if (errors.length > 0) {
     return (
@@ -107,27 +117,66 @@ export default function EditResource({
         <Alert color={successMessage.color}>{successMessage.message}</Alert>
       )}
       <div>
-        <h2>Edit Resource</h2>
+        <h2>Resource Propeties</h2>
+        <div
+          style={{
+            marginBottom: "0.75rem",
+          }}
+        >
+          <p
+            style={{
+              margin: "0",
+              fontStyle: "italic",
+              fontWeight: "bold",
+            }}
+          >
+            Any modifications to these resource properties will be applied
+            globally and impact resources on other all allocations process
+          </p>
+        </div>
         <ResourceForm
           resourceDetails={resourceDetails}
           resourceTypesOptions={resourceTypesOptions}
           unitTypesOptions={unitTypesOptions}
           dispatch={dispatch}
+          isDollarValueEditing={isDollarValueEditing}
+          onDollarValueEditingChange={setIsDollarValueEditing}
         />
       </div>
-
-      <AllocationGrid
-        columns={allocationColumns}
-        rows={allocationRows}
-        onAddRequiredResource={() => setShowAddResourceModal(true)}
-        onAddAllocationType={() => setShowAddAllocationTypeModal(true)}
-      />
-
+      {usesExchangeRates && (
+        <ExchangeRates
+          columns={exchangeRateColumns}
+          rows={exchangeRateRows}
+          onAddDiscountRate={handleAddDiscountRate}
+          dateErrors={dateErrors}
+        />
+      )}
+      <AdvancedSettingsSection
+        headerText={<h2>Allocation Types</h2>}
+        header={
+          <AllocationGridHeader
+            onAddAllocationType={() =>
+              isEditingAdvanced && setShowAddAllocationTypeModal(true)
+            }
+            onAddRequiredResource={() =>
+              isEditingAdvanced && setShowAddResourceModal(true)
+            }
+          />
+        }
+        isEditing={isEditingAdvanced}
+        onEditingChange={handleAdvancedEditingChange}
+        warningMessage="Incorrect allocations
+            process settings can make a resource unavailable for allocation.
+            Please proceed with caution."
+      >
+        <AllocationGrid columns={allocationColumns} rows={allocationRows} />
+      </AdvancedSettingsSection>
       <AddNewModal
         show={showAddResourceModal}
         onClose={() => setShowAddResourceModal(false)}
         title="Add Required Resource"
         onSave={handleSaveResources}
+        buttonText={"Save"}
       >
         <div>
           {availableResources.map((resource) => (
@@ -151,12 +200,12 @@ export default function EditResource({
           ))}
         </div>
       </AddNewModal>
-
       <AddNewModal
         show={showAddAllocationTypeModal}
         onClose={() => setShowAddAllocationTypeModal(false)}
         title="Add Allocation Type"
         onSave={handleSaveAllocationType}
+        buttonText={"Save"}
       >
         <SelectInput
           label="Select Allocation Type"
@@ -175,15 +224,6 @@ export default function EditResource({
           onChange={handleSelectNewAllocationType}
         />
       </AddNewModal>
-
-      {usesExchangeRates && (
-        <ExchangeRates
-          columns={exchangeRateColumns}
-          rows={exchangeRateRows}
-          onAddDiscountRate={handleAddDiscountRate}
-          dateErrors={dateErrors}
-        />
-      )}
     </div>
   );
 }

src/edit-resource/ExchangeRatesGrid.module.scss

@@ -1,5 +1,5 @@
 .exchange-rates-grid {
-  margin: 0.8rem 0;
+  margin: 0.8rem 0 1.6rem;
   border: 0;
 
   .header-container {