Fix Bug 69883

Expired certificate is not highlighted

packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js

@@ -67,6 +67,15 @@ const StyledCertificatesTable = styled.div`
 
       .column-row {
         display: flex;
+
+        .description {
+          color: ${(props) =>
+            props.theme.client.settings.integration.sso.textColor};
+        }
+        .error-description {
+          color: ${(props) =>
+            props.theme.client.settings.integration.sso.errorColor};
+        }
       }
     }
 

packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/CertificatesTable.js

@@ -30,12 +30,13 @@ import FileSvgUrl from "PUBLIC_DIR/images/icons/32/file.svg?url";
 import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
+import moment from "moment-timezone";
+import { ReactSVG } from "react-svg";
 
 import { Text } from "@docspace/shared/components/text";
 import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
 
 import StyledCertificatesTable from "../styled-containers/StyledCertificatesTable";
-import { ReactSVG } from "react-svg";
 
 const CertificatesTable = (props) => {
   const { t } = useTranslation(["SingleSignOn", "Common"]);
@@ -50,7 +51,6 @@ const CertificatesTable = (props) => {
   } = props;
 
   const renderRow = (certificate, index) => {
-    console.log(prefix, index);
     const onEdit = () => {
       prefix === "sp"
         ? setSpCertificate(certificate, index, true)
@@ -86,6 +86,8 @@ const CertificatesTable = (props) => {
       return `${new Date(date).toLocaleDateString()}`;
     };
 
+    const isExpired = moment().isAfter(moment(certificate.expiredDate));
+
     return (
       <div key={`certificate-${index}`} className="row">
         <ReactSVG src={FileSvgUrl} />
@@ -97,7 +99,7 @@ const CertificatesTable = (props) => {
           </div>
           <div className="column-row">
             <Text
-              color="#a3a9ae"
+              className={isExpired ? "error-description" : "description"}
               fontSize="12px"
               fontWeight={600}
               lineHeight="16px"

packages/shared/themes/base.ts

@@ -3064,6 +3064,8 @@ export const getBaseTheme = () => {
           linkColor: link,
 
           sso: {
+            textColor: gray,
+            errorColor: lightErrorStatus,
             toggleContentBackground: grayLight,
             iconButton: black,
             iconButtonDisabled: gray,

packages/shared/themes/dark.ts

@@ -3043,6 +3043,8 @@ const Dark: TTheme = {
         linkColor: "#E06A1B",
 
         sso: {
+          textColor: grayDark,
+          errorColor: darkErrorStatus,
           toggleContentBackground: "#474747",
           iconButton: white,
           iconButtonDisabled: "#333",