ModalDialog with selectInput options implemented

src/common/Multiselect/Multiselect.js

@@ -148,7 +148,26 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele
                             className
                         })}
                         {
-                            menuOpen ? <ModalDialog /> : null
+                            menuOpen ?
+                                <ModalDialog title={title} onCloseRequest={() => closeMenu()}>
+                                    <div className={classnames(styles['menu-container'], { 'modal': modalSelects })}>
+                                        {
+                                            options.length > 0 ?
+                                                options.map(({ label, value }) => (
+                                                    <Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
+                                                        <div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
+                                                        <Icon className={styles['icon']} icon={'ic_check'} />
+                                                    </Button>
+                                                ))
+                                                :
+                                                <div className={styles['no-options-container']}>
+                                                    <div className={styles['label']}>No options available</div>
+                                                </div>
+                                        }
+                                    </div>
+                                </ModalDialog>
+                                :
+                                null
                         }
                     </React.Fragment>
             }

src/common/Multiselect/styles.less

@@ -37,8 +37,24 @@
 
     .popup-menu-container {
         width: 100%;
+    }
+}
+
+.menu-container {
+    &:global(.modal) {
+        .option-container {
+            width: 15rem;
+
+            &:not(:last-child) {
+                margin-bottom: 1rem;
+            }
+        }
+
+        .no-options-container {
+            width: 15rem;
+        }
+    }
 
-        .menu-container {
     .option-container {
         display: flex;
         flex-direction: row;
@@ -91,6 +107,4 @@
             color: var(--color-surfacelighter);
         }
     }
-        }
-    }
 }

src/routes/Discover/Discover.js

@@ -130,15 +130,13 @@ const Discover = ({ urlParams, queryParams }) => {
             {
                 inputsModalOpen ?
                     <ModalDialog title={'Select inputs'} className={styles['selectable-inputs-modal-container']} onCloseRequest={() => closeInputsModal()}>
-                        {
+                        {selectInputs.map((selectInput, index) => (
-                            selectInputs.map((selectInput, index) => (
                             <Multiselect
                                 {...selectInput}
                                 key={index}
                                 modalSelects={true}
                             />
-                            ))
+                        ))}
-                        }
                     </ModalDialog>
                     :
                     null