Merge branch 'fix/api-pane-creation' into 'release'

Api pane creation fixes

See merge request theappsmith/internal-tools-client!511

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

@@ -28,6 +28,7 @@ type TreeDropdownProps = {
   defaultText: string;
   onSelect: (value: TreeDropdownOption, defaultVal?: string) => void;
   selectedLabelModifier?: (option: TreeDropdownOption) => string;
+  toggle?: React.ReactNode;
 };
 
 function getSelectedOption(
@@ -64,6 +65,7 @@ export default function TreeDropdown(props: TreeDropdownProps) {
     onSelect,
     getDefaults,
     selectedLabelModifier,
+    toggle,
   } = props;
   const selectedOption = getSelectedOption(
     selectedValue,
@@ -90,6 +92,7 @@ export default function TreeDropdown(props: TreeDropdownProps) {
         icon={option.id === "create" ? "plus" : undefined}
         onClick={option.children ? _.noop : () => handleSelect(option)}
         text={option.label}
+        intent={option.intent}
         popoverProps={{
           minimal: true,
           interactionKind: PopoverInteractionKind.CLICK,
@@ -103,19 +106,27 @@ export default function TreeDropdown(props: TreeDropdownProps) {
 
   const list = optionTree.map(renderTreeOption);
   const menuItems = <Menu>{list}</Menu>;
-  return (
+  const defaultToggle = (
     <StyledDropDownContainer>
-      <StyledPopover usePortal={true} minimal={true} content={menuItems}>
+      <BlueprintButton
-        <BlueprintButton
+        rightIcon={IconNames.CHEVRON_DOWN}
-          rightIcon={IconNames.CHEVRON_DOWN}
+        text={
-          text={
+          selectedLabelModifier
-            selectedLabelModifier
+            ? selectedLabelModifier(selectedOption)
-              ? selectedLabelModifier(selectedOption)
+            : selectedOption.label
-              : selectedOption.label
+        }
-          }
+        className={`t--open-dropdown-${defaultText.split(" ").join("-")}`}
-          className={`t--open-dropdown-${defaultText.split(" ").join("-")}`}
+      />
-        />
-      </StyledPopover>
     </StyledDropDownContainer>
   );
+  return (
+    <StyledPopover
+      usePortal={true}
+      minimal={true}
+      content={menuItems}
+      position={PopoverPosition.AUTO_END}
+    >
+      {toggle ? toggle : defaultToggle}
+    </StyledPopover>
+  );
 }

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

@@ -154,6 +154,9 @@ export const StyledDropDown = styled(DropDown)`
 `;
 
 export const StyledPopover = styled(Popover)`
+  .${Classes.POPOVER_TARGET} {
+    display: flex;
+  }
   div {
     flex: 1 1 auto;
   }
@@ -188,6 +191,9 @@ export const StyledMenuItem = styled(MenuItem)`
     border-radius: ${props => props.theme.radii[1]}px;
     &:hover {
       background: ${Colors.POLAR};
+      &&&.bp3-menu-item.bp3-intent-danger:hover {
+        background: ${props => props.theme.colors.error};
+      }
     }
     &.${Classes.ACTIVE} {
       background: ${Colors.POLAR};

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

@@ -37,6 +37,8 @@ const HTTPMethod = styled.span<{ method?: string }>`
         return "#F7C75B";
       case "PUT":
         return "#30A5E0";
+      case "PATCH":
+        return "#8E8E8E";
       case "DELETE":
         return "#CE4257";
       default:

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

@@ -17,9 +17,10 @@ import {
   DropResult,
 } from "react-beautiful-dnd";
 import { PageListPayload } from "constants/ReduxActionConstants";
-import ContextDropdown from "components/editorComponents/ContextDropdown";
+import TreeDropdown from "components/editorComponents/actioncreator/TreeDropdown";
 import { theme } from "constants/DefaultTheme";
 import { Colors } from "constants/Colors";
+import { ControlIcons } from "icons/ControlIcons";
 
 const LoadingContainer = styled(CenteredWrapper)`
   height: 50%;
@@ -411,8 +412,13 @@ class EditorSidebar extends React.Component<Props, State> {
                                                 draftIds.indexOf(item.id) === -1
                                               }
                                             />
-                                            <ContextDropdown
+                                            <TreeDropdown
-                                              options={[
+                                              defaultText=""
+                                              onSelect={() => {
+                                                return null;
+                                              }}
+                                              selectedValue=""
+                                              optionTree={[
                                                 {
                                                   value: "copy",
                                                   onSelect: () => null,
@@ -461,12 +467,12 @@ class EditorSidebar extends React.Component<Props, State> {
                                                   intent: "danger",
                                                 },
                                               ]}
-                                              toggle={{
+                                              toggle={
-                                                type: "icon",
+                                                <ControlIcons.MORE_HORIZONTAL_CONTROL
-                                                icon: "MORE_HORIZONTAL_CONTROL",
+                                                  width={theme.fontSizes[4]}
-                                                iconSize: theme.fontSizes[4],
+                                                  height={theme.fontSizes[4]}
-                                              }}
+                                                />
-                                              className="more"
+                                              }
                                             />
                                           </React.Fragment>
                                         )}

app/client/src/reducers/entityReducers/actionsReducer.tsx

@@ -49,7 +49,12 @@ const actionsReducer = createReducer(initialState, {
     state: ActionDataState,
     action: ReduxAction<RestAction>,
   ): ActionDataState =>
-    state.concat([{ config: action.payload, isLoading: false }]),
+    state.concat([
+      {
+        config: { ...action.payload, id: action.payload.name },
+        isLoading: false,
+      },
+    ]),
   [ReduxActionTypes.CREATE_ACTION_SUCCESS]: (
     state: ActionDataState,
     action: ReduxAction<RestAction>,
@@ -57,7 +62,7 @@ const actionsReducer = createReducer(initialState, {
     state.map(a => {
       if (
         a.config.pageId === action.payload.pageId &&
-        a.config.name === action.payload.name
+        a.config.id === action.payload.name
       ) {
         return { ...a, config: action.payload };
       }
@@ -70,7 +75,7 @@ const actionsReducer = createReducer(initialState, {
     state.filter(
       a =>
         a.config.name !== action.payload.name &&
-        a.config.pageId !== action.payload.pageId,
+        a.config.id !== action.payload.name,
     ),
   [ReduxActionTypes.UPDATE_ACTION_SUCCESS]: (
     state: ActionDataState,

app/client/src/sagas/ActionSagas.ts

@@ -701,7 +701,7 @@ export function* watchActionSagas() {
     takeEvery(ReduxActionTypes.FETCH_ACTIONS_INIT, fetchActionsSaga),
     takeEvery(ReduxActionTypes.EXECUTE_ACTION, executeAppAction),
     takeLatest(ReduxActionTypes.RUN_API_REQUEST, runApiActionSaga),
-    takeLatest(ReduxActionTypes.CREATE_ACTION_INIT, createActionSaga),
+    takeEvery(ReduxActionTypes.CREATE_ACTION_INIT, createActionSaga),
     takeLatest(ReduxActionTypes.UPDATE_ACTION_INIT, updateActionSaga),
     takeLatest(ReduxActionTypes.DELETE_ACTION_INIT, deleteActionSaga),
     takeLatest(

app/client/src/widgets/DropdownWidget.tsx

@@ -12,6 +12,7 @@ import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import { VALIDATORS } from "utils/Validators";
 import { DataTree } from "entities/DataTree/dataTreeFactory";
+import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
 class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -181,6 +182,7 @@ export interface DropdownOption {
   id?: string;
   onSelect?: (option: DropdownOption) => void;
   children?: DropdownOption[];
+  intent?: BlueprintIntent;
 }
 
 export interface DropdownWidgetProps extends WidgetProps {