fix(sidebar): 13451 - also define app name by app id and change icon …

…in tab (#285)
konturio · Dec 14, 2022 · 9b71621 · 9b71621
1 parent 6d6aba1
commit 9b71621
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 67 deletions.
diff --git a/index.html b/index.html
@@ -8,12 +8,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
   <!-- Favicons display -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=2.0.22">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png?v=2.0.22">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png?v=2.0.22">
   <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg">
-  <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg?v=2.0.22" color="#444444">
-  <link rel="shortcut icon" href="/favicon/favicon.ico?v=2.0.22">
   <meta name="apple-mobile-web-app-title" content="Disaster Ninja">
   <meta name="application-name" content="Disaster Ninja">
   <meta name="msapplication-TileColor" content="#da532c">

diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
diff --git a/src/features/side_bar/components/AppIcon/AppIcon.tsx b/src/features/side_bar/components/AppIcon/AppIcon.tsx
diff --git a/src/features/side_bar/components/AppNameAndIcon/AppNameAndIcon.tsx b/src/features/side_bar/components/AppNameAndIcon/AppNameAndIcon.tsx
@@ -0,0 +1,32 @@
+import { ActionsBarBTN } from '@konturio/ui-kit';
+import { useAtom } from '@reatom/react';
+import app_config from '~core/app_config';
+import { i18n } from '~core/localization';
+import { currentAppPropertiesResourceAtom } from '~core/shared_state/currentApplication';
+import { transformIconLink } from '~utils/common';
+
+type AppNameAndIconProps = {
+  wrapClassName?: string;
+  appNameClassName?: string;
+  isOpen: boolean;
+};
+
+export function AppNameAndIcon({
+  isOpen,
+  appNameClassName,
+  wrapClassName,
+}: AppNameAndIconProps) {
+  const [{ data: appParams }] = useAtom(currentAppPropertiesResourceAtom);
+  const iconPath =
+    appParams?.sidebarIconUrl && transformIconLink(appParams?.sidebarIconUrl);
+
+  const appIcon = iconPath ? (
+    <img src={iconPath} width={24} height={24} alt={i18n.t('sidebar.icon_alt')} />
+  ) : null;
+
+  return (
+    <ActionsBarBTN active={false} iconBefore={appIcon} className={wrapClassName}>
+      {isOpen ? <span className={appNameClassName}>{appParams?.name}</span> : null}
+    </ActionsBarBTN>
+  );
+}
diff --git a/src/features/side_bar/components/SideBar/SideBar.module.css b/src/features/side_bar/components/SideBar/SideBar.module.css
@@ -95,15 +95,17 @@
   display: flex;
 }
 
-.toggler {
+.togglerButton {
   margin-top: auto;
+  width: 100%;
+  padding: 0 var(--unit);
 }
 
-.toggler button:focus {
+.togglerButton button:focus {
   box-shadow: none;
 }
 
-.toggler button:focus-visible {
+.togglerButton button:focus-visible {
   box-shadow: var(--button-box-shadow);
 }
 

diff --git a/src/features/side_bar/components/SideBar/SideBar.tsx b/src/features/side_bar/components/SideBar/SideBar.tsx
@@ -8,7 +8,7 @@ import { IS_MOBILE_QUERY, useMediaQuery } from '~utils/hooks/useMediaQuery';
 import { i18n } from '~core/localization';
 import { currentTooltipAtom } from '~core/shared_state/currentTooltip';
 import { searchStringAtom } from '~core/url_store/atoms/urlStore';
-import { SidebarAppIcon } from '../AppIcon/AppIcon';
+import { AppNameAndIcon } from '../AppNameAndIcon/AppNameAndIcon';
 import { SmallIconSlot } from '../SmallIconSlot/SmallIconSlot';
 import { routeVisibilityChecker } from './routeVisibilityChecker';
 import s from './SideBar.module.css';
@@ -82,17 +82,11 @@ export function SideBar({
         <ActionsBar>
           <div className={cn(s.logoWrap, s.sidebarItemContainer)} tabIndex={-1}>
             <div className={s.buttonWrap}>
-              <ActionsBarBTN
-                active={false}
-                iconBefore={<SidebarAppIcon />}
-                className={cn(s.controlButton, s.logoButton)}
-              >
-                {isOpen ? (
-                  <span className={s.modeName}>
-                    Disaster <br /> Ninja
-                  </span>
-                ) : null}
-              </ActionsBarBTN>
+              <AppNameAndIcon
+                isOpen={isOpen}
+                wrapClassName={cn(s.controlButton, s.logoButton)}
+                appNameClassName={s.modeName}
+              />
             </div>
           </div>
           {availableRoutes.routes.map((route) => {
@@ -113,9 +107,7 @@ export function SideBar({
                 <div
                   className={s.buttonWrap}
                   onPointerLeave={onMouseLeave}
-                  onPointerEnter={(e) =>
-                    onMouseEnter(e.target as HTMLDivElement, route.title)
-                  }
+                  onPointerEnter={(e) => onMouseEnter(e.currentTarget, route.title)}
                 >
                   <ActionsBarBTN
                     size={route.parentRoute ? 'small-xs' : 'small'}
@@ -138,32 +130,34 @@ export function SideBar({
           })}
 
           <div className={s.togglerContainer}>
-            <div className={s.toggler}>
-              {isOpen ? (
-                <div className={s.buttonWrap} onClick={toggleIsOpen} tabIndex={-1}>
-                  <ActionsBarBTN
-                    iconBefore={<DoubleChevronLeft24 />}
-                    className={s.controlButton}
-                  >
-                    <span className={s.modeName}>{i18n.t('sidebar.collapse')}</span>
-                  </ActionsBarBTN>
-                </div>
-              ) : (
-                <div
-                  className={s.buttonWrap}
-                  onClick={toggleIsOpen}
-                  onPointerLeave={onMouseLeave}
-                  onPointerEnter={(e) =>
-                    onMouseEnter(e.target as HTMLDivElement, i18n.t('sidebar.expand'))
-                  }
+            {isOpen ? (
+              <div
+                className={cn(s.buttonWrap, s.togglerButton)}
+                onClick={toggleIsOpen}
+                tabIndex={-1}
+              >
+                <ActionsBarBTN
+                  iconBefore={<DoubleChevronLeft24 />}
+                  className={s.controlButton}
                 >
-                  <ActionsBarBTN
-                    iconBefore={<DoubleChevronRight24 />}
-                    className={s.controlButton}
-                  />
-                </div>
-              )}
-            </div>
+                  <span className={s.modeName}>{i18n.t('sidebar.collapse')}</span>
+                </ActionsBarBTN>
+              </div>
+            ) : (
+              <div
+                className={cn(s.buttonWrap, s.togglerButton)}
+                onClick={toggleIsOpen}
+                onPointerLeave={onMouseLeave}
+                onPointerEnter={(e) =>
+                  onMouseEnter(e.currentTarget, i18n.t('sidebar.expand'))
+                }
+              >
+                <ActionsBarBTN
+                  iconBefore={<DoubleChevronRight24 />}
+                  className={s.controlButton}
+                />
+              </div>
+            )}
           </div>
 
           <div className={s.konturLogo}>

diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts
@@ -23,7 +23,6 @@ export const isErrorWithMessage = (
   return e !== null && typeof e === 'object' && 'message' in e;
 };
 
-
 type flatObject = Record<string, string | boolean | number | undefined | null>;
 
 export function flatObjectsAreEqual(
@@ -57,3 +56,16 @@ export const removeEmpty = <T extends Record<string, unknown | null | undefined>
     }
     return acc;
   }, {} as NoUndefinedField<T>);
+
+export function transformIconLink(iconPath: string) {
+  if (iconPath.startsWith('http')) return iconPath;
+
+  const iconLocations = iconPath.split('/');
+  const iconName = iconLocations[iconLocations.length - 1];
+  const iconStaticPath =
+    import.meta.env?.VITE_BASE_PATH +
+    import.meta.env?.VITE_STATIC_PATH +
+    'favicon/' +
+    iconName;
+  return iconStaticPath;
+}
diff --git a/src/utils/hooks/useFavicon.tsx b/src/utils/hooks/useFavicon.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { transformIconLink } from '~utils/common';
+
+export function useFavicon(iconPath?: string) {
+  // change tab icon (not expected to work in Safari https://stackoverflow.com/questions/63781987/cant-change-favicon-with-javascript-in-safari)
+  useEffect(() => {
+    if (!iconPath) return;
+    const iconLink = transformIconLink(iconPath);
+
+    const linkElements = document.querySelectorAll(
+      "link[rel~='icon']",
+    ) as NodeListOf<HTMLLinkElement>;
+
+    linkElements.forEach((linkEl) => {
+      linkEl.href = iconLink;
+    });
+  }, [iconPath]);
+}
diff --git a/src/views/CommonView.tsx b/src/views/CommonView.tsx
@@ -5,6 +5,8 @@ import { AppFeature } from '~core/auth/types';
 import { Row } from '~components/Layout';
 import { OriginalLogo } from '~components/KonturLogo/KonturLogo';
 import { userResourceAtom } from '~core/auth';
+import { currentAppPropertiesResourceAtom } from '~core/shared_state/currentApplication';
+import { useFavicon } from '~utils/hooks/useFavicon';
 import type { AvailableRoutesAtom, CurrentRouteAtom } from '~core/router';
 import type { PropsWithChildren } from 'react';
 
@@ -24,6 +26,9 @@ export function CommonView({
 }>) {
   const [{ data, loading }] = useAtom(userResourceAtom);
   const userModel = data && !loading ? data : null;
+  const [{ data: appParams }] = useAtom(currentAppPropertiesResourceAtom);
+
+  useFavicon(appParams?.faviconUrl);
 
   useEffect(() => {
     if (userModel?.hasFeature(AppFeature.INTERCOM)) {