Protocol Logos for Add Tenant - Identity Provider (#2210)

2022-08-04 09:14:38 -07:00
parent b3651ed0a3
commit 46af0ff74c
7 changed files with 228 additions and 19 deletions
--- a/portal-ui/src/icons/LDAPIcon.tsx
+++ b/portal-ui/src/icons/LDAPIcon.tsx
@@ -0,0 +1,81 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 * as React from "react";
+import { SVGProps } from "react";
+
+const LDAPIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    className={`min-icon`}
+    fill={"currentcolor"}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 550 350"
+  >
+    <metadata id="metadata4860"></metadata>
+    <defs id="defs4858">
+      <clipPath clipPathUnits="userSpaceOnUse" id="clipPath4882">
+        <path d="M 117,49 H 262 V 240 H 117 Z" id="path4880" />
+      </clipPath>
+    </defs>
+    <g id="g4862" transform="matrix(1.3333333,0,0,1.3333333,0,-199.99999)">
+      <g id="g5617" transform="translate(-0.61796941,-4.3257855)">
+        <path
+          transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+          id="path5017"
+          d="M 106.41289,293.96864 C 70.04539,293.67237 34.537909,293.3758 27.507375,293.3096 L 14.724586,293.18923 75.914974,188.8693 C 109.56969,131.49334 137.22453,84.543112 137.37018,84.535469 c 0.40034,-0.02101 84.5549,148.389841 84.58064,149.162261 0.0123,0.3688 -7.67138,14.22492 -17.07481,30.79139 l -17.09715,30.12084 -7.62163,-0.0513 c -4.19189,-0.0282 -37.37684,-0.29372 -73.74434,-0.58999 z"
+        />
+        <path
+          transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+          id="path5019"
+          d="m 231.52153,216.29609 c -1.78448,-2.78648 -56.30805,-96.43861 -56.30805,-96.71724 0,-0.37557 46.76629,-81.164403 47.28254,-81.680648 0.25121,-0.251211 54.29846,91.624688 56.25895,95.635598 0.25352,0.51868 -5.58291,11.22113 -22.82887,41.86203 -12.74321,22.64086 -23.30746,41.32406 -23.4761,41.51823 -0.16865,0.19416 -0.58646,-0.0839 -0.92847,-0.61797 z"
+        />
+        <path
+          transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+          id="path5021"
+          d="m 188.85669,326.46569 c 0.087,-0.23351 27.87116,-49.19652 61.74268,-108.80668 l 61.58456,-108.38212 1.96842,3.38056 c 1.08262,1.85931 29.54627,50.37713 63.25256,107.81739 l 61.28415,104.43682 -1.65524,0.0945 c -0.91038,0.052 -43.18277,0.37347 -93.93866,0.71445 -50.75588,0.34098 -106.25889,0.74364 -123.34,0.89481 -21.25746,0.18813 -31.00669,0.14089 -30.89847,-0.14972 z"
+        />
+        <path
+          transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+          id="path5023"
+          d="m 441.01638,296.1697 c -2.28982,-3.78012 -75.22429,-129.17288 -75.5565,-129.90068 -0.32741,-0.71732 3.48432,-7.56149 23.74743,-42.63989 13.27559,-22.98198 24.27489,-41.830698 24.44289,-41.886033 0.2706,-0.08913 126.68565,215.010973 126.46114,215.178533 -0.0495,0.0369 -22.18445,0.18265 -49.18885,0.32387 l -49.09891,0.25674 z"
+        />
+      </g>
+      <path
+        d=""
+        id="path5031"
+        transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+      />
+      <path
+        d=""
+        id="path5033"
+        transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+      />
+      <path
+        d=""
+        id="path5039"
+        transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+      />
+      <path
+        d=""
+        id="path5041"
+        transform="matrix(0.75000002,0,0,0.75000002,0,150)"
+      />
+    </g>
+  </svg>
+);
+
+export default LDAPIcon;
--- a/portal-ui/src/icons/OIDCIcon.tsx
+++ b/portal-ui/src/icons/OIDCIcon.tsx
@@ -0,0 +1,58 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 * as React from "react";
+import { SVGProps } from "react";
+
+const OIDCIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill={"currentcolor"}
+    className={`min-icon`}
+    viewBox="0 0 275 275"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <defs id="defs3736" />
+    <g
+      transform="matrix(1.3333333,0,0,-1.3333333,-286.36662,267.54837)"
+      id="g3740"
+    >
+      <path
+        d="M 310.77497,185.02828 V 25.08918 5.02828 l 32,15.0609 v 180.5721 z"
+        id="path3746"
+      />
+      <path
+        d="m 421.59727,132.22848 4.417,-45.864 -61.883,13.464"
+        id="path3748"
+      />
+      <path
+        d="m 246.77497,73.53608 c 0,22.674 24.707,41.769 58.383,47.598 v 20.325 c -51.51,-6.226 -90.383,-34.267 -90.383,-67.923 0,-34.869 41.725,-63.709 96,-68.508 v 20.061 c -36.516,4.578 -64,24.528 -64,48.447 m 101.617,67.915 v -20.317 c 13.399,-2.319 25.385,-6.727 34.9511,-12.64 l 22.6269,13.984 c -15.42,9.531 -35.322,16.283 -57.578,18.973"
+        id="path3750"
+      />
+      <path
+        d="m 421.59727,132.22848 4.417,-45.864 -61.883,13.464"
+        id="path3766"
+      />
+      <path
+        d="M 310.77497,185.02828 V 25.08918 5.02828 l 32,15.0609 v 180.5721 z"
+        id="path3764"
+      />
+      <path d="m 246.77497,73.53608 c 0,22.674 24.707,41.769 58.383,47.598 v 20.325 c -51.51,-6.226 -90.383,-34.267 -90.383,-67.923 0,-34.869 41.725,-63.709 96,-68.508 v 20.061 c -36.516,4.578 -64,24.528 -64,48.447 m 101.617,67.915 v -20.317 c 13.399,-2.319 25.385,-6.727 34.9511,-12.64 l 22.6269,13.984 c -15.42,9.531 -35.322,16.283 -57.578,18.973" />
+    </g>
+  </svg>
+);
+
+export default OIDCIcon;
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -200,3 +200,5 @@ export { default as AGPLV3Logo } from "./AGPLV3Logo";
 export { default as EnterpriseLightLogo } from "./EnterpriseLightLogo";
 export { default as StandardLightLogo } from "./StandardLightLogo";
 export { default as AGPLV3DarkLogo } from "./AGPLV3DarkLogo";
+export { default as LDAPIcon } from "./LDAPIcon";
+export { default as OIDCIcon } from "./OIDCIcon";
--- a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
@@ -28,14 +28,14 @@ import { fieldBasic, radioIcons, tooltipHelper } from "../common/styleLibrary";
 import HelpIcon from "../../../../../icons/HelpIcon";

 export interface SelectorTypes {
-  label: string;
+  label: any;
  value: string;
 }

 interface RadioGroupProps {
  selectorOptions: SelectorTypes[];
  currentSelection: string;
-  label: string;
+  label: any;
  id: string;
  name: string;
  tooltip?: string;
@@ -109,8 +109,8 @@ export const RadioGroupSelector = ({
  displayInColumn = false,
 }: RadioGroupProps) => {
  return (
-    <Grid container alignItems={"center"}>
-      <Grid item xs>
+    <Grid container spacing={1}>
+      <Grid item fontSize={60}>
        <InputLabel htmlFor={id} className={classes.inputLabel}>
          <span>{label}</span>
          {tooltip !== "" && (
@@ -124,7 +124,7 @@ export const RadioGroupSelector = ({
          )}
        </InputLabel>
      </Grid>
-      <Grid item xs className={classes.radioOptionsLayout}>
+      <Grid item>
        <RadioGroup
          aria-label={id}
          id={id}
@@ -132,7 +132,7 @@ export const RadioGroupSelector = ({
          value={currentSelection}
          onChange={onChange}
          row={!displayInColumn}
-          style={{ display: "block", textAlign: "right" }}
+          style={{ display: "flex", textAlign: "right" }}
        >
          {selectorOptions.map((selectorOption) => {
            return (
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
@@ -31,6 +31,11 @@ import IDPActiveDirectory from "./IdentityProvider/IDPActiveDirectory";
 import IDPOpenID from "./IdentityProvider/IDPOpenID";
 import makeStyles from "@mui/styles/makeStyles";
 import IDPBuiltIn from "./IdentityProvider/IDPBuiltIn";
+import {
+  OIDCLogoElement,
+  LDAPLogoElement,
+  BuiltInLogoElement,
+} from "../../LogoComponents";

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -40,12 +45,13 @@ const useStyles = makeStyles((theme: Theme) =>
      marginBottom: 10,

      "& label": {
-        fontSize: 14,
+        fontSize: 16,
+        fontWeight: 600,
      },
      "& div": {
        display: "flex",
-        flexFlow: "column",
-        alignItems: "baseline",
+        flexFlow: "row",
+        alignItems: "top",
      },
    },
    ...createTenantCommon,
@@ -71,20 +77,19 @@ const IdentityProvider = () => {
          Manager.
        </span>
      </div>
-      <Grid item xs={12} className={classes.protocolRadioOptions}>
-        <label>Protocol</label>
+      <Grid item xs={12} padding="10px">
        <RadioGroupSelector
          currentSelection={idpSelection}
          id="idp-options"
          name="idp-options"
-          label=" "
+          label="Protocol"
          onChange={(e) => {
            dispatch(setIDP(e.target.value));
          }}
          selectorOptions={[
-            { label: "Built-in", value: "Built-in" },
-            { label: "OpenID", value: "OpenID" },
-            { label: "Active Directory", value: "AD" },
+            { label: <BuiltInLogoElement />, value: "Built-in" },
+            { label: <OIDCLogoElement />, value: "OpenID" },
+            { label: <LDAPLogoElement />, value: "AD" },
          ]}
        />
      </Grid>
--- a/portal-ui/src/screens/Console/Tenants/LogoComponents.tsx
+++ b/portal-ui/src/screens/Console/Tenants/LogoComponents.tsx
@@ -0,0 +1,53 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 { Grid } from "@mui/material";
+import LDAPIcon from "../../../icons/LDAPIcon";
+import { OIDCIcon } from "../../../icons";
+import { UsersIcon } from "../../../icons";
+
+export const OIDCLogoElement = () => {
+  return (
+    <Grid container columnGap={1}>
+      <Grid>
+        <OIDCIcon width={"16px"} height={"16px"} />
+      </Grid>
+      <Grid item>Open ID</Grid>
+    </Grid>
+  );
+};
+
+export const LDAPLogoElement = () => {
+  return (
+    <Grid container columnGap={1}>
+      <Grid>
+        <LDAPIcon width={"16px"} height={"16px"} />
+      </Grid>
+      <Grid item>LDAP / Active Directory</Grid>
+    </Grid>
+  );
+};
+
+export const BuiltInLogoElement = () => {
+  return (
+    <Grid container columnGap={1}>
+      <Grid>
+        <UsersIcon width={"16px"} height={"16px"} />
+      </Grid>
+      <Grid item>Built-in</Grid>
+    </Grid>
+  );
+};
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
@@ -42,6 +42,11 @@ import {
  ITenantIdentityProviderResponse,
  ITenantSetAdministratorsRequest,
 } from "../types";
+import {
+  OIDCLogoElement,
+  LDAPLogoElement,
+  BuiltInLogoElement,
+} from "../LogoComponents";
 import { clearValidationError } from "../utils";
 import {
  commonFormValidation,
@@ -371,7 +376,12 @@ const TenantIdentityProvider = ({ classes }: ITenantIdentityProvider) => {
            <h1 className={classes.sectionTitle}>Identity Provider</h1>
            <hr className={classes.hrClass} />
          </Grid>
-          <Grid item xs={12} className={classes.protocolRadioOptions}>
+          <Grid
+            item
+            xs={12}
+            className={classes.protocolRadioOptions}
+            paddingBottom={1}
+          >
            <RadioGroupSelector
              currentSelection={idpSelection}
              id="idp-options"
@@ -381,9 +391,9 @@ const TenantIdentityProvider = ({ classes }: ITenantIdentityProvider) => {
                setIdpSelection(e.target.value);
              }}
              selectorOptions={[
-                { label: "Built-in", value: "Built-in" },
-                { label: "OpenID", value: "OpenID" },
-                { label: "Active Directory", value: "AD" },
+                { label: <BuiltInLogoElement />, value: "Built-in" },
+                { label: <OIDCLogoElement />, value: "OpenID" },
+                { label: <LDAPLogoElement />, value: "AD" },
              ]}
            />
          </Grid>