fix(admin): description missing in client view details and alignment issues in fields

admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.tsx

@@ -1,9 +1,25 @@
-import { useContext } from 'react'
+import { useContext, memo, CSSProperties } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FormGroup, Label, Badge } from 'Components'
 import GluuTooltip from './GluuTooltip'
 import { ThemeContext } from 'Context/theme/themeContext'
 
+interface GluuFormDetailRowProps {
+  label: string
+  value?: string | number | boolean | null
+  isBadge?: boolean
+  badgeColor?: string
+  lsize?: number
+  rsize?: number
+  doc_category?: string
+  doc_entry?: string
+  isDirect?: boolean
+  labelStyle?: CSSProperties
+  rowClassName?: string
+}
+
+const defaultLabelStyle: CSSProperties = { fontWeight: 'bold' }
+
 function GluuFormDetailRow({
   label,
   value,
@@ -14,18 +30,22 @@ function GluuFormDetailRow({
   doc_category,
   doc_entry,
   isDirect = false,
-}: any) {
+  labelStyle,
+  rowClassName,
+}: GluuFormDetailRowProps) {
   const { t } = useTranslation()
-  const theme: any = useContext(ThemeContext)
-  const selectedTheme = theme.state.theme
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme?.state?.theme ?? 'light'
+
+  const appliedLabelStyle: CSSProperties = { ...defaultLabelStyle, ...labelStyle }
 
   return (
     <GluuTooltip doc_category={doc_category} isDirect={isDirect} doc_entry={doc_entry || label}>
-      <FormGroup row>
-        <Label for={label} style={{ fontWeight: 'bold' }} sm={lsize || 6}>
+      <FormGroup row className={rowClassName}>
+        <Label for={label} style={appliedLabelStyle} sm={lsize}>
           {t(label)}:
         </Label>
-        <Label for={value?.toString()} sm={rsize || 6}>
+        <Label for={value?.toString()} sm={rsize}>
           {!isBadge ? (
             value
           ) : (
@@ -36,4 +56,4 @@ function GluuFormDetailRow({
     </GluuTooltip>
   )
 }
-export default GluuFormDetailRow
+export default memo(GluuFormDetailRow)

admin-ui/app/routes/Apps/Gluu/GluuSecretDetail.tsx

@@ -1,37 +1,63 @@
-import { useState } from 'react'
+import { useState, memo, useCallback, CSSProperties } from 'react'
 import { FormGroup, Label, Col } from 'Components'
 import Toggle from 'react-toggle'
 import GluuTooltip from './GluuTooltip'
 import { useTranslation } from 'react-i18next'
 
-function GluuSecretDetail({ label, value, doc_category, doc_entry }: any) {
+interface GluuSecretDetailProps {
+  label: string
+  value: string
+  doc_category?: string
+  doc_entry?: string
+  lsize?: number
+  rsize?: number
+  labelStyle?: CSSProperties
+  rowClassName?: string
+}
+
+const defaultLabelStyle: CSSProperties = { fontWeight: 'bold' }
+
+function GluuSecretDetail({
+  label,
+  value,
+  doc_category,
+  doc_entry,
+  lsize = 6,
+  rsize = 6,
+  labelStyle,
+  rowClassName,
+}: GluuSecretDetailProps) {
   const { t } = useTranslation()
   const [up, setUp] = useState(false)
-  function handleSecret() {
-    setUp(!up)
-  }
+
+  const handleSecret = useCallback(() => {
+    setUp((prev) => !prev)
+  }, [])
+
+  const appliedLabelStyle: CSSProperties = { ...defaultLabelStyle, ...labelStyle }
+  const appliedRowClassName = rowClassName || 'align-items-center mb-2'
 
   return (
     <GluuTooltip doc_category={doc_category} doc_entry={doc_entry || label}>
-      <FormGroup row>
-        <Label for="input" sm={2}>
+      <FormGroup row className={appliedRowClassName}>
+        <Label for="input" sm={lsize} style={appliedLabelStyle}>
           {t(label)}:
         </Label>
-        {value !== '-' && (
-          <Label for="input" sm={1}>
-            <Toggle defaultChecked={false} onChange={handleSecret} />
-          </Label>
-        )}
-        {up && (
-          <Col sm={9}>
-            <Label for="input" style={{ fontWeight: 'bold' }}>
+        <Col
+          sm={rsize}
+          className="d-flex align-items-center"
+          style={{ gap: '0.5rem', wordBreak: 'break-all' }}
+        >
+          {value !== '-' && <Toggle defaultChecked={false} onChange={handleSecret} />}
+          {(value === '-' || up) && (
+            <span style={{ fontWeight: 'bold' }} data-testid="secret-value">
               {value}
-            </Label>
-          </Col>
-        )}
+            </span>
+          )}
+        </Col>
       </FormGroup>
     </GluuTooltip>
   )
 }
 
-export default GluuSecretDetail
+export default memo(GluuSecretDetail)