From 46af0ff74c57af7d9cb98580f515e750da9206f1 Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Thu, 4 Aug 2022 09:14:38 -0700
Subject: [PATCH] Protocol Logos for Add Tenant - Identity Provider (#2210)
---
portal-ui/src/icons/LDAPIcon.tsx | 81 +++++++++++++++++++
portal-ui/src/icons/OIDCIcon.tsx | 58 +++++++++++++
portal-ui/src/icons/index.ts | 2 +
.../RadioGroupSelector/RadioGroupSelector.tsx | 12 +--
.../AddTenant/Steps/IdentityProvider.tsx | 23 +++---
.../Console/Tenants/LogoComponents.tsx | 53 ++++++++++++
.../TenantDetails/TenantIdentityProvider.tsx | 18 ++++-
7 files changed, 228 insertions(+), 19 deletions(-)
create mode 100644 portal-ui/src/icons/LDAPIcon.tsx
create mode 100644 portal-ui/src/icons/OIDCIcon.tsx
create mode 100644 portal-ui/src/screens/Console/Tenants/LogoComponents.tsx
diff --git a/portal-ui/src/icons/LDAPIcon.tsx b/portal-ui/src/icons/LDAPIcon.tsx
new file mode 100644
index 000000000..7d06f8696
--- /dev/null
+++ 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 .
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const LDAPIcon = (props: SVGProps) => (
+
+);
+
+export default LDAPIcon;
diff --git a/portal-ui/src/icons/OIDCIcon.tsx b/portal-ui/src/icons/OIDCIcon.tsx
new file mode 100644
index 000000000..01701d2fb
--- /dev/null
+++ 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 .
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const OIDCIcon = (props: SVGProps) => (
+
+);
+
+export default OIDCIcon;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
index b403b4b10..1d5090151 100644
--- 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";
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
index 8e9e53835..db2c8efa8 100644
--- 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 (
-
-
+
+ {label}
{tooltip !== "" && (
@@ -124,7 +124,7 @@ export const RadioGroupSelector = ({
)}
-
+
{selectorOptions.map((selectorOption) => {
return (
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
index 6ffff8aa2..671c7d78a 100644
--- 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.
-
-
+ {
dispatch(setIDP(e.target.value));
}}
selectorOptions={[
- { label: "Built-in", value: "Built-in" },
- { label: "OpenID", value: "OpenID" },
- { label: "Active Directory", value: "AD" },
+ { label: , value: "Built-in" },
+ { label: , value: "OpenID" },
+ { label: , value: "AD" },
]}
/>
diff --git a/portal-ui/src/screens/Console/Tenants/LogoComponents.tsx b/portal-ui/src/screens/Console/Tenants/LogoComponents.tsx
new file mode 100644
index 000000000..26ee4c817
--- /dev/null
+++ 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 .
+
+import { Grid } from "@mui/material";
+import LDAPIcon from "../../../icons/LDAPIcon";
+import { OIDCIcon } from "../../../icons";
+import { UsersIcon } from "../../../icons";
+
+export const OIDCLogoElement = () => {
+ return (
+
+
+
+
+ Open ID
+
+ );
+};
+
+export const LDAPLogoElement = () => {
+ return (
+
+
+
+
+ LDAP / Active Directory
+
+ );
+};
+
+export const BuiltInLogoElement = () => {
+ return (
+
+
+
+
+ Built-in
+
+ );
+};
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
index 2eef7031a..919a36cc2 100644
--- 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) => {