New UI for third party id suffix

build/asset-manifest.json

@@ -4,10 +4,8 @@
     "main.js": "/static/js/bundle.js",
     "static/js/787.bundle.js": "/static/js/787.bundle.js",
     "static/media/auth-background.png": "/static/media/auth-background.png",
-    "static/media/provider-okta.png": "/static/media/provider-okta.png",
     "static/media/auth-background-portrait.png": "/static/media/auth-background-portrait.png",
     "static/media/provider-bitbucket.png": "/static/media/provider-bitbucket.png",
-    "static/media/provider-active-directory.png": "/static/media/provider-active-directory.png",
     "static/media/favicon.ico": "/static/media/favicon.ico",
     "static/media/ST_icon_light_theme.svg": "/static/media/ST_icon_light_theme.svg",
     "static/media/ST_full_logo_dark_theme.svg": "/static/media/ST_full_logo_dark_theme.svg",
@@ -16,11 +14,14 @@
     "static/media/ST_full_logo_light_theme.svg": "/static/media/ST_full_logo_light_theme.svg",
     "static/media/ST_icon_dark_theme.svg": "/static/media/ST_icon_dark_theme.svg",
     "static/media/auth-method.svg": "/static/media/auth-method.svg",
+    "static/media/provider-okta.svg": "/static/media/provider-okta.svg",
     "static/media/no-tenants.svg": "/static/media/no-tenants.svg",
     "static/media/logo.svg": "/static/media/logo.svg",
     "static/media/plus-square.svg": "/static/media/plus-square.svg",
     "static/media/roles-and-permissions.svg": "/static/media/roles-and-permissions.svg",
     "static/media/no-results.svg": "/static/media/no-results.svg",
+    "static/media/question-mark.svg": "/static/media/question-mark.svg",
+    "static/media/help-circle.svg": "/static/media/help-circle.svg",
     "static/media/info-icon.svg": "/static/media/info-icon.svg",
     "static/media/email.svg": "/static/media/email.svg",
     "static/media/user-managment.svg": "/static/media/user-managment.svg",
@@ -34,6 +35,7 @@
     "static/media/clear.svg": "/static/media/clear.svg",
     "static/media/provider-apple.svg": "/static/media/provider-apple.svg",
     "static/media/provider-discord.svg": "/static/media/provider-discord.svg",
+    "static/media/edit-unfilled.svg": "/static/media/edit-unfilled.svg",
     "static/media/provider-linkedin.svg": "/static/media/provider-linkedin.svg",
     "static/media/search.png": "/static/media/search.png",
     "static/media/phone-no.svg": "/static/media/phone-no.svg",
@@ -77,6 +79,7 @@
     "static/media/arrow-down.svg": "/static/media/arrow-down.svg",
     "static/media/hamburger-menu.svg": "/static/media/hamburger-menu.svg",
     "static/media/provider-facebook.svg": "/static/media/provider-facebook.svg",
+    "static/media/provider-active-directory.svg": "/static/media/provider-active-directory.svg",
     "static/media/Union-yellow.png": "/static/media/Union-yellow.png",
     "static/media/Union.png": "/static/media/Union.png",
     "static/media/checkmark-yellow.svg": "/static/media/checkmark-yellow.svg",

src/images.ts

@@ -46,6 +46,7 @@ import "./assets/eye.svg";
 import "./assets/favicon.ico";
 import "./assets/form-field-error-icon.svg";
 import "./assets/hamburger-menu.svg";
+import "./assets/help-circle.svg";
 import "./assets/help-icon.png";
 import "./assets/info-icon.svg";
 import "./assets/left-arrow-dark.svg";

src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/ProviderInfoForm.tsx

@@ -25,6 +25,7 @@ import { getImageUrl, isValidHttpUrl } from "../../../../../utils";
 import { PopupContentContext } from "../../../../contexts/PopupContentContext";
 import Button from "../../../button";
 import { Toggle } from "../../../toggle/Toggle";
+import TooltipContainer from "../../../tooltip/tooltip";
 import { DeleteThirdPartyProviderDialog } from "../deleteThirdPartyProvider/DeleteThirdPartyProvider";
 import { KeyValueInput } from "../keyValueInput/KeyValueInput";
 import { useTenantDetailContext } from "../TenantDetailContext";
@@ -50,6 +51,7 @@ export const ProviderInfoForm = ({
 }) => {
 	const [providerConfigState, setProviderConfigState] = useState(getInitialProviderInfo(providerConfig, providerId));
 	const [errorState, setErrorState] = useState<Record<string, string>>({});
+	const [isSuffixFieldVisible, setIsSuffixFieldVisible] = useState(false);
 	const [emailSelectValue, setEmailSelectValue] = useState<EmailSelectState>(() => {
 		if (providerConfig?.requireEmail === false) {
 			return "sometimes";
@@ -154,11 +156,23 @@ export const ProviderInfoForm = ({
 		} else {
 			setProviderConfigState((prev) => ({
 				...prev,
-				thirdPartyId: `${baseProviderId}-${e.target.value.trim()}`,
+				thirdPartyId: `${baseProviderId}${e.target.value.trim()}`,
 			}));
 		}
 	};
 
+	const showSuffixField = () => {
+		setIsSuffixFieldVisible(true);
+		setProviderConfigState((prev) => ({
+			...prev,
+			thirdPartyId: `${baseProviderId}-`,
+		}));
+		setErrorState((prev) => {
+			const { thirdPartyId: _, ...rest } = prev;
+			return rest;
+		});
+	};
+
 	const handleSave = async () => {
 		setErrorState({});
 		const clientTypes = new Set<string>();
@@ -178,7 +192,11 @@ export const ProviderInfoForm = ({
 			}));
 			isValid = false;
 		} else if (doesThirdPartyIdExist && isAddingNewProvider) {
-			setErrorState((prev) => ({ ...prev, thirdPartyId: "Third Party Id already exists" }));
+			setErrorState((prev) => ({
+				...prev,
+				thirdPartyId:
+					"Another provider with this third party id already exists, please enter a unique third party id or a unique suffix if adding a built-in provider.",
+			}));
 			isValid = false;
 		}
 
@@ -395,17 +413,46 @@ export const ProviderInfoForm = ({
 			</PanelHeader>
 			<div className="fields-container">
 				{shouldUsePrefixField ? (
-					<ThirdPartyProviderInput
-						label="Third Party Id"
-						tooltip="The Id of the provider."
-						prefix={`${baseProviderId}-`}
-						type="text"
-						name="thirdPartyId"
-						value={providerConfigState.thirdPartyId.slice(baseProviderId.length + 1)}
-						forceShowError
-						error={errorState.thirdPartyId}
-						handleChange={handleThirdPartyIdSuffixChange}
-					/>
+					isSuffixFieldVisible ? (
+						<ThirdPartyProviderInput
+							label="Third Party Id"
+							tooltip="The Id of the provider."
+							prefix={`${baseProviderId}`}
+							type="text"
+							name="thirdPartyId"
+							value={providerConfigState.thirdPartyId.slice(baseProviderId.length)}
+							forceShowError
+							error={errorState.thirdPartyId}
+							handleChange={handleThirdPartyIdSuffixChange}
+						/>
+					) : (
+						<div className="suffix-preview-field">
+							<ThirdPartyProviderInputLabel
+								label="Third Party Id"
+								tooltip="The Id of the provider."
+								minLabelWidth={120}
+							/>
+							<div className="suffix-preview-container">
+								<div className="suffix-preview-container__suffix">
+									<span className="prefix-preview">{baseProviderId}</span>
+									<div className="suffix-button-container">
+										<button onClick={showSuffixField}>+ Add suffix</button>
+										<TooltipContainer tooltip="You can add multiple providers of the same type by adding a unique suffix to the third party id.">
+											<span className="suffix-button-container__help-icon">
+												<img
+													src={getImageUrl("help-circle.svg")}
+													alt="help"
+												/>
+											</span>
+										</TooltipContainer>
+									</div>
+								</div>
+								{errorState.thirdPartyId && (
+									<div className="suffix-preview-container__error">{errorState.thirdPartyId}</div>
+								)}
+							</div>
+						</div>
+					)
 				) : (
 					<ThirdPartyProviderInput
 						label="Third Party Id"

src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss

@@ -450,3 +450,60 @@
 		}
 	}
 }
+
+.suffix-preview-field {
+	display: flex;
+	gap: 20px;
+
+	@media screen and (max-width: 480px) {
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.third-party-provider-input-container__label-container {
+		margin-top: 3.5px;
+	}
+}
+
+.suffix-preview-container {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+
+	&__suffix {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+	}
+
+	&__error {
+		font-family: inherit;
+		font-weight: 400;
+		font-size: 13px;
+		line-height: 21px;
+		color: var(--color-error);
+	}
+}
+
+.prefix-preview {
+	font-family: inherit;
+	font-size: 14.5px;
+	line-height: 21px;
+	color: var(--color-black);
+}
+
+.suffix-button-container {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+
+	button {
+		border: none;
+		background: transparent;
+		font-family: inherit;
+		font-weight: 500;
+		font-size: 14px;
+		line-height: 17px;
+		color: var(--color-secondary);
+	}
+}