Fix/copy changes (#210)

* Added information to setup domain

* Fixed incorrect var reference

* Updated documentation message

* Updated env template

* updated template

* removed debug echo

* Updated Script

* Updated Text

* Removed option to connect to external mongo for fresh installs
Exit script of docker desktop is not installed

* Updated docker installation explanation

* added a question to skip custom domain if user is installing locally

* Inverted script question and

* Removed question to determine local installation

* Updated Popup CTA to Modal
Updated query templates to contain bindings
Added a message to display on API / Query errors

* updated styles for evaluated value
updated styles for auto complete

* added spaces to questions

Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com>

app/client/cypress/support/commands.js

@@ -617,7 +617,7 @@ Cypress.Commands.add("createModal", (modalType, ModalName) => {
     .click({ force: true })
     .get("ul.bp3-menu")
     .children()
-    .contains("Open Popup")
+    .contains("New Modal")
     .click();
   cy.get(modalWidgetPage.selectModal).click();
   cy.get(modalWidgetPage.createModalButton).click({ force: true });

app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx

@@ -47,13 +47,13 @@ const ContentWrapper = styled.div<{ colorTheme: EditorTheme }>`
   -ms-overflow-style: none;
   background-color: ${props => THEMES[props.colorTheme].backgroundColor};
   color: ${props => THEMES[props.colorTheme].textColor};
-  padding: 15px;
+  padding: 10px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 4px;
 `;
 
 const CurrentValueWrapper = styled.div`
-  max-height: 150px;
+  max-height: 300px;
   overflow-y: auto;
   ::-webkit-scrollbar {
     display: none;
@@ -63,12 +63,14 @@ const CurrentValueWrapper = styled.div`
 
 const CodeWrapper = styled.pre<{ colorTheme: EditorTheme }>`
   padding: 10px;
+  margin: 0px 0px;
   background-color: ${props => THEMES[props.colorTheme].editorBackground};
   color: ${props => THEMES[props.colorTheme].editorColor};
   overflow: scroll;
   ::-webkit-scrollbar {
     display: none;
   }
+  font-size: 14px;
   -ms-overflow-style: none;
   white-space: pre-wrap;
 `;
@@ -81,17 +83,23 @@ const TypeText = styled.pre<{ colorTheme: EditorTheme }>`
   ::-webkit-scrollbar {
     display: none;
   }
+  font-size: 12px;
+  margin: 5px 0;
   -ms-overflow-style: none;
 `;
 
 const ErrorText = styled.p`
-  margin: 10px 0;
+  margin: 5px 0;
   padding: 5px;
   border-radius: 2px;
   background-color: rgba(235, 87, 87, 0.2);
   color: ${props => props.theme.colors.error};
 `;
 
+const StyledTitle = styled.p`
+  margin: 8px 0;
+`;
+
 interface Props {
   theme: EditorTheme;
   isOpen: boolean;
@@ -123,13 +131,13 @@ const CurrentValueViewer = (props: {
       Array.isArray(props.evaluatedValue)
     ) {
       const reactJsonProps = {
-        theme: props.theme === EditorTheme.DARK ? "monokai" : "rjv-default",
+        theme: props.theme === EditorTheme.DARK ? "summerfruit" : "rjv-default",
         name: null,
         enableClipboard: false,
         displayObjectSize: false,
         displayDataTypes: false,
         style: {
-          fontSize: "14px",
+          fontSize: "12px",
         },
         collapsed: 2,
         collapseStringsAfterLength: 20,
@@ -145,7 +153,7 @@ const CurrentValueViewer = (props: {
   }
   return (
     <React.Fragment>
-      <p>Current Value:</p>
+      <StyledTitle>Evaluated Value</StyledTitle>
       <CurrentValueWrapper>{content}</CurrentValueWrapper>
     </React.Fragment>
   );
@@ -162,9 +170,9 @@ const PopoverContent = (props: PopoverContentProps) => {
       {props.hasError && (
         <ErrorText>{`This value does not evaluate to type "${props.expected}"`}</ErrorText>
       )}
-      {props.expected && (
+      {!props.hasError && props.expected && (
         <React.Fragment>
-          <p>Expected type:</p>
+          <StyledTitle>Expected Data Type</StyledTitle>
           <TypeText colorTheme={props.theme}>{props.expected}</TypeText>
         </React.Fragment>
       )}
@@ -207,7 +215,7 @@ const EvaluatedValuePopup = (props: Props) => {
             expected={props.expected}
             evaluatedValue={props.evaluatedValue}
             hasError={props.hasError}
-            theme={props.theme}
+            theme={EditorTheme.DARK}
             onMouseLeave={() => {
               setContentHovered(false);
             }}

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -286,6 +286,7 @@ class CodeEditor extends Component<Props, State> {
       <DynamicAutocompleteInputWrapper
         theme={this.props.theme}
         skin={this.props.theme === EditorTheme.DARK ? Skin.DARK : Skin.LIGHT}
+        isError={hasError}
         isActive={(this.state.isFocused && !hasError) || this.state.isOpened}
         isNotHover={this.state.isFocused || this.state.isOpened}
       >

app/client/src/components/editorComponents/CodeEditor/styledComponents.ts

@@ -17,7 +17,7 @@ export const HintStyles = createGlobalStyle<{ editorTheme: EditorTheme }>`
     font-size: 90%;
     font-family: monospace;
     max-height: 20em;
-    width: 300px;
+    width: 250px;
     overflow-y: auto;
     background: ${props =>
       props.editorTheme === EditorTheme.DARK ? "#090A0F" : "#ffffff"};
@@ -38,7 +38,7 @@ export const HintStyles = createGlobalStyle<{ editorTheme: EditorTheme }>`
     cursor: pointer;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: 12px;
   }
 
   li.CodeMirror-hint-active {
@@ -239,15 +239,16 @@ export const DynamicAutocompleteInputWrapper = styled.div<{
   theme: Theme;
   isActive: boolean;
   isNotHover: boolean;
+  isError: boolean;
 }>`
   width: 100%;
   height: 100%;
   flex: 1;
   position: relative;
-  border: ${props => (props.skin === Skin.DARK ? "1px solid" : "none")};
+  border: 1px solid;
   border-radius: 2px;
   border-color: ${props =>
-    props.isActive && props.skin === Skin.DARK
+    !props.isError && props.isActive && props.skin === Skin.DARK
       ? Colors.ALABASTER
       : "transparent"};
   > span:first-of-type {
@@ -256,8 +257,10 @@ export const DynamicAutocompleteInputWrapper = styled.div<{
     right: 0px;
   }
   &:hover {
-    border: ${props =>
+    border-color: ${props =>
-      props.skin === Skin.DARK ? "1px solid " + Colors.ALABASTER : "none"};
+      !props.isError && props.skin === Skin.DARK
+        ? Colors.ALABASTER
+        : "transparent"};
     .lightning-menu {
       background: ${props =>
         !props.isNotHover

app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx

@@ -372,11 +372,11 @@ const baseOptions: any = [
     value: ActionType.showAlert,
   },
   {
-    label: "Open Popup",
+    label: "Open Modal",
     value: ActionType.showModal,
   },
   {
-    label: "Close Popup",
+    label: "Close Modal",
     value: ActionType.closeModal,
   },
 ];
@@ -760,7 +760,7 @@ function useModalDropdownList() {
 
   let finalList: TreeDropdownOption[] = [
     {
-      label: "Open Popup",
+      label: "New Modal",
       value: "Modal",
       id: "create",
       className: "t--create-modal-btn",

app/client/src/constants/DefaultTheme.tsx

@@ -376,7 +376,7 @@ export const theme: Theme = {
   },
   evaluatedValuePopup: {
     width: 300,
-    height: 400,
+    height: 500,
   },
   drawerWidth: "80%",
   colors: {

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -396,7 +396,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                       text: "Submit",
                       buttonStyle: "PRIMARY_BUTTON",
                       disabledWhenInvalid: true,
-                      resetFormOnClick: false,
+                      resetFormOnClick: true,
                     },
                   },
                   {

app/client/src/sagas/ActionExecutionSagas.ts

@@ -272,6 +272,11 @@ export function* executeActionSaga(
           event.callback({ success: false });
         }
       }
+      AppToaster.show({
+        message:
+          api.name + " failed to execute. Please check it's configuration",
+        type: "error",
+      });
     } else {
       if (onSuccess) {
         yield put(

app/server/appsmith-plugins/mongoPlugin/src/main/resources/templates/CREATE.json

@@ -2,11 +2,9 @@
   "insert": "users",
   "documents": [
     {
-      "name": "John Smith",
+      "name": "{{ nameInput.text }}",
-      "email": [
+      "email": "{{ emailInput.text }}",
-        "john@appsmith.com"
+      "gender": "{{ genderDropdown.selectedOptionValue }}"
-      ],
-      "gender": "M"
     }
   ]
 }

app/server/appsmith-plugins/mongoPlugin/src/main/resources/templates/DELETE.json

@@ -3,8 +3,9 @@
   "deletes": [
     {
       "q": {
-        "id": 10
+        "id": "{{ usersTable.selectedRow.id }}"
-      }
+      },
+      "limit": 1
     }
   ]
 }

app/server/appsmith-plugins/mongoPlugin/src/main/resources/templates/READ.json

@@ -1,9 +1,7 @@
 {
   "find": "users",
   "filter": {
-    "id": {
+    "status": "{{ statusDropdown.selectedOptionValue }}"
-      "$gte": 10
-    }
   },
   "sort": {
     "id": 1

app/server/appsmith-plugins/mongoPlugin/src/main/resources/templates/UPDATE.json

@@ -5,12 +5,7 @@
       "q": {
         "id": 10
       },
-      "u": {
+      "u": { "$set": { "status": "{{ statusDropdown.selectedOptionValue }}" } }
-        "name": "Updated Sam",
-        "email": [
-          "updates@appsmith.com"
-        ]
-      }
     }
   ]
 }

app/server/appsmith-plugins/mysqlPlugin/src/main/resources/templates/CREATE.sql

@@ -1,4 +1,8 @@
 INSERT INTO users
-  (id, name, gender, avatar, email, address, role)
+  (name, gender, email)
 VALUES
-  (?, ?, ?, ?, ?, ?, ?);
+  (
+    '{{ nameInput.text }}',
+    '{{ genderDropdown.selectedOptionValue }}',
+    '{{ nameInput.text }}'
+  );

app/server/appsmith-plugins/mysqlPlugin/src/main/resources/templates/DELETE.sql

@@ -1 +1 @@
-DELETE FROM users WHERE id = ?;
+DELETE FROM users WHERE id = '{{ usersTable.selectedRow.id }}';

app/server/appsmith-plugins/mysqlPlugin/src/main/resources/templates/SELECT.sql

@@ -1 +1 @@
-SELECT * FROM users ORDER BY id LIMIT 10;
+SELECT * FROM users where role = '{{ roleDropdown.selectedOptionValue }}' ORDER BY id LIMIT 10;

app/server/appsmith-plugins/mysqlPlugin/src/main/resources/templates/UPDATE.sql

@@ -1,3 +1,3 @@
 UPDATE users
   SET status = 'APPROVED'
-  WHERE id = 1;
+  WHERE id = '{{ usersTable.selectedRow.id }}';

app/server/appsmith-plugins/postgresPlugin/src/main/resources/templates/CREATE.sql

@@ -1,4 +1,8 @@
 INSERT INTO users
-  (id, name, gender, avatar, email, address, role)
+  (name, gender, email)
 VALUES
-  (?, ?, ?, ?, ?, ?, ?);
+  (
+    '{{ nameInput.text }}',
+    '{{ genderDropdown.selectedOptionValue }}',
+    '{{ nameInput.text }}'
+  );

app/server/appsmith-plugins/postgresPlugin/src/main/resources/templates/DELETE.sql

@@ -1 +1 @@
-DELETE FROM users WHERE id = ?;
+DELETE FROM users WHERE id = '{{ usersTable.selectedRow.id }}';

app/server/appsmith-plugins/postgresPlugin/src/main/resources/templates/SELECT.sql

@@ -1 +1 @@
-SELECT * FROM users ORDER BY id LIMIT 10;
+SELECT * FROM users where role = '{{ roleDropdown.selectedOptionValue }}' ORDER BY id LIMIT 10;

app/server/appsmith-plugins/postgresPlugin/src/main/resources/templates/UPDATE.sql

@@ -1,3 +1,3 @@
 UPDATE users
   SET status = 'APPROVED'
-  WHERE id = 1;
+  WHERE id = '{{ usersTable.selectedRow.id }}';

deploy/install.sh

@@ -304,6 +304,7 @@ echo "+++++++++++++++++++++++++++++++++++++++++++++++++"
 echo ""
 echo "Your application is running on http://localhost"
 echo ""
+echo "Your application is running on http://localhost"
 echo "Need help troubleshooting?"
 echo "Join our discord server https://discord.com/invite/rBTTVJp"
 echo ""