Adds draggable action component (#43)

Signed-off-by: Drew Baugher <[email protected]>

models/interfaces.ts

@@ -26,6 +26,8 @@
 
 // TODO: Backend has PR out to change this model, this needs to be updated once that goes through
 
+import { ActionType } from "../public/pages/VisualCreatePolicy/utils/actions";
+
 export interface ManagedIndexMetaData {
   index: string;
   indexUuid: string;
@@ -102,6 +104,36 @@ export interface State {
   transitions: object[];
 }
 
+export interface Action {
+  timeout?: string;
+  retry?: Retry;
+  [action: string]: any;
+}
+
+export interface Retry {
+  count: number;
+  backoff?: string;
+  delay?: string;
+}
+
+export interface UIAction<Data> {
+  action: Data;
+  id: string;
+  type: ActionType;
+  render: (uiAction: UIAction<Data>, onChangeAction: (uiAction: UIAction<Data>) => void) => JSX.Element | null;
+  clone: (action: Data) => UIAction<Data>;
+  content: () => JSX.Element | string | null;
+  toAction: () => Action;
+}
+
+export interface RolloverAction extends Action {
+  rollover: {
+    min_size?: string;
+    min_doc_count?: number;
+    min_index_age?: string;
+  };
+}
+
 export interface Rollup {
   continuous: boolean;
   delay: number | null;

public/pages/VisualCreatePolicy/components/DraggableAction/DraggableAction.test.tsx

@@ -0,0 +1,64 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import { EuiDragDropContext, EuiDroppable } from "@elastic/eui";
+import DraggableAction from "./DraggableAction";
+import { DEFAULT_ROLLOVER } from "../../utils/constants";
+import { RolloverUIAction } from "../../utils/actions";
+import { UIAction } from "../../../../../models/interfaces";
+import { fireEvent } from "@testing-library/dom";
+
+describe("<DraggableAction /> spec", () => {
+  it("renders the component", () => {
+    const action: UIAction<any> = new RolloverUIAction(DEFAULT_ROLLOVER);
+    const { container } = render(
+      <EuiDragDropContext onDragEnd={() => {}}>
+        <EuiDroppable droppableId="STATE_ACTIONS_DROPPABLE_AREA">
+          <DraggableAction action={action} idx={0} isLast={true} onClickDeleteAction={() => {}} onClickEditAction={() => {}} />
+        </EuiDroppable>
+      </EuiDragDropContext>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("calls onclickdeleteaction when clicking delete button", () => {
+    const action: UIAction<any> = new RolloverUIAction(DEFAULT_ROLLOVER);
+    const onClickDeleteAction = jest.fn();
+    const { getByTestId } = render(
+      <EuiDragDropContext onDragEnd={() => {}}>
+        <EuiDroppable droppableId="STATE_ACTIONS_DROPPABLE_AREA">
+          <DraggableAction action={action} idx={0} isLast={true} onClickDeleteAction={onClickDeleteAction} onClickEditAction={() => {}} />
+        </EuiDroppable>
+      </EuiDragDropContext>
+    );
+
+    fireEvent.click(getByTestId("draggable-action-delete-button"));
+    expect(onClickDeleteAction).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onclickeditaction when clicking delete button", () => {
+    const action: UIAction<any> = new RolloverUIAction(DEFAULT_ROLLOVER);
+    const onClickEditAction = jest.fn();
+    const { getByTestId } = render(
+      <EuiDragDropContext onDragEnd={() => {}}>
+        <EuiDroppable droppableId="STATE_ACTIONS_DROPPABLE_AREA">
+          <DraggableAction action={action} idx={0} isLast={true} onClickDeleteAction={() => {}} onClickEditAction={onClickEditAction} />
+        </EuiDroppable>
+      </EuiDragDropContext>
+    );
+
+    fireEvent.click(getByTestId("draggable-action-edit-button"));
+    expect(onClickEditAction).toHaveBeenCalledTimes(1);
+  });
+});

public/pages/VisualCreatePolicy/components/DraggableAction/DraggableAction.tsx

@@ -0,0 +1,59 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from "react";
+import { EuiFlexGroup, EuiFlexItem, EuiDraggable, EuiPanel, EuiIcon, EuiButtonIcon } from "@elastic/eui";
+import { Action, UIAction } from "../../../../../models/interfaces";
+
+interface DraggableActionProps {
+  action: UIAction<Action>;
+  idx: number;
+  isLast: boolean;
+  onClickDeleteAction: () => void;
+  onClickEditAction: () => void;
+}
+
+const DraggableAction = ({ action: { id, content }, idx, isLast, onClickDeleteAction, onClickEditAction }: DraggableActionProps) => (
+  <EuiDraggable style={{ padding: `0px 0px ${isLast ? "0px" : "10px"} 0px` }} key={id} index={idx} draggableId={id} customDragHandle={true}>
+    {(provided) => (
+      <EuiPanel className="custom" paddingSize="m">
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <div {...provided.dragHandleProps} aria-label="Drag Handle">
+              <EuiIcon type="grab" />
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem>{content()}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              iconType="trash"
+              aria-label="Delete"
+              color="danger"
+              onClick={onClickDeleteAction}
+              data-test-subj="draggable-action-delete-button"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              iconType="pencil"
+              aria-label="Edit"
+              color="primary"
+              onClick={onClickEditAction}
+              data-test-subj="draggable-action-edit-button"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    )}
+  </EuiDraggable>
+);
+
+export default DraggableAction;

public/pages/VisualCreatePolicy/components/DraggableAction/__snapshots__/DraggableAction.test.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DraggableAction /> spec renders the component 1`] = `
+<div
+  class="euiDroppable euiDroppable--noGrow"
+  data-rbd-droppable-context-id="0"
+  data-rbd-droppable-id="STATE_ACTIONS_DROPPABLE_AREA"
+  data-test-subj="droppable"
+>
+  <div
+    class="euiDraggable euiDraggable--hasCustomDragHandle"
+    data-rbd-draggable-context-id="0"
+    data-rbd-draggable-id="some_html_id"
+    data-test-subj="draggable"
+    style="padding: 0px 0px 0px 0px;"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium custom euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            aria-describedby="rbd-hidden-text-0-hidden-text-0"
+            aria-label="Drag Handle"
+            data-rbd-drag-handle-context-id="0"
+            data-rbd-drag-handle-draggable-id="some_html_id"
+            draggable="false"
+            role="button"
+            tabindex="0"
+          >
+            EuiIconMock
+          </div>
+        </div>
+        <div
+          class="euiFlexItem"
+        >
+          Rollover
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            aria-label="Delete"
+            class="euiButtonIcon euiButtonIcon--danger"
+            data-test-subj="draggable-action-delete-button"
+            type="button"
+          >
+            EuiIconMock
+          </button>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            aria-label="Edit"
+            class="euiButtonIcon euiButtonIcon--primary"
+            data-test-subj="draggable-action-edit-button"
+            type="button"
+          >
+            EuiIconMock
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiDroppable__placeholder"
+  />
+</div>
+`;

public/pages/VisualCreatePolicy/components/DraggableAction/index.ts

@@ -0,0 +1,14 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import DraggableAction from "./DraggableAction";
+
+export default DraggableAction;

public/pages/VisualCreatePolicy/utils/actions.ts

@@ -0,0 +1,50 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { htmlIdGenerator } from "@elastic/eui";
+import { RolloverAction, UIAction } from "../../../../models/interfaces";
+
+const makeId = htmlIdGenerator();
+
+export enum ActionType {
+  Allocation = "allocation",
+  Close = "close",
+  Delete = "delete",
+  ForceMerge = "force_merge",
+  IndexPriority = "index_priority",
+  Notification = "notification",
+  Open = "open",
+  ReadOnly = "read_only",
+  ReadWrite = "read_write",
+  ReplicaCount = "replica_count",
+  Rollover = "rollover",
+  Rollup = "rollup",
+  Snapshot = "snapshot",
+}
+
+export class RolloverUIAction implements UIAction<RolloverAction> {
+  id: string;
+  action: RolloverAction;
+  type = ActionType.Rollover;
+
+  constructor(action: RolloverAction, id: string = makeId()) {
+    this.action = action;
+    this.id = id;
+  }
+
+  content = () => `Rollover`;
+
+  clone = (action: RolloverAction) => new RolloverUIAction(action, this.id);
+
+  render = () => null;
+
+  toAction = () => this.action;
+}