Recover Icon. Add Tooltip support for TableActionButton (#1215)

Signed-off-by: Daniel Valdivia <[email protected]>

Author: dvaldivia

portal-ui/src/icons/RecoverIcon.tsx

@@ -0,0 +1,33 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 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 { SvgIcon, SvgIconProps } from "@mui/material";
+
+const RecoverIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 255.999">
+        <path
+          d="M39.2213+256.001C40.6927+255.994+42.1568+255.792+43.5753+255.401L100.813+239.901C104.645+238.898+107.914+236.399+109.887+232.964C111.86+229.528+112.371+225.445+111.305+221.63L95.7702+164.495C90.6702+145.747+62.1182+153.481+67.2132+172.229L73.0132+193.562L74.0462+197.062C73.8702+196.968+73.7042+196.862+73.5212+196.774C31.3819+176.285+13.8232+125.52+34.2982+83.374C46.3933+58.6766+69.6654+41.3358+96.7903+36.809C100.154+36.251+103.157+34.3788+105.14+31.6049C107.122+28.8309+107.92+25.3828+107.358+22.02C106.18+15.0178+99.5504+10.2948+92.5473+11.468C57.2167+17.3704+26.9074+39.9628+11.1583+72.135C3.87084+87.0355+0.0559253+103.394+0.000251187+119.981L0.000251187+120.664C0.113227+162.907+24.2688+201.4+62.2582+219.874C62.3172+219.906+62.3792+219.923+62.4382+219.951L52.8662+222.279L35.8212+226.894C18.5692+231.567+23.7062+256.005+39.2142+256.005L39.2213+256.001ZM161.326+244.717C162.041+244.716+162.755+244.658+163.461+244.542C198.791+238.639+229.099+216.046+244.848+183.875C252.172+168.901+255.986+152.456+256.002+135.787L256.002+135.558C255.976+93.2388+231.809+54.6428+193.75+36.137C193.686+36.105+193.627+36.087+193.564+36.056L203.14+33.733L220.181+29.118C237.415+24.449+232.31+0.064988+216.847+0.00298769L216.716+0.00298769C215.268+0.0183407+213.829+0.222051+212.433+0.608988L155.191+16.109C151.359+17.112+148.09+19.6118+146.118+23.0473C144.146+26.4827+143.637+30.5661+144.703+34.381L160.234+91.515C165.334+110.264+193.892+102.53+188.796+83.781L182.996+62.445L181.957+58.945C182.133+59.039+182.303+59.145+182.488+59.233C224.628+79.7218+242.185+130.489+221.705+172.633C209.614+197.332+186.343+214.674+159.219+219.202C155.856+219.759+152.853+221.631+150.87+224.404C148.887+227.177+148.089+230.624+148.649+233.987C149.691+240.177+155.047+244.711+161.323+244.718L161.326+244.717ZM149.004+128.001C149.004+116.403+139.602+107.001+128.004+107.001C116.406+107.001+107.004+116.403+107.004+128.001C107.004+139.599+116.406+149.001+128.004+149.001C139.602+149.001+149.004+139.599+149.004+128.001Z"
+          opacity="1"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default RecoverIcon;

portal-ui/src/icons/index.ts

@@ -103,4 +103,5 @@ export { default as LambdaIcon } from "./LambdaIcon";
 export { default as TiersIcon } from "./TiersIcon";
 export { default as OpenListIcon } from "./OpenListIcon";
 export { default as ToolsIcon } from "./ToolsIcon";
+export { default as RecoverIcon } from "./RecoverIcon";
 export { default as PrometheusIcon } from "./PrometheusIcon";

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx

@@ -94,6 +94,7 @@ import ObjectBrowserIcon from "../../../../../../icons/ObjectBrowserIcon";
 import PreviewFileContent from "../Preview/PreviewFileContent";
 import RestoreFileVersion from "./RestoreFileVersion";
 import BoxIconButton from "../../../../Common/BoxIconButton";
+import { RecoverIcon } from "../../../../../../icons";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -446,6 +447,7 @@ const ObjectDetails = ({
 
   const tableActions: ItemActions[] = [
     {
+      label: "Share",
       type: "share",
       onClick: (item: any) => {
         setObjectToShare(item);
@@ -461,6 +463,7 @@ const ObjectDetails = ({
       },
     },
     {
+      label: "Download",
       type: "download",
       onClick: (item: IFileInfo) => {
         downloadObject(item);
@@ -474,7 +477,8 @@ const ObjectDetails = ({
       },
     },
     {
-      type: "restore",
+      label: "Restore",
+      type: <RecoverIcon />,
       onClick: (item: IFileInfo) => {
         setRestoreVersion(item.version_id || "");
         setRestoreVersionOpen(true);

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

@@ -13,24 +13,19 @@
 //
 // 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 React, { Component } from "react";
 import isString from "lodash/isString";
 import { Link } from "react-router-dom";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import CloudIcon from "./TableActionIcons/CloudIcon";
 import ConsoleIcon from "./TableActionIcons/ConsoleIcon";
 import DisableIcon from "./TableActionIcons/DisableIcon";
 import FormatDriveIcon from "./TableActionIcons/FormatDriveIcon";
 import EditIcon from "../../../../icons/EditIcon";
 import TrashIcon from "../../../../icons/TrashIcon";
-import {
-  IAMPoliciesIcon,
-  PreviewIcon,
-  ShareIcon,
-  HistoryIcon,
-} from "../../../../icons";
+import { IAMPoliciesIcon, PreviewIcon, ShareIcon } from "../../../../icons";
 import DownloadIcon from "../../../../icons/DownloadIcon";
 
 const styles = () =>
@@ -48,7 +43,8 @@ const styles = () =>
   });
 
 interface IActionButton {
-  type: string;
+  label?: string;
+  type: string | Component;
   onClick?: (id: string) => any;
   to?: string;
   valueToSend: any;
@@ -83,8 +79,6 @@ const defineIcon = (type: string, selected: boolean) => {
       return <FormatDriveIcon active={selected} />;
     case "preview":
       return <PreviewIcon />;
-    case "restore":
-      return <HistoryIcon />;
   }
 
   return null;
@@ -100,13 +94,17 @@ const TableActionButton = ({
   sendOnlyId = false,
   disabled = false,
   classes,
+  label,
 }: IActionButton) => {
   const valueClick = sendOnlyId ? valueToSend[idField] : valueToSend;
 
-  const buttonElement = (
+  const icon = typeof type === "string" ? defineIcon(type, selected) : type;
+  let buttonElement = (
     <IconButton
-      aria-label={type}
+      aria-label={typeof type === "string" ? type : ""}
       size={"small"}
+      className={`${classes.spacing} ${disabled ? classes.buttonDisabled : ""}`}
+      disabled={disabled}
       onClick={
         onClick
           ? (e) => {
@@ -119,13 +117,15 @@ const TableActionButton = ({
             }
           : () => null
       }
-      className={`${classes.spacing} ${disabled ? classes.buttonDisabled : ""}`}
-      disabled={disabled}
     >
-      {defineIcon(type, selected)}
+      {icon}
     </IconButton>
   );
 
+  if (label && label !== "") {
+    buttonElement = <Tooltip title={label}>{buttonElement}</Tooltip>;
+  }
+
   if (onClick) {
     return buttonElement;
   }

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

@@ -43,7 +43,8 @@ import CheckboxWrapper from "../FormComponents/CheckboxWrapper/CheckboxWrapper";
 //Interfaces for table Items
 
 export interface ItemActions {
-  type: string;
+  label?: string;
+  type: string | any;
   to?: string;
   sendOnlyId?: boolean;
   disableButtonFunction?: (itemValue: any) => boolean;
@@ -466,6 +467,7 @@ const elementActions = (
 
     return (
       <TableActionButton
+        label={action.label}
         type={action.type}
         onClick={action.onClick}
         to={action.to}