CCS-103061 Add app visibility page

frontend/app/modules/app-visibility/AppVisibilityPage.tsx

@@ -0,0 +1,40 @@
+import { observer } from 'mobx-react'
+import React, { FC, useEffect } from 'react'
+import { useStore } from '../../hooks/useStore'
+import FeatureHeader from '../../components/FeatureHeader'
+import FeaturePage from '../../components/FeaturePage'
+import Input from '../../components/Input'
+import Button from '../../components/Button'
+
+const AppVisibilityPage: FC = () => {
+  const { appVisibilityStore } = useStore()
+
+  useEffect(() => {
+    appVisibilityStore.subscribeAppVisibilityChange()
+
+    return () => {
+      appVisibilityStore.unsubscribeAppVisibilityChange()
+    }
+  }, [])
+
+  const handleSubmit = () => appVisibilityStore.getAppVisibility()
+
+  return (
+    <FeaturePage>
+      <FeatureHeader name="Видимость окна SmartApp" />
+      <span>Видимость</span>
+      <Input
+        value={`${appVisibilityStore.visibile === null ? '' : appVisibilityStore.visibile}`}
+        id="layout-type-text"
+        disabled
+      />
+      <Button onClick={handleSubmit} id="submit" title="Получить" />
+      <br />
+      <br />
+      <br />
+      <i>Сверните и разверните окно SmartApp чтобы увидеть сообщение о смене видимости.</i>
+    </FeaturePage>
+  )
+}
+
+export default observer(AppVisibilityPage)

frontend/app/modules/app-visibility/app-visibility.store.ts

@@ -0,0 +1,58 @@
+import * as SDK from '@expressms/smartapp-sdk'
+import { makeObservable, observable, runInAction } from 'mobx'
+import { RootStore } from '../../store/rootStore'
+import { GetAppVisibilityResponse, STATUS, SubscriptionEventType } from '@expressms/smartapp-sdk/build/main/types'
+import { AppVisibilitySubscriptionEvent } from './app-visibility.types'
+
+export class AppVisibilityStore {
+  rootStore: RootStore
+  @observable visibile: boolean | null
+  callback: () => void
+
+  constructor(rootStore: RootStore) {
+    makeObservable(this)
+
+    this.rootStore = rootStore
+    this.visibile = null
+    this.callback = this.visibilityChangeCallback.bind(this)
+  }
+
+  private visibilityChangeCallback(event: AppVisibilitySubscriptionEvent) {
+    alert(event.payload.visible ? 'SmartApp видим' : 'SmartApp скрыт')
+  }
+
+  async getAppVisibility() {
+    try {
+      const response: GetAppVisibilityResponse = await SDK.getAppVisibility()
+
+      if (response.payload.status === STATUS.ERROR) {
+        this.rootStore.toastStore.showToast(`Error getting app visibility ${response.payload.errorCode}`)
+        return
+      }
+
+      runInAction(() => {
+        this.visibile = response.payload.visible
+      })
+    } catch (e) {
+      this.rootStore.toastStore.showToast(`Error getting app visibility ${e?.message || e}`)
+    }
+  }
+
+  async subscribeAppVisibilityChange() {
+    await SDK.subscribeClientEvents({
+      eventType: SubscriptionEventType.APP_VISIBILITY,
+      callback: this.callback,
+    })
+
+    console.log('Subscribed app_visibility')
+  }
+
+  async unsubscribeAppVisibilityChange() {
+    await SDK.unsubscribeClientEvents({
+      eventType: SubscriptionEventType.APP_VISIBILITY,
+      callback: this.callback,
+    })
+
+    console.log('Unsubscribed app_visibility')
+  }
+}

frontend/app/modules/app-visibility/app-visibility.types.ts

@@ -0,0 +1,7 @@
+import { EmitterEventPayload } from '@expressms/smartapp-bridge/build/main/types/eventEmitter.d'
+
+export interface AppVisibilitySubscriptionEvent extends Omit<EmitterEventPayload, 'payload'> {
+  payload: {
+    visible: boolean
+  }
+}

frontend/app/modules/features-list/ClientFeatures.tsx

@@ -167,6 +167,10 @@ const ClientFeatures: FC = () => {
         <span className="material-icons">bug_report</span>
         Антивирусная проверка файлов
       </StyledLink>
+      <StyledLink to="app-visibility">
+        <span className="material-icons">visibility_off</span>
+        Видимость окна SmartApp
+      </StyledLink>
     </>
   )
 }

frontend/app/modules/features-list/FeaturesListPage.tsx

@@ -41,6 +41,7 @@ import SendBotCommandPage from '../send-bot-command/SendBotCommandPage'
 import HideLogsPage from '../hide-logs/HideLogsPage'
 import CleanCachePage from '../clean-cache/CleanCachePage'
 import AntimalwarePage from '../antimalware/AntimalwarePage'
+import AppVisibilityPage from '../app-visibility/AppVisibilityPage'
 
 const Wrapper = styled.div`
   margin-bottom: 30px;
@@ -108,6 +109,7 @@ const FeaturesListPage = () => {
           <Route path="/hide-log-data" element={<HideLogsPage />} />
           <Route path="/clean-cache" element={<CleanCachePage />} />
           <Route path="/antimalware" element={<AntimalwarePage />} />
+          <Route path="/app-visibility" element={<AppVisibilityPage />} />
         </Routes>
       </Wrapper>
       {store.showMainLoader && <MainLoader />}

frontend/app/store/rootStore.ts

@@ -33,6 +33,7 @@ import { SendBotCommandStore } from '../modules/send-bot-command/send-bot-comman
 import { HideLogsStore } from '../modules/hide-logs/hide-logs.store'
 import { CleanCacheStore } from '../modules/clean-cache/clean-cache.store'
 import { AntimalwareStore } from '../modules/antimalware/antimalware.store'
+import { AppVisibilityStore } from '../modules/app-visibility/app-visibility.store'
 
 export class RootStore {
   appStore: AppStore
@@ -70,6 +71,7 @@ export class RootStore {
   hideLogsStore: HideLogsStore
   cleanCacheStore: CleanCacheStore
   antimalwareStore: AntimalwareStore
+  appVisibilityStore: AppVisibilityStore
 
   constructor() {
     this.appStore = new AppStore(this)
@@ -107,5 +109,6 @@ export class RootStore {
     this.hideLogsStore = new HideLogsStore(this)
     this.cleanCacheStore = new CleanCacheStore(this)
     this.antimalwareStore = new AntimalwareStore(this)
+    this.appVisibilityStore = new AppVisibilityStore(this)
   }
 }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-feature-smartapp",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "description": "SmartApp with all features",
   "main": "index.js",
   "scripts": {
@@ -13,7 +13,7 @@
   "license": "ISC",
   "dependencies": {
     "@amcharts/amcharts5": "5.9.12",
-    "@expressms/smartapp-sdk": "1.11.0-alpha.0",
+    "@expressms/smartapp-sdk": "1.11.0-alpha.2",
     "html5-qrcode": "2.3.8",
     "jsoneditor": "10.1.0",
     "material-icons": "1.13.12",

frontend/smartapp-manifest.json

@@ -2,5 +2,5 @@
   "manifestVersion": "1.0.0",
   "smartAppVersion": "",
   "bundlePath": "",
-  "changeLog": "Ограничение на размер всех файлов"
+  "changeLog": "Подписка на видимость окна SmartApp"
 }

frontend/yarn.lock

@@ -1160,10 +1160,10 @@
     lodash-es "^4.17.21"
     uuid "^8.3.2"
 
-"@expressms/[email protected].0":
-  version "1.11.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/@expressms/smartapp-sdk/-/smartapp-sdk-1.11.0-alpha.0.tgz#3eb59eca09aaa9f2d4f73b0bce7cfa9ff07e4ec7"
-  integrity sha512-dhdL5ysnRzUw8+d6/nBG7RFryfIvHD8dHA2FTAlYyi4bGr5Eh2mVCu7s75uHyIrTNGmViDig4QWzCz4DXJUCbg==
+"@expressms/[email protected].2":
+  version "1.11.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@expressms/smartapp-sdk/-/smartapp-sdk-1.11.0-alpha.2.tgz#7fee41260795b361d2a9af1fe6d4fba57f59f8c9"
+  integrity sha512-uoW1OFbKrwmKs+MhGcndf0DaEKBGvkUCtphpteXkA2Pd/cnHJMBdt2gcW0WlGLlxW8YosE6u2/uUgSNvF7nqgQ==
   dependencies:
     "@expressms/smartapp-bridge" "1.4.0-alpha.1"