SSA implemented with TS

Author: faisalsiddique4400

admin-ui/plugins/auth-server/components/JsonViewer/JsonViewer.js

@@ -0,0 +1,44 @@
+import React, { useMemo, memo } from 'react'
+import { JsonView, allExpanded, darkStyles, defaultStyles } from 'react-json-view-lite'
+import 'react-json-view-lite/dist/index.css'
+import './JsonViewer.css'
+import customColors from '@/customColors'
+
+interface JsonViewerProps {
+  data: Record<string, unknown> | unknown[]
+  theme?: 'light' | 'dark'
+  expanded?: boolean
+  style?: React.CSSProperties
+  className?: string
+}
+
+const JsonViewer: React.FC<JsonViewerProps> = ({
+  data,
+  theme = 'light',
+  expanded = true,
+  style = {},
+  className = '',
+}) => {
+  const styles = useMemo(() => (theme === 'dark' ? darkStyles : defaultStyles), [theme])
+  const shouldExpand = useMemo(() => (expanded ? allExpanded : undefined), [expanded])
+
+  const containerStyle = useMemo(
+    () => ({
+      padding: '1rem',
+      borderRadius: '4px',
+      backgroundColor: theme === 'dark' ? customColors.black : customColors.white,
+      ...style,
+    }),
+    [theme, style],
+  )
+
+  return (
+    <div className={`json-viewer ${className}`} style={containerStyle}>
+      <JsonView data={data} style={styles} shouldExpandNode={shouldExpand} />
+    </div>
+  )
+}
+
+JsonViewer.displayName = 'JsonViewer'
+
+export default memo(JsonViewer)

admin-ui/plugins/auth-server/components/JsonViewer/JsonViewer.tsx

@@ -1,12 +1,20 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
 import JsonViewer from './JsonViewer'
-import PropTypes from 'prop-types'
 import customColors from '@/customColors'
 import GluuFormFooter from 'Routes/Apps/Gluu/GluuFormFooter'
 
-const JsonViewerDialog = ({
+interface JsonViewerDialogProps {
+  isOpen: boolean
+  toggle: () => void
+  data: Record<string, unknown> | unknown[]
+  title?: string
+  theme?: 'light' | 'dark'
+  expanded?: boolean
+}
+
+const JsonViewerDialog: React.FC<JsonViewerDialogProps> = ({
   isOpen,
   toggle,
   data,
@@ -15,12 +23,14 @@ const JsonViewerDialog = ({
   expanded = true,
 }) => {
   const { t } = useTranslation()
+
   return (
     <Modal isOpen={isOpen} toggle={toggle} size="lg" className="modal-outline-primary">
       <ModalHeader toggle={toggle}>
         <i
           style={{ color: customColors.logo }}
           className="fa fa-2x fa-code fa-fw modal-icon mb-3"
+          aria-hidden="true"
         />
         {title}
       </ModalHeader>
@@ -35,21 +45,14 @@ const JsonViewerDialog = ({
           showApply={false}
           disableBack={false}
           className="w-100"
-          backButtonLabel={t('actions.close')}
+          backButtonLabel={t('actions.cancel')}
           backIconClass="fa fa-times-circle"
         />
       </ModalFooter>
     </Modal>
   )
 }
 
-JsonViewerDialog.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  toggle: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired,
-  title: PropTypes.string,
-  theme: PropTypes.string,
-  expanded: PropTypes.bool,
-}
+JsonViewerDialog.displayName = 'JsonViewerDialog'
 
-export default JsonViewerDialog
+export default memo(JsonViewerDialog)