Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
moabu merged 6 commits into from
Nov 26, 2025
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3eaf051
fix(admin): description missing in client view details and alignment …
faisalsiddique4400 Nov 25, 2025
fb7f6b2
fix(admin): description missing in client view details and alignment …
faisalsiddique4400 Nov 25, 2025
017df2b
Minor styling enhancements
faisalsiddique4400 Nov 26, 2025
1650c9e
Code Rabbit AI suggestions
faisalsiddique4400 Nov 26, 2025
2252cd5
Code Rabbit AI suggestions
faisalsiddique4400 Nov 26, 2025
e6e215e
Code Rabbit AI suggestions
faisalsiddique4400 Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions admin-ui/app/routes/Apps/Gluu/GluuSecretDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Toggle from 'react-toggle'
import GluuTooltip from './GluuTooltip'
import { useTranslation } from 'react-i18next'

function GluuSecretDetail({ label, value, doc_category, doc_entry }: any) {
function GluuSecretDetail({ label, value, doc_category, doc_entry, lsize = 6, rsize = 6 }: any) {
const { t } = useTranslation()
const [up, setUp] = useState(false)
function handleSecret() {
Expand All @@ -13,22 +13,22 @@ function GluuSecretDetail({ label, value, doc_category, doc_entry }: any) {

return (
<GluuTooltip doc_category={doc_category} doc_entry={doc_entry || label}>
<FormGroup row>
<Label for="input" sm={2}>
<FormGroup row className="align-items-center mb-2">
<Label for="input" sm={lsize} style={{ fontWeight: 'bold' }}>
{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>
)
Expand Down
173 changes: 96 additions & 77 deletions admin-ui/plugins/auth-server/components/Clients/ClientDetailPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,41 @@ function ClientDetailPage({ row, scopes }) {
}
return ''
}

const dash = '-'
const description = row.description || extractDescription(row.customAttributes || []) || dash
const displayName = row.clientName || row.displayName || dash
const detailContainerStyle = {
backgroundColor: customColors.whiteSmoke,
maxHeight: '420px',
overflowY: 'auto',
padding: '1rem',
}
const detailRowStyle = { marginBottom: '0.75rem' }
const detailLabelStyle = { fontWeight: 600 }
const detailValueStyle = {
display: 'flex',
flexWrap: 'wrap',
gap: '0.35rem',
alignItems: 'center',
}

const renderBadgeList = (items) => (
<div style={detailValueStyle}>
{items?.length
? items.map((item, key) => (
<Badge key={key} color={`primary-${selectedTheme}`}>
{item}
</Badge>
))
: dash}
</div>
)

return (
<React.Fragment>
<Container style={{ backgroundColor: customColors.whiteSmoke }}>
<Row>
<Container style={detailContainerStyle}>
<Row style={detailRowStyle}>
<Col sm={6}>
<GluuFormDetailRow
label="fields.client_id"
Expand All @@ -46,25 +76,25 @@ function ClientDetailPage({ row, scopes }) {
/>
</Col>
</Row>
<Row>
<Row style={detailRowStyle}>
<Col sm={6}>
<GluuFormDetailRow
label="fields.name"
value={row.displayName ? row.displayName : dash}
value={displayName}
doc_category={DOC_CATEGORY}
doc_entry="displayName"
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.description"
value={extractDescription(row.customAttributes || []) || dash}
value={description}
doc_category={DOC_CATEGORY}
doc_entry="description"
/>
</Col>
</Row>
<Row>
<Row style={detailRowStyle}>
<Col sm={6}>
<GluuFormDetailRow
label="fields.subject_type"
Expand All @@ -82,111 +112,100 @@ function ClientDetailPage({ row, scopes }) {
/>
</Col>
</Row>
<Row>
<Row style={detailRowStyle}>
<Col sm={6}>
<FormGroup row>
<Label sm={6}>{t('fields.is_trusted_client')}:</Label>
<Label sm={6}>
{row.trustedClient ? (
<Badge color={`primary-${selectedTheme}`}>{t('options.yes')}</Badge>
) : (
<Badge color="secondary">{t('options.no')}</Badge>
)}
<FormGroup row className="align-items-center mb-2">
<Label sm={6} style={detailLabelStyle}>
{t('fields.is_trusted_client')}:
</Label>
<Col sm={6}>
<div style={detailValueStyle}>
{row.trustedClient ? (
<Badge color={`primary-${selectedTheme}`}>{t('options.yes')}</Badge>
) : (
<Badge color="secondary">{t('options.no')}</Badge>
)}
</div>
</Col>
</FormGroup>
</Col>
<Col sm={6}>
<FormGroup row>
<Label sm={6}>{t('fields.status')}:</Label>
<Label sm={6}>
{!row.disabled ? (
<Badge color={`primary-${selectedTheme}`}>{t('options.enabled')}</Badge>
) : (
<Badge color="danger">{t('options.disabled')}</Badge>
)}
<FormGroup row className="align-items-center mb-2">
<Label sm={6} style={detailLabelStyle}>
{t('fields.status')}:
</Label>
<Col sm={6}>
<div style={detailValueStyle}>
{!row.disabled ? (
<Badge color={`primary-${selectedTheme}`}>{t('options.enabled')}</Badge>
) : (
<Badge color="danger">{t('options.disabled')}</Badge>
)}
</div>
</Col>
</FormGroup>
</Col>
</Row>

<Row>
<Row style={detailRowStyle}>
<Col sm={6}>
<FormGroup row>
<Label sm={4}>{t('fields.scopes')}:</Label>
<Label sm={8}>
{clientScopes &&
clientScopes.map((item, key) => (
<Badge key={key} color={`primary-${selectedTheme}`}>
{item}
</Badge>
))}
<FormGroup row className="align-items-center mb-2">
<Label sm={4} style={detailLabelStyle}>
{t('fields.scopes')}:
</Label>
<Col sm={8}>{renderBadgeList(clientScopes)}</Col>
</FormGroup>
</Col>
<Col sm={6}>
<FormGroup row>
<Label sm={4}>{t('fields.grant_types')}:</Label>
<Label sm={8}>
{row.grantTypes &&
row.grantTypes.map((item, key) => (
<Badge key={key} color={`primary-${selectedTheme}`}>
{item}
</Badge>
))}
<FormGroup row className="align-items-center mb-2">
<Label sm={4} style={detailLabelStyle}>
{t('fields.grant_types')}:
</Label>
<Col sm={8}>{renderBadgeList(row.grantTypes)}</Col>
</FormGroup>
</Col>
</Row>
<Row>
<Row style={detailRowStyle}>
<Col sm={6}>
<FormGroup row>
<Label sm={4}>{t('fields.response_types')}:</Label>
<Label sm={8}>
{row.responseTypes &&
row.responseTypes.map((item, key) => (
<Badge key={key} color={`primary-${selectedTheme}`}>
{item}
</Badge>
))}
<FormGroup row className="align-items-center mb-2">
<Label sm={4} style={detailLabelStyle}>
{t('fields.response_types')}:
</Label>
<Col sm={8}>{renderBadgeList(row.responseTypes)}</Col>
</FormGroup>
</Col>
<Col sm={6}>
<FormGroup row>
<Label sm={4}>{t('fields.login_uris')}:</Label>
<Label sm={8}>
{row.redirectUris &&
row.redirectUris.map((item, key) => (
<Badge key={key} color={`primary-${selectedTheme}`}>
{item}
</Badge>
))}
<FormGroup row className="align-items-center mb-2">
<Label sm={4} style={detailLabelStyle}>
{t('fields.login_uris')}:
</Label>
<Col sm={8}>{renderBadgeList(row.redirectUris)}</Col>
</FormGroup>
</Col>
</Row>
<Row>
<Row style={detailRowStyle}>
<Col sm={6}>
<FormGroup row>
<Label sm={4}>{t('fields.logout_redirect_uris')}: </Label>
<Label sm={8}>
{row.postLogoutRedirectUris &&
row.postLogoutRedirectUris.map((item, key) => (
<Badge key={key} color={`primary-${selectedTheme}`}>
{item}
</Badge>
))}
<FormGroup row className="align-items-center mb-2">
<Label sm={4} style={detailLabelStyle}>
{t('fields.logout_redirect_uris')}:
</Label>
<Col sm={8}>{renderBadgeList(row.postLogoutRedirectUris)}</Col>
</FormGroup>
</Col>
<Col sm={6}>
<FormGroup row>
<Label sm={6}>{t('fields.authentication_method')}:</Label>
<Label sm={6}>
{row.authenticationMethod && (
<Badge color={`primary-${selectedTheme}`}>{row.authenticationMethod}</Badge>
)}
<FormGroup row className="align-items-center mb-2">
<Label sm={6} style={detailLabelStyle}>
{t('fields.authentication_method')}:
</Label>
<Col sm={6}>
<div style={detailValueStyle}>
{row.authenticationMethod ? (
<Badge color={`primary-${selectedTheme}`}>{row.authenticationMethod}</Badge>
) : (
dash
)}
</div>
</Col>
</FormGroup>
</Col>
</Row>
Expand Down
Loading