Table component implementation (#71)

Implementation of a new table wrapper component that will be used across the application.

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx

@@ -0,0 +1,60 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+import React from "react";
+import { IconButton } from "@material-ui/core";
+import ViewIcon from "./TableActionIcons/ViewIcon";
+import PencilIcon from "./TableActionIcons/PencilIcon";
+import DeleteIcon from "./TableActionIcons/DeleteIcon";
+
+interface IActionButton {
+  type: string;
+  onClick: (id: string) => any;
+  valueToSend: any;
+  selected: boolean;
+}
+
+const defineIcon = (type: string, selected: boolean) => {
+  switch (type) {
+    case "view":
+      return <ViewIcon active={selected} />;
+    case "edit":
+      return <PencilIcon active={selected} />;
+    case "delete":
+      return <DeleteIcon active={selected} />;
+  }
+
+  return null;
+};
+
+const TableActionButton = ({
+  type,
+  onClick,
+  valueToSend,
+  selected
+}: IActionButton) => {
+  return (
+    <IconButton
+      aria-label={type}
+      onClick={() => {
+        onClick(valueToSend);
+      }}
+    >
+      {defineIcon(type, selected)}
+    </IconButton>
+  );
+};
+
+export default TableActionButton;

portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DeleteIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const DeleteIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <g transform="translate(-1225 -657)">
+        <path
+          fill={active ? selected : unSelected}
+          d="M0,8H0a8,8,0,0,0,8,8H8a8,8,0,0,0,8-8h0A8,8,0,0,0,8,0H8A8,8,0,0,0,0,8Zm10.007,3.489L8,9.482,5.993,11.489,4.511,10.007,6.518,8,4.511,5.993,5.993,4.511,8,6.518l2.007-2.007,1.482,1.482L9.482,8l2.007,2.007Z"
+          transform="translate(1225 657)"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default DeleteIcon;

portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/PencilIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const PencilIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 13.833 13.833"
+    >
+      <path
+        fill={active ? selected : unSelected}
+        d="M2.934,16H0V13.066L10.607,2.459a1,1,0,0,1,1.414,0l1.52,1.52a1,1,0,0,1,0,1.414Z"
+        transform="translate(0 -2.167)"
+      />
+    </svg>
+  );
+};
+
+export default PencilIcon;

portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/ViewIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const ViewIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 11.856"
+    >
+      <path
+        fill={active ? selected : unSelected}
+        d="M-54,8l1.764,2.614A7.52,7.52,0,0,0-46,13.928h0a7.52,7.52,0,0,0,6.234-3.314L-38,8l-1.764-2.614A7.52,7.52,0,0,0-46,2.072h0a7.52,7.52,0,0,0-6.234,3.314Zm10.286,0A2.285,2.285,0,0,1-46,10.286,2.285,2.285,0,0,1-48.286,8,2.285,2.285,0,0,1-46,5.714,2.285,2.285,0,0,1-43.714,8Zm1.3,0A3.59,3.59,0,0,1-46,11.59,3.59,3.59,0,0,1-49.59,8,3.59,3.59,0,0,1-46,4.41,3.59,3.59,0,0,1-42.41,8Z"
+        transform="translate(54 -2.072)"
+      />
+    </svg>
+  );
+};
+
+export default ViewIcon;

portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts

@@ -0,0 +1,6 @@
+export interface IIcon {
+  active: boolean;
+}
+
+export const unSelected = "#adadad";
+export const selected = "#201763";