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

index.html

@@ -9,8 +9,6 @@
 
   <!-- 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">

src/features/side_bar/components/AppNameAndIcon/AppNameAndIcon.tsx

@@ -0,0 +1,33 @@
+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 { trimLinkIfInDev } 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 &&
+    trimLinkIfInDev(app_config.isDevBuild, 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>
+  );
+}

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);
 }
 

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) => {
@@ -138,32 +132,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.target as HTMLDivElement, i18n.t('sidebar.expand'))
+                }
+              >
+                <ActionsBarBTN
+                  iconBefore={<DoubleChevronRight24 />}
+                  className={s.controlButton}
+                />
+              </div>
+            )}
           </div>
 
           <div className={s.konturLogo}>

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,11 @@ export const removeEmpty = <T extends Record<string, unknown | null | undefined>
     }
     return acc;
   }, {} as NoUndefinedField<T>);
+
+export function trimLinkIfInDev(isDevBuild: boolean, link: string) {
+  // trim beginning of url designed for builded apps that serve static files via '/active/static'
+  if (isDevBuild && link?.startsWith('/active/static')) {
+    return link.replace('/active/static', '');
+  }
+  return link;
+}

src/utils/hooks/useBrowserTabUpdate.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import app_config from '~core/app_config';
+import { trimLinkIfInDev } from '~utils/common';
+
+export function useBrowserTabUpdateEffect(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 link = trimLinkIfInDev(app_config.isDevBuild, iconPath);
+    const linkElements = document.querySelectorAll(
+      "link[rel~='icon']",
+    ) as NodeListOf<HTMLLinkElement>;
+    linkElements.forEach((linkEl) => {
+      // keep url icons versions
+      const linkUrl = new URL(linkEl.href);
+      linkUrl.pathname = link!;
+      linkEl.href = linkUrl.pathname + linkUrl.search;
+    });
+  }, [iconPath]);
+}

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 { useBrowserTabUpdateEffect } from '~utils/hooks/useBrowserTabUpdate';
 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);
+
+  useBrowserTabUpdateEffect(appParams?.faviconUrl);
 
   useEffect(() => {
     if (userModel?.hasFeature(AppFeature.INTERCOM)) {