Merge pull request #62 from VKCOM/o.shcherbakov/clipboard-control/QA-…

…15743

feat(ui): clipboard control

ui/src/components/ui/device-control-panel/tabs/clipboard-control/clipboard-control.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { useTranslation } from 'react-i18next'
+import { Icon20RefreshOutline } from '@vkontakte/icons'
+import { IconButton, Input, Tooltip } from '@vkontakte/vkui'
+
+import { DeviceControlStore } from '@/store/device-control-store'
+import { useServiceLocator } from '@/lib/hooks/use-service-locator.hook'
+
+export const ClipboardControl = observer(() => {
+  const { t } = useTranslation()
+  const [clipboardContent, setClipboardContent] = useState('')
+  const deviceControlStore = useServiceLocator<DeviceControlStore>(DeviceControlStore.name)
+
+  const onGetClipboardContent = async () => {
+    const data = await deviceControlStore?.getClipboardContent()
+
+    if (data) {
+      setClipboardContent(data)
+    }
+  }
+
+  return (
+    <Input
+      placeholder={t('Get clipboard contents')}
+      type='text'
+      value={t(clipboardContent)}
+      after={
+        <Tooltip appearance='accent' description={t('Get clipboard contents')}>
+          <IconButton hoverMode='opacity' onClick={() => onGetClipboardContent()}>
+            <Icon20RefreshOutline />
+          </IconButton>
+        </Tooltip>
+      }
+    />
+  )
+})

ui/src/components/ui/device-control-panel/tabs/clipboard-control/index.ts

@@ -0,0 +1 @@
+export { ClipboardControl } from './clipboard-control'

ui/src/components/ui/device-control-panel/tabs/dashboard-tab.tsx

@@ -19,6 +19,7 @@ import { BookingService } from '@/services/booking-service'
 
 import { useServiceLocator } from '@/lib/hooks/use-service-locator.hook'
 
+import { ClipboardControl } from './clipboard-control'
 import { DeviceButtonsControl } from './device-buttons-control'
 import { DeviceBookingControl } from './device-booking-control'
 
@@ -65,7 +66,7 @@ export const DashboardTab = observer(() => {
         Stub
       </DeviceControlCard>
       <DeviceControlCard before={<Icon20CopyOutline />} title={t('Clipboard')}>
-        Stub
+        <ClipboardControl />
       </DeviceControlCard>
       <DeviceControlCard
         afterTooltipText={t('Extend booking')}

ui/src/store/device-control-store.ts

@@ -19,6 +19,22 @@ export class DeviceControlStore extends DeviceControlService {
     })
   }
 
+  async getClipboardContent(): Promise<string> {
+    try {
+      const data = await this.copy()
+
+      if (typeof data === 'string') {
+        return data
+      }
+
+      return 'No clipboard data'
+    } catch (error) {
+      console.error(error)
+
+      return 'Error while getting data'
+    }
+  }
+
   setCurrentQuality(quality: number): void {
     this.currentQuality = quality
   }