From cb478e8d1c31a093041bdfebc6f80e7dbf3416de Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Tue, 5 Nov 2019 12:08:41 +0000
Subject: [PATCH] Adding action selector control.

---
 .../propertyControls/ActionSelector.tsx       | 136 ++++++++++++++++++
 app/client/src/constants/ActionConstants.tsx  |  16 +++
 app/client/src/pages/Editor/Popper.tsx        |   1 +
 .../src/utils/PropertyControlRegistry.tsx     |   6 +
 4 files changed, 159 insertions(+)
 create mode 100644 app/client/src/components/propertyControls/ActionSelector.tsx

diff --git a/app/client/src/components/propertyControls/ActionSelector.tsx b/app/client/src/components/propertyControls/ActionSelector.tsx
new file mode 100644
index 0000000000..6992664b1c
--- /dev/null
+++ b/app/client/src/components/propertyControls/ActionSelector.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import { ControlWrapper, StyledDropDown } from "./StyledControls";
+import { ControlType } from "../../constants/PropertyControlConstants";
+import {
+  ActionPayload,
+  ActionType,
+  PropertyPaneActionDropdownOptions,
+} from "../../constants/ActionConstants";
+import { DropdownOption } from "../../widgets/DropdownWidget";
+import { MenuItem, Button } from "@blueprintjs/core";
+import { IItemRendererProps } from "@blueprintjs/select";
+import { connect } from "react-redux";
+import { AppState } from "../../reducers";
+import { ActionDataState } from "../../reducers/entityReducers/actionsReducer";
+
+const DEFAULT_ACTION_TYPE = "Select Action Type";
+
+class ActionSelectorControl extends BaseControl<
+  ControlProps & ActionDataState
+> {
+  getSelectionActionType(): string {
+    const selectedActionTypeValue =
+      this.props.propertyValue &&
+      this.props.propertyValue[0] &&
+      this.props.propertyValue[0].actionType;
+
+    const foundActionType = PropertyPaneActionDropdownOptions.find(
+      actionType => actionType.value === selectedActionTypeValue,
+    );
+
+    return foundActionType ? foundActionType.label : DEFAULT_ACTION_TYPE;
+  }
+  getSelectionActionLabel(allActions: DropdownOption[]): string {
+    const selectedActionId =
+      this.props.propertyValue &&
+      this.props.propertyValue[0] &&
+      this.props.propertyValue[0].actionId;
+
+    const foundAction = allActions.find(
+      action => action.value === selectedActionId,
+    );
+
+    return foundAction ? foundAction.label : "Select Action";
+  }
+  render() {
+    const actionTypeOptions: DropdownOption[] = PropertyPaneActionDropdownOptions;
+    const allActions = this.props.data.map(action => {
+      return {
+        label: action.name,
+        value: action.id,
+      };
+    });
+    const selectedActionType = this.getSelectionActionType();
+    const selectedActionLabel = this.getSelectionActionLabel(allActions);
+    return (
+      <ControlWrapper>
+        <label>{this.props.label}</label>
+        <StyledDropDown
+          items={actionTypeOptions}
+          filterable={false}
+          itemRenderer={this.renderItem}
+          onItemSelect={this.onTypeSelect}
+          noResults={<MenuItem disabled={true} text="No results." />}
+        >
+          <Button text={selectedActionType} rightIcon="chevron-down" />
+        </StyledDropDown>
+
+        {selectedActionType !== DEFAULT_ACTION_TYPE && (
+          <StyledDropDown
+            items={allActions}
+            filterable={false}
+            itemRenderer={this.renderItem}
+            onItemSelect={this.onActionSelect}
+            noResults={<MenuItem disabled={true} text="No results." />}
+          >
+            <Button text={selectedActionLabel} rightIcon="chevron-down" />
+          </StyledDropDown>
+        )}
+      </ControlWrapper>
+    );
+  }
+
+  onTypeSelect = (item: DropdownOption): void => {
+    const actionPayloads: ActionPayload[] = this.props.propertyValue
+      ? this.props.propertyValue.slice()
+      : [];
+    const actionPayload = actionPayloads[0];
+    if (actionPayload) {
+      actionPayload.actionId = "";
+      actionPayload.actionType = item.value as ActionType;
+    } else {
+      const actionPayload = { actionType: item.value } as ActionPayload;
+      actionPayloads.push(actionPayload);
+    }
+    this.updateProperty(this.props.propertyName, actionPayloads);
+  };
+
+  onActionSelect = (item: DropdownOption): void => {
+    const actionPayloads: ActionPayload[] = this.props.propertyValue
+      ? this.props.propertyValue.slice()
+      : [];
+    const actionPayload = actionPayloads[0];
+    actionPayload.actionId = item.value as ActionType;
+
+    this.updateProperty(this.props.propertyName, actionPayloads);
+  };
+
+  renderItem = (option: DropdownOption, itemProps: IItemRendererProps) => {
+    if (!itemProps.modifiers.matchesPredicate) {
+      return null;
+    }
+    return (
+      <MenuItem
+        active={itemProps.modifiers.active}
+        key={option.value}
+        onClick={itemProps.handleClick}
+        text={option.label}
+      />
+    );
+  };
+
+  getControlType(): ControlType {
+    return "ACTION_SELECTOR";
+  }
+}
+
+export interface ActionSelectorControlProps extends ControlProps {
+  propertyValue: ActionPayload[];
+}
+
+const mapStateToProps = (state: AppState): ActionDataState => ({
+  ...state.entities.actions,
+});
+
+export default connect(mapStateToProps)(ActionSelectorControl);
diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx
index 90fdad1c8f..e928c659db 100644
--- a/app/client/src/constants/ActionConstants.tsx
+++ b/app/client/src/constants/ActionConstants.tsx
@@ -1,4 +1,5 @@
 import { AlertType, MessageIntent } from "../widgets/AlertWidget";
+import { DropdownOption } from "../widgets/DropdownWidget";
 
 export type EventType =
   | "ON_CLICK"
@@ -21,6 +22,21 @@ export type ActionType =
   | "SET_VALUE"
   | "DOWNLOAD";
 
+export enum ActionType1 {
+  "API",
+  "QUERY",
+  "NAVIGATION",
+  "ALERT",
+  "JS_FUNCTION",
+  "SET_VALUE",
+  "DOWNLOAD",
+}
+
+export const PropertyPaneActionDropdownOptions: DropdownOption[] = [
+  { label: "Call API", value: "API" },
+  // { label: "Run Query", value: "QUERY" },
+];
+
 export interface ActionPayload {
   actionId: string;
   actionType: ActionType;
diff --git a/app/client/src/pages/Editor/Popper.tsx b/app/client/src/pages/Editor/Popper.tsx
index f73824694d..a277ba8a3d 100644
--- a/app/client/src/pages/Editor/Popper.tsx
+++ b/app/client/src/pages/Editor/Popper.tsx
@@ -16,6 +16,7 @@ const PopperWrapper = styled(PaneWrapper)`
   max-height: ${props => props.theme.propertyPane.height}px;
   width: ${props => props.theme.propertyPane.width}px;
   margin: ${props => props.theme.spaces[6]}px;
+  overflow-y: auto;
 `;
 
 /* eslint-disable react/display-name */
diff --git a/app/client/src/utils/PropertyControlRegistry.tsx b/app/client/src/utils/PropertyControlRegistry.tsx
index 990ccb5805..19e5367533 100644
--- a/app/client/src/utils/PropertyControlRegistry.tsx
+++ b/app/client/src/utils/PropertyControlRegistry.tsx
@@ -15,6 +15,7 @@ import CodeEditorControl from "../components/propertyControls/CodeEditorControl"
 import MultiSelectControl, {
   MultiSelectControlProps,
 } from "../components/propertyControls/MultiSelectControl";
+import ActionSelectorControl from "../components/propertyControls/ActionSelector";
 
 class PropertyControlRegistry {
   static registerPropertyControlBuilders() {
@@ -48,6 +49,11 @@ class PropertyControlRegistry {
         return <OptionControl {...controlProps} />;
       },
     });
+    PropertyControlFactory.registerControlBuilder("ACTION_SELECTOR", {
+      buildPropertyControl(controlProps: ControlProps): JSX.Element {
+        return <ActionSelectorControl {...controlProps} />;
+      },
+    });
   }
 }