Add release version dialog (#1982)

Co-authored-by: datalens-weblate-robot <[email protected]> Co-authored-by: Darya Tikhonova <[email protected]>
datalens-tech · Dec 27, 2024 · 793e3fe · 793e3fe
1 parent 5c0ce18
commit 793e3fe
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 6 deletions.
diff --git a/src/@types/nodekit.d.ts b/src/@types/nodekit.d.ts
@@ -89,6 +89,7 @@ export interface SharedAppConfig {
     redis: RedisConfig | null;
     apiPrefix: string;
     preloadList?: string[];
+    releaseVersion?: string;
 }
 
 export interface SharedAppDynamicConfig {

diff --git a/src/i18n-keysets/component.aside-header.view/en.json b/src/i18n-keysets/component.aside-header.view/en.json
@@ -1,6 +1,7 @@
 {
   "label_about": "About",
   "label_account": "Account",
+  "label_app-version": "Version",
   "label_collections": "Collections and workbooks",
   "label_docs": "Documentation",
   "label_github": "GitHub",

diff --git a/src/i18n-keysets/component.aside-header.view/ru.json b/src/i18n-keysets/component.aside-header.view/ru.json
@@ -1,6 +1,7 @@
 {
   "label_about": "О сервисе",
   "label_account": "Учётная запись",
+  "label_app-version": "Версия",
   "label_collections": "Коллекции и воркбуки",
   "label_docs": "Документация",
   "label_github": "GitHub",

diff --git a/src/server/app-env.ts b/src/server/app-env.ts
@@ -3,6 +3,7 @@ import {AppInstallation, AppMode} from '../shared';
 const mode = process.env.APP_MODE;
 export const appInstallation = process.env.APP_INSTALLATION;
 export const appEnv = process.env.APP_ENV;
+export const releaseVersion = process.env.RELEASE_VERSION;
 
 export const isFullMode = mode === AppMode.Full;
 export const isDatalensMode = mode === AppMode.Datalens;

diff --git a/src/server/components/layout/opensource-layout-config.ts b/src/server/components/layout/opensource-layout-config.ts
@@ -72,6 +72,7 @@ export const getOpensourceLayoutConfig: GetLayoutConfig = async (args) => {
         ymapApiKey: config.chartkitSettings?.yandexMap?.token,
         connectorIcons: res.locals.connectorIcons,
         apiPrefix: config.apiPrefix,
+        releaseVersion: config.releaseVersion,
         ...appLayoutSettings.DL,
     };
     const renderConfig: RenderParams<{DL: DLGlobalData}> = {

diff --git a/src/server/configs/common.ts b/src/server/configs/common.ts
@@ -11,6 +11,7 @@ import {
     SuperuserHeader,
     TENANT_ID_HEADER,
 } from '../../shared';
+import {releaseVersion} from '../app-env';
 import {SERVICE_NAME_DATALENS} from '../components';
 
 export default {
@@ -44,4 +45,5 @@ export default {
     ],
     headersMap: {},
     requestIdHeaderName: 'x-request-id',
+    releaseVersion: releaseVersion,
 } satisfies Partial<AppConfig>;
diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts
@@ -211,6 +211,7 @@ export type DLGlobalData = {
     isZitadelEnabled?: boolean;
     hideNavigation?: boolean;
     connectorIcons?: ConnectorIconData[];
+    releaseVersion?: string;
 } & MainLayoutConfigData;
 
 export type ContactDialogSettings = {

diff --git a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.scss b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.scss
@@ -22,7 +22,8 @@
         @include link-reset;
     }
 
-    &__docs-link {
+    &__docs-link,
+    &__info-btn {
         align-items: center;
         box-sizing: border-box;
         display: flex;

diff --git a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx
@@ -11,6 +11,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import {Link, useLocation} from 'react-router-dom';
 import {DlNavigationQA, Feature} from 'shared';
 import {DL, PRODUCT_NAME} from 'ui/constants';
+import {closeDialog, openDialog} from 'ui/store/actions/dialog';
 import {selectAsideHeaderIsCompact} from 'ui/store/selectors/asideHeader';
 import Utils from 'ui/utils';
 
@@ -20,6 +21,7 @@ import {UserAvatar} from '../UserMenu/UserAvatar';
 import {UserMenu} from '../UserMenu/UserMenu';
 
 import {Settings as SettingsPanel} from './Settings/Settings';
+import {DIALOG_RELEASE_VERSION} from './VersionDialog/VersionDialog';
 
 import defaultLogoIcon from '../../assets/icons/logo.svg';
 import iconCollection from '../../assets/icons/mono-collection.svg';
@@ -175,6 +177,33 @@ export const AsideHeaderAdapter = ({renderContent, logoIcon}: AsideHeaderAdapter
         [visiblePanel],
     );
 
+    const getReliaseVersionWrapper = React.useCallback(
+        ({text}) => {
+            const handleShowReleaseVersion = () => {
+                setCurrentPopup(null);
+                dispatch(
+                    openDialog({
+                        id: DIALOG_RELEASE_VERSION,
+                        props: {
+                            releaseVersion: DL.RELEASE_VERSION || '',
+                            open: true,
+                            onClose: () => {
+                                dispatch(closeDialog());
+                            },
+                        },
+                    }),
+                );
+            };
+
+            return (
+                <div className={b('info-btn')} onClick={handleShowReleaseVersion}>
+                    {text}
+                </div>
+            );
+        },
+        [dispatch],
+    );
+
     const renderFooter = () => {
         return (
             <React.Fragment>
@@ -222,15 +251,20 @@ export const AsideHeaderAdapter = ({renderContent, logoIcon}: AsideHeaderAdapter
                                         text: i18n('label_github'),
                                         url: GITHUB_URL,
                                     },
-                                    {
-                                        text: i18n('label_about'),
-                                        url: PROMO_SITE_DOMAIN,
-                                    },
+                                    DL.RELEASE_VERSION
+                                        ? {
+                                              text: i18n('label_about'),
+                                              itemWrapper: getReliaseVersionWrapper,
+                                          }
+                                        : {
+                                              text: i18n('label_about'),
+                                              url: PROMO_SITE_DOMAIN,
+                                          },
                                     {
                                         text: i18n('label_docs'),
                                         url: DOCUMENTATION_LINK,
                                     },
-                                ]}
+                                ].filter(Boolean)}
                                 filterable={false}
                                 virtualized={false}
                                 renderItem={renderDocsItem}

diff --git a/src/ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog.tsx b/src/ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {Dialog, Text, spacing} from '@gravity-ui/uikit';
+import {i18n} from 'i18n';
+import DialogManager from 'ui/components/DialogManager/DialogManager';
+
+export const DIALOG_RELEASE_VERSION = Symbol('DIALOG_RELEASE_VERSION');
+
+type VersionDialogProps = {
+    releaseVersion: string;
+    open: boolean;
+    onClose: VoidFunction;
+};
+
+export type OpenDialogReleaseVersionArgs = {
+    id: typeof DIALOG_RELEASE_VERSION;
+    props: VersionDialogProps;
+};
+
+export function VersionDialog({releaseVersion, open, onClose}: VersionDialogProps) {
+    return (
+        <Dialog open={open} onClose={onClose} size="s">
+            <Dialog.Header caption={i18n('component.aside-header.view', 'label_about')} />
+            <Dialog.Body>
+                <Text variant="subheader-1" className={spacing({mr: 2})}>
+                    {i18n('component.aside-header.view', 'label_app-version')}:
+                </Text>
+                {releaseVersion}
+            </Dialog.Body>
+            <Dialog.Footer />
+        </Dialog>
+    );
+}
+
+DialogManager.registerDialog(DIALOG_RELEASE_VERSION, VersionDialog);
diff --git a/src/ui/constants/common.ts b/src/ui/constants/common.ts
@@ -234,6 +234,9 @@ export const DL = {
     get CONNECTOR_ICONS() {
         return window.DL.connectorIcons || [];
     },
+    get RELEASE_VERSION() {
+        return window.DL.releaseVersion;
+    },
 };
 
 // monaco-editor common themes:

diff --git a/src/ui/store/actions/openDialogTypes.ts b/src/ui/store/actions/openDialogTypes.ts
@@ -55,8 +55,10 @@ import type {OpenDialogIamAccessArgs} from '../../components/IamAccessDialog';
 import type {OpenDialogTooltipSettingsArgs} from '../../units/wizard/components/Dialogs/DialogTooltipSettings/DialogTooltipSettings';
 import type {OpenDialogChangeDatasetFieldsArgs} from '../../units/datasets/components/DatasetTable/components/BatchActionPanel/components/DialogChangeDatasetFields/DialogChangeDatasetFields';
 import type {OpenDialogCollectionNoCreatePermissionArgs} from 'ui/components/CollectionsStructure/CollectionNoCreatePermissionDialog';
+import type {OpenDialogReleaseVersionArgs} from 'ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog';
 
 export type OpenDialogArgs<T = unknown> =
+    | OpenDialogReleaseVersionArgs
     | OpenDialogMetricSettingsArgs
     | OpenDialogColorArgs
     | OpenDialogFieldInspectorArgs