From 793e3fe49080c3eddbd5c06ecb51535a7faa8dd6 Mon Sep 17 00:00:00 2001 From: Daria Larionova Date: Fri, 27 Dec 2024 20:04:58 +0300 Subject: [PATCH] Add release version dialog (#1982) Co-authored-by: datalens-weblate-robot Co-authored-by: Darya Tikhonova --- src/@types/nodekit.d.ts | 1 + .../component.aside-header.view/en.json | 1 + .../component.aside-header.view/ru.json | 1 + src/server/app-env.ts | 1 + .../layout/opensource-layout-config.ts | 1 + src/server/configs/common.ts | 2 + src/shared/types/common.ts | 1 + .../AsideHeaderAdapter.scss | 3 +- .../AsideHeaderAdapter/AsideHeaderAdapter.tsx | 44 ++++++++++++++++--- .../VersionDialog/VersionDialog.tsx | 35 +++++++++++++++ src/ui/constants/common.ts | 3 ++ src/ui/store/actions/openDialogTypes.ts | 2 + 12 files changed, 89 insertions(+), 6 deletions(-) create mode 100644 src/ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog.tsx diff --git a/src/@types/nodekit.d.ts b/src/@types/nodekit.d.ts index e008ed8c3e..1e0b8e34f0 100644 --- 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 index fb2d66e394..8103884084 100644 --- 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 index de45c81f8e..86356c41d7 100644 --- 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 index 55291512f3..867199b1bf 100644 --- 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 index 89b6ca744d..a42467c534 100644 --- 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 index 4024fa2b3e..79ba5c3b5b 100644 --- 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; diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts index c98d2ee546..0192583419 100644 --- 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 index 13ed3b3702..6a1139f125 100644 --- 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 index 887597781b..db7fce0aa8 100644 --- 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 ( +
+ {text} +
+ ); + }, + [dispatch], + ); + const renderFooter = () => { return ( @@ -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 new file mode 100644 index 0000000000..a7dc027066 --- /dev/null +++ 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 ( + + + + + {i18n('component.aside-header.view', 'label_app-version')}: + + {releaseVersion} + + + + ); +} + +DialogManager.registerDialog(DIALOG_RELEASE_VERSION, VersionDialog); diff --git a/src/ui/constants/common.ts b/src/ui/constants/common.ts index 109a94046e..c2c67d1d4c 100644 --- 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 index 2b3f0f5d51..897a964c40 100644 --- 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 = + | OpenDialogReleaseVersionArgs | OpenDialogMetricSettingsArgs | OpenDialogColorArgs | OpenDialogFieldInspectorArgs