♻️ [devext] move button to end the session next to the session info

DataDog · Mar 17, 2023 · 0fa5f5f · 0fa5f5f
1 parent fcbb3bd
commit 0fa5f5f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/developer-extension/src/panel/components/tabs/infosTab.tsx b/developer-extension/src/panel/components/tabs/infosTab.tsx
@@ -1,10 +1,14 @@
-import { Anchor, Divider, Group, Text } from '@mantine/core'
+import { Anchor, Button, Divider, Group, Space, Text } from '@mantine/core'
 import type { ReactNode } from 'react'
 import React from 'react'
+import { evalInWindow } from '../../evalInWindow'
 import { useSdkInfos } from '../../hooks/useSdkInfos'
 import { Columns } from '../columns'
 import { Json } from '../json'
 import { TabBase } from '../tabBase'
+import { createLogger } from '../../../common/logger'
+
+const logger = createLogger('infosTab')
 
 export function InfosTab() {
   const infos = useSdkInfos()
@@ -32,6 +36,10 @@ export function InfosTab() {
               />
               <Entry name="Created" value={formatDate(Number(infos.cookie.created))} />
               <Entry name="Expire" value={formatDate(Number(infos.cookie.expire))} />
+              <Space h="sm" />
+              <Button color="violet" variant="light" onClick={endSession}>
+                End current session
+              </Button>
             </>
           )}
         </Columns.Column>
@@ -134,3 +142,11 @@ function formatSessionType(value: string, ...labels: string[]) {
   const index = Number(value)
   return !isNaN(index) && index >= 0 && index < labels.length ? labels[index] : value
 }
+
+function endSession() {
+  evalInWindow(
+    `
+      document.cookie = '_dd_s=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'
+    `
+  ).catch((error) => logger.error('Error while ending session:', error))
+}
diff --git a/developer-extension/src/panel/components/tabs/settingsTab.tsx b/developer-extension/src/panel/components/tabs/settingsTab.tsx
@@ -1,13 +1,9 @@
-import { Badge, Box, Button, Checkbox, Code, Group, Select, Space, Text } from '@mantine/core'
+import { Badge, Box, Checkbox, Code, Group, Select, Space, Text } from '@mantine/core'
 import React from 'react'
-import { createLogger } from '../../../common/logger'
-import { evalInWindow } from '../../evalInWindow'
 import type { EventSource } from '../../types'
 import { Columns } from '../columns'
 import { TabBase } from '../tabBase'
 
-const logger = createLogger('settingsTab')
-
 export interface Settings {
   useDevBundles: boolean
   useRumSlim: boolean
@@ -142,12 +138,6 @@ export function SettingsTab({
             description={<>Force the SDK to flush events periodically.</>}
           />
         </Columns.Column>
-
-        <Columns.Column title="Misc">
-          <Button color="violet" variant="light" onClick={() => endSession()}>
-            End current session
-          </Button>
-        </Columns.Column>
       </Columns>
     </TabBase>
   )
@@ -170,11 +160,3 @@ function SettingItem({ description, input }: { description?: React.ReactNode; in
 function isChecked(target: EventTarget) {
   return target instanceof HTMLInputElement && target.checked
 }
-
-function endSession() {
-  evalInWindow(
-    `
-      document.cookie = '_dd_s=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'
-    `
-  ).catch((error) => logger.error('Error while ending session:', error))
-}