Add a Submit and close icon to the Customize component. (#2087)

* Add a Submit and close icon.

Signed-off-by: bgravenorst <[email protected]>

* Implement Copilot suggestions.

Signed-off-by: bgravenorst <[email protected]>

---------

Signed-off-by: bgravenorst <[email protected]>

Author: bgravenorst

src/components/ParserOpenRPC/InteractiveBox/index.tsx

@@ -28,6 +28,7 @@ import { RemoveButton } from '@site/src/components/ParserOpenRPC/InteractiveBox/
 import { AddButton } from '@site/src/components/ParserOpenRPC/InteractiveBox/buttonTemplates/AddButton'
 import ClearIcon from '@site/static/img/icons/clear-icon.svg'
 import ResetIcon from '@site/static/img/icons/reset-icon.svg'
+import SubmitIcon from '@site/static/img/icons/submit-icon.svg'
 
 interface InteractiveBoxProps {
   params: MethodParam[]
@@ -37,6 +38,7 @@ interface InteractiveBoxProps {
   drawerLabel?: string | null
   closeComplexTypeView?: () => void
   isOpen?: boolean
+  onModalClose?: () => void
 }
 
 type ObjectType = { [key: string]: any }
@@ -90,6 +92,7 @@ export default function InteractiveBox({
   drawerLabel,
   closeComplexTypeView,
   isOpen = false,
+  onModalClose,
 }: InteractiveBoxProps) {
   const [parsedSchema, setParsedSchema] = useState<RJSFSchema>(null)
   const [defaultFormData, setDefaultFormData] = useState<any>({})
@@ -203,6 +206,15 @@ export default function InteractiveBox({
       formRef?.current?.reset()
     }
   }
+  const handleSubmitAndClose = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    onParamChange(currentFormData)
+    if (isComplexTypeView) {
+      closeComplexTypeView()
+    } else {
+      onModalClose?.()
+    }
+  }
   const isLightTheme = colorMode === 'light'
 
   useEffect(() => {
@@ -333,6 +345,11 @@ export default function InteractiveBox({
                 <ClearIcon className={styles.footerButtonIcon} />
               </button>
             </Tooltip>
+            <Tooltip message="Submit and close">
+              <button className={styles.footerButtonLeft} onClick={handleSubmitAndClose}>
+                <SubmitIcon className={styles.footerButtonIcon} />
+              </button>
+            </Tooltip>
           </div>
           {isComplexTypeView ? (
             <div className={clsx(styles.footerButtons)}>

src/components/ParserOpenRPC/InteractiveBox/styles.module.scss

@@ -308,21 +308,31 @@
   display: flex;
 }
 .footerButtonsLeft {
-  width: 4.8rem;
+  display: flex;
+  gap: 1rem;
   align-items: center;
-  justify-content: space-between;
-  padding: 0.6rem 0;
 }
 .footerButtonLeft {
   display: flex;
-  width: 1.6rem;
-  height: 2.2rem;
-  padding: 0;
   align-items: center;
-  background: none;
-  border: none;
-  border-radius: 0;
-  cursor: pointer;
+  justify-content: center;
+  width: 3.2rem;
+  height: 3.2rem;
+  border-radius: 0.4rem;
+  background: var(--general-gray-light);
+  transition: background-color var(--ifm-transition-fast) ease;
+
+  &:hover {
+    background: var(--general-gray);
+  }
+
+  [data-theme='dark'] & {
+    background: var(--general-gray-dark);
+
+    &:hover {
+      background: var(--general-gray);
+    }
+  }
 }
 .footerButtonRight {
   padding: 0.5rem 1.6rem !important;

src/components/ParserOpenRPC/index.tsx

@@ -318,6 +318,7 @@ export default function ParserOpenRPC({ network, method, extraContent }: ParserP
               drawerLabel={drawerLabel}
               closeComplexTypeView={closeComplexTypeView}
               isOpen={isModalOpen}
+              onModalClose={onModalClose}
             />
           </ModalDrawer>
         </div>