Small Tweaks

Dockerfile

@@ -1,5 +1,7 @@
 FROM golang:1.13
 
+RUN apt-get update -y && apt-get install -y ca-certificates
+
 ADD go.mod /go/src/github.com/minio/mcs/go.mod
 ADD go.sum /go/src/github.com/minio/mcs/go.sum
 WORKDIR /go/src/github.com/minio/mcs/
@@ -12,7 +14,6 @@ WORKDIR /go/src/github.com/minio/mcs/
 
 ENV CGO_ENABLED=0
 
-RUN apt-get update -y && apt-get install -y ca-certificates
 RUN go build -ldflags "-w -s" -a -o mcs ./cmd/mcs
 
 FROM scratch

portal-ui/src/index.tsx

@@ -33,34 +33,35 @@ const GlobalCss = withStyles({
       fontSize: "14px",
       textTransform: "capitalize",
       padding: "16px 25px 16px 25px",
-      borderRadius: "3px"
+      borderRadius: 3,
     },
     ".MuiButton-sizeSmall": {
       padding: "4px 10px",
-      fontSize: "0.8125rem"
+      fontSize: "0.8125rem",
     },
     ".MuiTableCell-head": {
       borderRadius: "3px 3px 0px 0px",
-      fontSize: "13px"
+      fontSize: 13,
     },
     ".MuiPaper-root": {
-      borderRadius: "3px"
+      borderRadius: 3,
     },
     ".MuiDrawer-paperAnchorDockedLeft": {
-      borderRight: "0px"
+      borderRight: 0,
     },
     ".MuiDrawer-root": {
       "& .MuiPaper-root": {
-        borderRadius: "0px"
-      }
-    }
-  }
+        borderRadius: 0,
+      },
+    },
+  },
 })(() => null);
 
 ReactDOM.render(
   <Provider store={configureStore()}>
     <GlobalCss />
     <ThemeProvider theme={theme}>
+      {/*<ThemeProvider theme={newTheme}>*/}
       <Routes />
     </ThemeProvider>
   </Provider>,

portal-ui/src/screens/Console/ServiceAccounts/CredentialsPrompt.tsx → portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx

@@ -19,7 +19,7 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { NewServiceAccount } from "./types";
 import { Button } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
+import ModalWrapper from "../ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
 
 const styles = (theme: Theme) =>
@@ -36,6 +36,7 @@ interface ICredentialsPromptProps {
   classes: any;
   newServiceAccount: NewServiceAccount | null;
   open: boolean;
+  entity: string;
   closeModal: () => void;
 }
 
@@ -60,6 +61,7 @@ const CredentialsPrompt = ({
   newServiceAccount,
   open,
   closeModal,
+  entity,
 }: ICredentialsPromptProps) => {
   if (!newServiceAccount) {
     return null;
@@ -71,12 +73,12 @@ const CredentialsPrompt = ({
       onClose={() => {
         closeModal();
       }}
-      title="New Service Account Created"
+      title={`New ${entity} Created`}
     >
       <React.Fragment>
         <Grid container>
           <Grid item xs={12} className={classes.formScrollable}>
-            A new service account has been created with the following details:
+            A new {entity} has been created with the following details:
             <ul>
               <li>
                 <b>Access Key:</b> {newServiceAccount.accessKey}

portal-ui/src/screens/Console/Common/CredentialsPrompt/types.ts

@@ -0,0 +1,20 @@
+// 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/>.
+
+export interface NewServiceAccount {
+  accessKey: string;
+  secretKey: string;
+}

portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx

@@ -47,6 +47,8 @@ interface InputBoxProps {
   error?: string;
   required?: boolean;
   placeholder?: string;
+  min?: string;
+  max?: string;
 }
 
 const styles = (theme: Theme) =>
@@ -110,8 +112,20 @@ const InputBoxWrapper = ({
   error = "",
   required = false,
   placeholder = "",
+  min,
+  max,
   classes,
 }: InputBoxProps) => {
+  let inputProps: any = { "data-index": index };
+
+  if (type === "number" && min) {
+    inputProps["min"] = min;
+  }
+
+  if (type === "number" && max) {
+    inputProps["max"] = max;
+  }
+
   return (
     <React.Fragment>
       <Grid
@@ -154,7 +168,7 @@ const InputBoxWrapper = ({
             type={type}
             multiline={multiline}
             autoComplete={autoComplete}
-            inputProps={{ "data-index": index }}
+            inputProps={inputProps}
             error={error !== ""}
             helperText={error}
             placeholder={placeholder}

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -20,7 +20,7 @@ export const fieldBasic = {
   inputLabel: {
     fontWeight: 500,
     marginRight: 10,
-    width: 100,
+    width: 160,
     fontSize: 14,
     color: "#393939",
     textAlign: "right" as const,

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

@@ -27,6 +27,7 @@ const styles = (theme: Theme) =>
       flexGrow: 1,
     },
     wizardSteps: {
+      minWidth: 180,
       marginRight: 10,
       "& ul": {
         padding: 15,

portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx

@@ -59,8 +59,6 @@ const WizardPage = ({ classes, page, pageChange }: IWizardPage) => {
     }
   };
 
-  console.log("buttons", page);
-
   return (
     <div className={classes.wizardStepContainer}>
       <div className={classes.wizardComponent}>{page.componentRender}</div>

portal-ui/src/screens/Console/Common/GenericWizard/types.ts

@@ -26,6 +26,7 @@ export interface IWizardElement {
   label: string;
   componentRender: any;
   buttons: IWizardButton[];
+  advancedOnly?: boolean;
 }
 
 export interface IWizardMain {

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

@@ -20,6 +20,8 @@ import ViewIcon from "./TableActionIcons/ViewIcon";
 import PencilIcon from "./TableActionIcons/PencilIcon";
 import DeleteIcon from "./TableActionIcons/DeleteIcon";
 import DescriptionIcon from "./TableActionIcons/DescriptionIcon";
+import CloudIcon from "./TableActionIcons/CloudIcon";
+import ConsoleIcon from "./TableActionIcons/ConsoleIcon";
 import { Link } from "react-router-dom";
 
 interface IActionButton {
@@ -42,6 +44,10 @@ const defineIcon = (type: string, selected: boolean) => {
       return <DeleteIcon active={selected} />;
     case "description":
       return <DescriptionIcon active={selected} />;
+    case "cloud":
+      return <CloudIcon active={selected} />;
+    case "console":
+      return <ConsoleIcon active={selected} />;
   }
 
   return null;
@@ -64,7 +70,8 @@ const TableActionButton = ({
       size={"small"}
       onClick={
         onClick
-          ? () => {
+          ? (e) => {
+              e.stopPropagation();
               onClick(valueClick);
             }
           : () => null
@@ -79,7 +86,16 @@ const TableActionButton = ({
   }
 
   if (isString(to)) {
-    return <Link to={`${to}/${valueClick}`}>{buttonElement}</Link>;
+    return (
+      <Link
+        to={`${to}/${valueClick}`}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {buttonElement}
+      </Link>
+    );
   }
 
   return null;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const CloudIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill={active ? selected : unSelected}
+        d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"
+      />
+    </svg>
+  );
+};
+
+export default CloudIcon;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const ConsoleIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill={active ? selected : unSelected}
+        d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3v-3h18v3z"
+      />
+    </svg>
+  );
+};
+
+export default ConsoleIcon;

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

@@ -32,6 +32,7 @@ import {
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { TablePaginationActionsProps } from "@material-ui/core/TablePagination/TablePaginationActions";
 import TableActionButton from "./TableActionButton";
+import history from "../../../../history";
 import { checkboxIcons } from "../FormComponents/common/styleLibrary";
 
 //Interfaces for table Items
@@ -143,6 +144,16 @@ const styles = (theme: Theme) =>
       paddingTop: "100px",
       paddingBottom: "100px",
     },
+    rowElement: {
+      userSelect: "none",
+
+      "&:hover": {
+        backgroundColor: "#ececec",
+      },
+    },
+    rowClickable: {
+      cursor: "pointer",
+    },
     ...checkboxIcons,
   });
 
@@ -190,6 +201,10 @@ const elementActions = (
   idField: string
 ) => {
   return actions.map((action: ItemActions, index: number) => {
+    if (action.type === "view") {
+      return null;
+    }
+
     return (
       <TableActionButton
         type={action.type}
@@ -219,6 +234,24 @@ const TableWrapper = ({
   stickyHeader = false,
   paginatorConfig,
 }: TableWrapperProps) => {
+  const findView = itemActions
+    ? itemActions.find((el) => el.type === "view")
+    : null;
+
+  const clickAction = (rowItem: any) => {
+    if (findView) {
+      const valueClick = findView.sendOnlyId ? rowItem[idField] : rowItem;
+      if (findView.to) {
+        history.push(`${findView.to}/${valueClick}`);
+        return;
+      }
+
+      if (findView.onClick) {
+        findView.onClick(valueClick);
+      }
+    }
+  };
+
   return (
     <Grid item xs={12}>
       <Paper className={classes.paper}>
@@ -265,7 +298,15 @@ const TableWrapper = ({
                   : false;
 
                 return (
-                  <TableRow key={`tb-${entityName}-${index.toString()}`}>
+                  <TableRow
+                    key={`tb-${entityName}-${index.toString()}`}
+                    className={`${findView ? classes.rowClickable : ""} ${
+                      classes.rowElement
+                    }`}
+                    onClick={() => {
+                      clickAction(record);
+                    }}
+                  >
                     {onSelect && selectedItems && (
                       <TableCell
                         padding="checkbox"
@@ -278,6 +319,10 @@ const TableWrapper = ({
                           inputProps={{ "aria-label": "secondary checkbox" }}
                           checked={isSelected}
                           onChange={onSelect}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                          }}
                           checkedIcon={<span className={classes.checkedIcon} />}
                           icon={<span className={classes.unCheckedIcon} />}
                         />

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

@@ -378,10 +378,6 @@ const Console = ({
                   ) : null}
                 </Switch>
               </Router>
-
-              <Box pt={4}>
-                <Copyright />
-              </Box>
             </Container>
           </main>
         </div>

portal-ui/src/screens/Console/ServiceAccounts/AddServiceAccount.tsx

@@ -25,7 +25,7 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import api from "../../../common/api";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/material.css";
-import { NewServiceAccount } from "./types";
+import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
 import HelpIcon from "@material-ui/icons/Help";
 
 require("codemirror/mode/javascript/javascript");