update breadcrumb icon

openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-right-arrow.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#37352F" stroke="#37352F" stroke-width=".6" d="M11.546 8c0 .14-.054.28-.16.386L5.93 13.84a.545.545 0 1 1-.771-.771L10.229 8l-5.07-5.069a.545.545 0 1 1 .772-.771l5.455 5.454c.106.107.16.246.16.386Z"/></svg>
+<svg width="5" height="7" viewBox="0 0 5 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.128 0.86H1.508L4.412 3.608L1.508 6.368H0.128L3.032 3.608L0.128 0.86Z" fill="#787486"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/SettingsSso/SettingsSso.tsx

@@ -343,7 +343,11 @@ const SettingsSso = () => {
   if (isLoading) {
     return (
       <PageLayoutV1 className="sso-settings-page" pageTitle={t('label.sso')}>
-        <TitleBreadcrumb className="m-b-xs" titleLinks={breadcrumb} />
+        <TitleBreadcrumb
+          useCustomArrow
+          className="m-b-xs"
+          titleLinks={breadcrumb}
+        />
         <Loader />
       </PageLayoutV1>
     );
@@ -353,7 +357,11 @@ const SettingsSso = () => {
   if (showProviderSelector) {
     return (
       <PageLayoutV1 className="sso-settings-page" pageTitle={t('label.sso')}>
-        <TitleBreadcrumb className="m-b-xs" titleLinks={breadcrumb} />
+        <TitleBreadcrumb
+          useCustomArrow
+          className="m-b-xs"
+          titleLinks={breadcrumb}
+        />
 
         <div className="m-t-lg sso-provider-selection">
           <ProviderSelector
@@ -369,7 +377,11 @@ const SettingsSso = () => {
   if (!hasExistingConfig) {
     return (
       <PageLayoutV1 className="sso-settings-page" pageTitle={t('label.sso')}>
-        <TitleBreadcrumb className="m-b-xs" titleLinks={breadcrumb} />
+        <TitleBreadcrumb
+          useCustomArrow
+          className="m-b-xs"
+          titleLinks={breadcrumb}
+        />
 
         <SSOConfigurationForm
           securityConfig={securityConfig}
@@ -383,7 +395,11 @@ const SettingsSso = () => {
 
   return (
     <PageLayoutV1 className="sso-settings-page" pageTitle={t('label.sso')}>
-      <TitleBreadcrumb className="m-b-xs" titleLinks={breadcrumb} />
+      <TitleBreadcrumb
+        useCustomArrow
+        className="m-b-xs"
+        titleLinks={breadcrumb}
+      />
 
       <div className="settings-sso" style={{ background: 'white' }}>
         {currentProvider && currentProvider !== AuthProvider.Basic && (

openmetadata-ui/src/main/resources/ui/src/components/common/TitleBreadcrumb/TitleBreadcrumb.component.tsx

@@ -20,6 +20,7 @@ import {
   useState,
 } from 'react';
 import { Link } from 'react-router-dom';
+import { ReactComponent as RightArrowIcon } from '../../../assets/svg/ic-right-arrow.svg';
 import { BREADCRUMB_SEPARATOR } from '../../../constants/constants';
 import TitleBreadcrumbSkeleton from '../Skeleton/BreadCrumb/TitleBreadcrumbSkeleton.component';
 import './title-breadcrumb.less';
@@ -31,6 +32,7 @@ const TitleBreadcrumb: FunctionComponent<TitleBreadcrumbProps> = ({
   noLink = false,
   loading = false,
   widthDeductions,
+  useCustomArrow = false,
 }: TitleBreadcrumbProps) => {
   const [screenWidth, setScreenWidth] = useState(window.innerWidth);
 
@@ -79,9 +81,15 @@ const TitleBreadcrumb: FunctionComponent<TitleBreadcrumbProps> = ({
           }}>
           {link.name}
         </span>
-        {noLink && index < titleLinks.length - 1 && (
-          <span className="text-xss text-grey-muted">{'>'}</span>
-        )}
+        {noLink &&
+          index < titleLinks.length - 1 &&
+          (useCustomArrow ? (
+            <span className="custom-separator">
+              <RightArrowIcon />
+            </span>
+          ) : (
+            <span className="text-xss text-grey-muted">{'>'}</span>
+          ))}
       </>
     );
   };
@@ -117,9 +125,15 @@ const TitleBreadcrumb: FunctionComponent<TitleBreadcrumbProps> = ({
                     <Link className={classes} to={link.url}>
                       {link.name}
                     </Link>
-                    <span className="text-sm font-regular p-x-xs text-grey-muted">
-                      {BREADCRUMB_SEPARATOR}
-                    </span>
+                    {useCustomArrow ? (
+                      <span className="custom-separator">
+                        <RightArrowIcon />
+                      </span>
+                    ) : (
+                      <span className="text-sm font-regular p-x-xs text-grey-muted">
+                        {BREADCRUMB_SEPARATOR}
+                      </span>
+                    )}
                   </>
                 ) : (
                   renderBreadcrumb(index, link, classes)

openmetadata-ui/src/main/resources/ui/src/components/common/TitleBreadcrumb/TitleBreadcrumb.interface.ts

@@ -26,4 +26,5 @@ export type TitleBreadcrumbProps = {
   noLink?: boolean;
   loading?: boolean;
   widthDeductions?: number;
+  useCustomArrow?: boolean;
 };

openmetadata-ui/src/main/resources/ui/src/components/common/TitleBreadcrumb/title-breadcrumb.less

@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+@import (reference) '../../../styles/variables.less';
 .breadcrumb-container {
   ol,
   ul {
@@ -17,4 +18,8 @@
     padding: 0;
     margin: 0;
   }
+
+  .custom-separator {
+    margin: 0 @size-xs @size-xxs @size-xs;
+  }
 }