diff --git a/changes/issue-29505-idp-premium-message b/changes/issue-29505-idp-premium-message new file mode 100644 index 0000000000..59deb3fbdb --- /dev/null +++ b/changes/issue-29505-idp-premium-message @@ -0,0 +1 @@ +- fix issue where idp integration page would not show the premium feature message. diff --git a/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/IdentityProviders.tsx b/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/IdentityProviders.tsx index e74ae8b95b..90907413bc 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/IdentityProviders.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/IdentityProviders.tsx @@ -1,16 +1,18 @@ -import React from "react"; +import React, { useContext } from "react"; import { useQuery } from "react-query"; import idpAPI from "services/entities/idp"; import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants"; import { internationalTimeFormat } from "utilities/helpers"; import { dateAgo } from "utilities/date_format"; +import { AppContext } from "context/app"; import SectionHeader from "components/SectionHeader"; import CustomLink from "components/CustomLink"; import TooltipWrapper from "components/TooltipWrapper"; import DataError from "components/DataError"; import Spinner from "components/Spinner"; +import PremiumFeatureMessage from "components/PremiumFeatureMessage"; import SectionCard from "../MdmSettings/components/SectionCard"; @@ -37,13 +39,13 @@ const AddEndUserInfoCard = () => { ); }; -interface IRecievedEndUserInfoCardProps { - recievedAt: string; +interface IReceivedEndUserInfoCardProps { + receivedAt: string; } -const RecievedEndUserInfoCard = ({ - recievedAt, -}: IRecievedEndUserInfoCardProps) => { +const ReceivedEndUserInfoCard = ({ + receivedAt, +}: IReceivedEndUserInfoCardProps) => { return ( - ({dateAgo(recievedAt)}) + ({dateAgo(receivedAt)}) .

@@ -100,7 +102,7 @@ const FailedEndUserInfoCard = ({ position="top" tipContent={`Error: ${details}`} underline={false} - className={`${baseClass}__recieved-tooltip`} + className={`${baseClass}__received-tooltip`} > Failed to receive end user information from your IdP ( {dateAgo(receivedAt)}). @@ -111,15 +113,22 @@ const FailedEndUserInfoCard = ({ }; const IdentityProviders = () => { + const { isPremiumTier } = useContext(AppContext); + const { data, isLoading, isError } = useQuery( ["scim_details"], () => idpAPI.getSCIMDetails(), { ...DEFAULT_USE_QUERY_OPTIONS, + enabled: isPremiumTier, } ); const renderContent = () => { + if (!isPremiumTier) { + return ; + } + if (isError) { return ; } @@ -134,7 +143,7 @@ const IdentityProviders = () => { return ; } else if (data.last_request.status === "success") { return ( - + ); } else if (data.last_request.status === "error") { return ( diff --git a/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/_styles.scss index b02bc96ca7..e1835faa6b 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/_styles.scss +++ b/frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/_styles.scss @@ -4,7 +4,7 @@ margin: 0; } - &__recieved-tooltip { + &__received-tooltip { display: inline-flex; }