Merge pull request #840 from alexstotsky/improve-logins-chnglogs-cols…

…-configs (improvements) Logins and change logs
bitfinexcom · Aug 8, 2024 · ad4100d · ad4100d
2 parents 3dabc23 + 0b94174
commit ad4100d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 104 deletions.
diff --git a/src/components/ChangeLogs/ChangeLogs.columns.js b/src/components/ChangeLogs/ChangeLogs.columns.js
@@ -1,8 +1,9 @@
-import React from 'react'
-import { Cell } from '@blueprintjs/table'
-
-import JSONFormat from 'ui/JSONFormat'
-import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns'
+import {
+  getCell,
+  getCellState,
+  getColumnWidth,
+  getJsonFormattedCell,
+} from 'utils/columns'
 
 export const getColumns = ({
   t,
@@ -18,15 +19,9 @@ export const getColumns = ({
     nameStr: `${t('column.date')} (${timeOffset})`,
     width: getColumnWidth('mtsCreate', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const timestamp = getFullTime(filteredData[rowIndex].mtsCreate)
-      return (
-        <Cell tooltip={getTooltipContent(timestamp, t)}>
-          {timestamp}
-        </Cell>
-      )
+      return getCell(timestamp, t)
     },
     copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate),
   },
@@ -35,15 +30,9 @@ export const getColumns = ({
     name: 'column.description',
     width: getColumnWidth('log', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { log } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(log, t)}>
-          {log}
-        </Cell>
-      )
+      return getCell(log, t)
     },
     copyText: rowIndex => filteredData[rowIndex].log,
   },
@@ -52,15 +41,9 @@ export const getColumns = ({
     name: 'column.ip',
     width: getColumnWidth('ip', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { ip } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(ip, t)}>
-          {ip}
-        </Cell>
-      )
+      return getCell(ip, t)
     },
     copyText: rowIndex => filteredData[rowIndex].ip,
   },
@@ -69,18 +52,9 @@ export const getColumns = ({
     name: 'column.meta',
     width: getColumnWidth('userAgent', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { userAgent } = filteredData[rowIndex]
-
-      return (
-        <Cell>
-          <JSONFormat content={userAgent}>
-            {userAgent}
-          </JSONFormat>
-        </Cell>
-      )
+      return getJsonFormattedCell(userAgent)
     },
     copyText: rowIndex => filteredData[rowIndex].userAgent,
   },

diff --git a/src/components/Logins/Logins.columns.js b/src/components/Logins/Logins.columns.js
@@ -1,8 +1,9 @@
-import React from 'react'
-import { Cell } from '@blueprintjs/table'
-
-import JSONFormat from 'ui/JSONFormat'
-import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns'
+import {
+  getCell,
+  getCellState,
+  getColumnWidth,
+  getJsonFormattedCell,
+} from 'utils/columns'
 
 export const getColumns = ({
   t,
@@ -19,15 +20,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('id', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { id } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(id, t)}>
-          {id}
-        </Cell>
-      )
+      return getCell(id, t)
     },
     copyText: rowIndex => filteredData[rowIndex].id,
   },
@@ -37,15 +32,9 @@ export const getColumns = ({
     nameStr: `${t('column.date')} (${timeOffset})`,
     width: getColumnWidth('time', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const timestamp = getFullTime(filteredData[rowIndex].time)
-      return (
-        <Cell tooltip={getTooltipContent(timestamp, t)}>
-          {timestamp}
-        </Cell>
-      )
+      return getCell(timestamp, t)
     },
     copyText: rowIndex => getFullTime(filteredData[rowIndex].time),
   },
@@ -55,15 +44,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('ip', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { ip } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(ip, t)}>
-          {ip}
-        </Cell>
-      )
+      return getCell(ip, t)
     },
     copyText: rowIndex => filteredData[rowIndex].ip,
   },
@@ -73,15 +56,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('browser', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { browser } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(browser, t)}>
-          {browser}
-        </Cell>
-      )
+      return getCell(browser, t)
     },
     copyText: rowIndex => filteredData[rowIndex].browser,
   },
@@ -91,15 +68,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('version', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { version } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(version, t)}>
-          {version}
-        </Cell>
-      )
+      return getCell(version, t)
     },
     copyText: rowIndex => filteredData[rowIndex].version,
   },
@@ -109,15 +80,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('mobile', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { mobile } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(mobile, t)}>
-          {mobile}
-        </Cell>
-      )
+      return getCell(mobile, t)
     },
     copyText: rowIndex => filteredData[rowIndex].mobile,
   },
@@ -127,18 +92,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('extra', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { extra } = filteredData[rowIndex]
-      const formattedExtra = JSON.stringify(extra, undefined, 2)
-      return (
-        <Cell>
-          <JSONFormat content={formattedExtra}>
-            {formattedExtra}
-          </JSONFormat>
-        </Cell>
-      )
+      return getJsonFormattedCell(extra)
     },
     copyText: rowIndex => JSON.stringify(filteredData[rowIndex].extra, undefined, 2),
   },