Dropdown widget fixes

app/client/src/components/editorComponents/ContextDropdown.tsx

@@ -83,7 +83,7 @@ export const ContextDropdown = (props: ContextDropdownProps) => {
 
   const renderer: ItemRenderer<ContextDropdownOption> = (
     option: ContextDropdownOption,
-  ) => <DropdownItem key={option.id} {...option} />;
+  ) => <DropdownItem key={option.value} {...option} />;
 
   return (
     <Dropdown

app/client/src/components/editorComponents/ErrorBoundry.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import * as Sentry from "@sentry/browser";
 
 type Props = {};
 type State = { hasError: boolean };
@@ -22,6 +23,7 @@ class ErrorBoundary extends React.Component<Props, State> {
 
   componentDidCatch(error: any, errorInfo: any) {
     console.error({ error, errorInfo });
+    Sentry.captureException(error);
   }
 
   render() {

app/client/src/components/propertyControls/OptionControl.tsx

@@ -7,7 +7,6 @@ import {
 } from "./StyledControls";
 import { DropdownOption } from "widgets/DropdownWidget";
 import { ControlType } from "constants/PropertyControlConstants";
-import { generateReactKey } from "utils/generators";
 import styled from "constants/DefaultTheme";
 import { FormIcons } from "icons/FormIcons";
 import { AnyStyledComponent } from "styled-components";
@@ -39,7 +38,7 @@ class OptionControl extends BaseControl<ControlProps> {
           return (
             <StyledOptionControlWrapper
               orientation={"HORIZONTAL"}
-              key={option.id}
+              key={option.value}
             >
               <StyledOptionControlInputGroup
                 type={"text"}
@@ -120,7 +119,7 @@ class OptionControl extends BaseControl<ControlProps> {
     const options: DropdownOption[] = this.props.propertyValue
       ? this.props.propertyValue.slice()
       : [];
-    options.push({ label: "", value: "", id: generateReactKey() });
+    options.push({ label: "", value: "" });
     this.updateProperty("options", options);
   };
 

app/client/src/constants/ActionConstants.tsx

@@ -23,7 +23,7 @@ export type ActionType =
   | "DOWNLOAD";
 
 export const PropertyPaneActionDropdownOptions: DropdownOption[] = [
-  { label: "Call API", value: "API", id: "API" },
+  { label: "Call API", value: "API" },
   // { label: "Run Query", value: "QUERY" },
 ];
 

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -112,11 +112,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       selectionType: "SINGLE_SELECT",
       label: "Select",
       options: [
-        { id: "1", label: "Option 1", value: "1" },
-        { id: "2", label: "Option 2", value: "2" },
-        { id: "3", label: "Option 3", value: "3" },
-        { id: "4", label: "Option 4", value: "4" },
-        { id: "5", label: "Option 5", value: "5" },
+        { label: "Option 1", value: "1" },
+        { label: "Option 2", value: "2" },
+        { label: "Option 3", value: "3" },
+        { label: "Option 4", value: "4" },
+        { label: "Option 5", value: "5" },
       ],
       widgetName: "Dropdown",
       selectedIndex: 0,

app/client/src/pages/Applications/ApplicationCard.tsx

@@ -150,7 +150,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
   const moreActionItems: ContextDropdownOption[] = [];
   if (props.share) {
     moreActionItems.push({
-      id: "share",
       value: "share",
       onSelect: shareApp,
       label: "Share",
@@ -158,7 +157,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
   }
   if (props.duplicate) {
     moreActionItems.push({
-      id: "duplicate",
       value: "duplicate",
       onSelect: duplicateApp,
       label: "Duplicate",
@@ -166,7 +164,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
   }
   if (props.delete) {
     moreActionItems.push({
-      id: "delete",
       value: "delete",
       onSelect: deleteApp,
       label: "Delete",

app/client/src/pages/Editor/EditorSidebar.tsx

@@ -349,7 +349,6 @@ class EditorSidebar extends React.Component<Props, State> {
                                             <ContextDropdown
                                               options={[
                                                 {
-                                                  id: "copy",
                                                   value: "copy",
                                                   onSelect: () => null,
                                                   label: "Copy to",
@@ -367,7 +366,6 @@ class EditorSidebar extends React.Component<Props, State> {
                                                   ),
                                                 },
                                                 {
-                                                  id: "move",
                                                   value: "move",
                                                   onSelect: () => null,
                                                   label: "Move to",
@@ -387,7 +385,6 @@ class EditorSidebar extends React.Component<Props, State> {
                                                     })),
                                                 },
                                                 {
-                                                  id: "delete",
                                                   value: "delete",
                                                   onSelect: () =>
                                                     this.props.deleteItem(

app/client/src/pages/Editor/PageListSidebar/index.tsx

@@ -111,13 +111,11 @@ const PageListSidebar = () => {
     return pages.map(page => {
       const pageActions: ContextDropdownOption[] = [
         {
-          id: "setdefault",
           value: "setdefault",
           onSelect: () => setPageAsDefault(page.pageId, applicationId),
           label: "Set as Home Page",
         },
         {
-          id: "delete",
           value: "delete",
           onSelect: () => deletePage(page.pageId),
           intent: "danger",

app/client/src/utils/Validators.ts

@@ -176,20 +176,13 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
         message: `${WIDGET_TYPE_VALIDATION_ERROR}: Options Data`,
       };
     }
-    const hasOptions = _.every(
-      parsed,
-      (datum: { label: any; id: any; value: any }) => {
-        if (_.isObject(datum)) {
-          return (
-            _.isString(datum.label) &&
-            _.isString(datum.id) &&
-            _.isString(datum.value)
-          );
-        } else {
-          return false;
-        }
-      },
-    );
+    const hasOptions = _.every(parsed, (datum: { label: any; value: any }) => {
+      if (_.isObject(datum)) {
+        return _.isString(datum.label) && _.isString(datum.value);
+      } else {
+        return false;
+      }
+    });
     if (!hasOptions) {
       return {
         isValid: false,

app/client/src/widgets/DropdownWidget.tsx

@@ -40,9 +40,10 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
     };
   }
 
-  componentDidUpdate(nextProps: DropdownWidgetProps) {
+  componentDidUpdate(prevProps: DropdownWidgetProps) {
+    super.componentDidUpdate(prevProps);
     if (
-      JSON.stringify(nextProps.options) !== JSON.stringify(this.props.options)
+      JSON.stringify(prevProps.options) !== JSON.stringify(this.props.options)
     ) {
       this.updateWidgetMetaProperty("selectedIndex", undefined);
       this.updateWidgetMetaProperty("selectedIndexArr", []);
@@ -124,7 +125,6 @@ export type SelectionType = "SINGLE_SELECT" | "MULTI_SELECT";
 export interface DropdownOption {
   label: string;
   value: string;
-  id: string;
 }
 
 export interface DropdownWidgetProps extends WidgetProps {