fix typos and add premium feature message to idp integration page (#30079)

Fixes #29505

Quick fix to show the premium feature message for idp integrations card

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] Manual QA for all new/changed functionality

changes/issue-29505-idp-premium-message

@@ -0,0 +1 @@
+- fix issue where idp integration page would not show the premium feature message.

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 (
     <SectionCard
       iconName="success"
@@ -61,11 +63,11 @@ const RecievedEndUserInfoCard = ({
         <TooltipWrapper
           showArrow
           position="top"
-          tipContent={internationalTimeFormat(new Date(recievedAt))}
+          tipContent={internationalTimeFormat(new Date(receivedAt))}
           underline={false}
-          className={`${baseClass}__recieved-tooltip`}
+          className={`${baseClass}__received-tooltip`}
         >
-          ({dateAgo(recievedAt)})
+          ({dateAgo(receivedAt)})
         </TooltipWrapper>
         .
       </p>
@@ -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 <PremiumFeatureMessage />;
+    }
+
     if (isError) {
       return <DataError />;
     }
@@ -134,7 +143,7 @@ const IdentityProviders = () => {
       return <AddEndUserInfoCard />;
     } else if (data.last_request.status === "success") {
       return (
-        <RecievedEndUserInfoCard recievedAt={data.last_request.requested_at} />
+        <ReceivedEndUserInfoCard receivedAt={data.last_request.requested_at} />
       );
     } else if (data.last_request.status === "error") {
       return (

frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/_styles.scss

@@ -4,7 +4,7 @@
     margin: 0;
   }
 
-  &__recieved-tooltip {
+  &__received-tooltip {
     display: inline-flex;
   }