Merge pull request meshery#8672 from Yashsharma1911/yash/AddedCheckbox

Updated PromptComponent to support checkbox
Mohith234 · Sep 15, 2023 · 6b66146 · 6b66146
2 parents 92022f7 + ff7a4e5
commit 6b66146
Showing 1 changed file with 47 additions and 4 deletions.
diff --git a/ui/components/PromptComponent.js b/ui/components/PromptComponent.js
@@ -7,7 +7,9 @@ import {
   DialogActions,
   DialogContentText,
   DialogContent,
-  DialogTitle
+  DialogTitle,
+  FormControlLabel,
+  Checkbox
 } from "@material-ui/core";
 import classNames from 'classnames';
 
@@ -23,7 +25,8 @@ const styles = (theme) => ({
     minWidth : 400,
     overflowWrap : 'anywhere',
     textAlign : 'center',
-    padding : '5px'
+    padding : '5px',
+    color : theme.palette.secondary.text
   },
   actions : {
     display : 'flex',
@@ -57,6 +60,15 @@ const styles = (theme) => ({
     "&:hover" : {
       backgroundColor : "#B32700",
     }
+  },
+  checkboxLabelStyle : {
+    fontSize : "1rem",
+  },
+  checkbox : {
+    color : theme.palette.secondary.focused,
+    "&$checked" : {
+      color : theme.palette.secondary.focused,
+    }
   }
 });
 
@@ -67,7 +79,9 @@ class PromptComponent extends React.Component {
       show : false,
       title : "",
       subtitle : "",
-      options : []
+      options : [],
+      isChecked : false,
+      showCheckbox : false
     }
     this.promiseInfo = {};
   }
@@ -80,6 +94,7 @@ class PromptComponent extends React.Component {
         title : passed.title,
         subtitle : passed.subtitle,
         options : passed.options,
+        showCheckbox : !!passed.showCheckbox,
         show : true
       });
     });
@@ -89,9 +104,20 @@ class PromptComponent extends React.Component {
     this.setState({ show : false });
   };
 
+  handleCheckboxChange = () => {
+    this.setState((prevState) => ({
+      isChecked : !prevState.isChecked,
+    }));
+  };
+
+  getCheckboxState = () => {
+    return this.state.isChecked;
+  };
+
+
   render() {
     const {
-      show, options, title, subtitle
+      show, options, title, subtitle, isChecked, showCheckbox
     } = this.state;
     const { classes } = this.props;
     const { resolve } = this.promiseInfo;
@@ -116,6 +142,23 @@ class PromptComponent extends React.Component {
                   {subtitle}
                 </Typography>
               </DialogContentText>
+              {showCheckbox && (
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={isChecked}
+                      onChange={this.handleCheckboxChange}
+                      className={classes.checkbox}
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <span className={classes.checkboxLabelStyle}>
+                      Do not show again
+                    </span>
+                  }
+                />
+              )}
             </DialogContent>
           }
           <DialogActions className={classes.actions}>