libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

KEYCLOAK-14680 added header and smaller link

Browse source
This commit is contained in:
Erik Jan de Wit 2020-07-07 15:49:20 +02:00 committed by Stan Silvert
parent 30e708d958
commit 7d77969617
1 changed files with 32 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
themes/src/main/resources/theme/keycloak-preview/account/src/app/content/applications-page/ApplicationsPage.tsx
View file

@ -26,9 +26,10 @@ import {
DataListItemCells,
Grid,
GridItem,
Button,
} from '@patternfly/react-core';
import { InfoAltIcon, CheckIcon, BuilderImageIcon } from '@patternfly/react-icons';
import { InfoAltIcon, CheckIcon, BuilderImageIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
import { ContentPage } from '../ContentPage';
import { ContinueCancelModal } from '../../widgets/ContinueCancelModal';
import { HttpResponse } from '../../account-service/account.service';
@ -115,10 +116,33 @@ export class ApplicationsPage extends React.Component<ApplicationsPageProps, App
public render(): React.ReactNode {
return (
<ContentPage title={Msg.localize('applicationsPageTitle')}>
<DataList id="applications-list" aria-label={Msg.localize('applicationsPageTitle')}>
<DataList id="applications-list" aria-label={Msg.localize('applicationsPageTitle')} isCompact>
<DataListItem id="applications-list-header" aria-labelledby="Columns names">
<DataListItemRow>
// invisible toggle allows headings to line up properly
<span style={{ visibility: 'hidden' }}>
<DataListToggle
isExpanded={false}
id='applications-list-header-invisible-toggle'
aria-controls="hidden"
/>
</span>
<DataListItemCells
dataListCells={[
<DataListCell key='applications-list-client-id-header' width={2}>
<strong><Msg msgKey='applicaitonName' /></strong>
</DataListCell>,
<DataListCell key='applications-list-app-type-header' width={2}>
<strong><Msg msgKey='applicationType' /></strong>
</DataListCell>,
<DataListCell key='applications-list-status' width={2}>
<strong><Msg msgKey='status' /></strong>
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
{this.state.applications.map((application: Application, appIndex: number) => {
const appUrl: string = application.effectiveUrl;
return (
<DataListItem id={this.elementId("client-id", application)} key={'application-' + appIndex} aria-labelledby="applications-list" isExpanded={this.state.isRowOpen[appIndex]}>
<DataListItemRow>
@ -131,7 +155,9 @@ export class ApplicationsPage extends React.Component<ApplicationsPageProps, App
<DataListItemCells
dataListCells={[
<DataListCell id={this.elementId('name', application)} width={2} key={'app-' + appIndex}>
<BuilderImageIcon size='sm' /> {application.clientName ? application.clientName : application.clientId}
<Button component="a" variant="link" onClick={() => window.open(application.effectiveUrl)}>
{application.clientName || application.clientId} <ExternalLinkAltIcon/>
</Button>
</DataListCell>,
<DataListCell id={this.elementId('internal', application)} width={2} key={'internal-' + appIndex}>
{application.userConsentRequired ? Msg.localize('thirdPartyApp') : Msg.localize('internalApp')}
@ -139,13 +165,7 @@ export class ApplicationsPage extends React.Component<ApplicationsPageProps, App
</DataListCell>,
<DataListCell id={this.elementId('status', application)} width={2} key={'status-' + appIndex}>
{application.inUse ? Msg.localize('inUse') : Msg.localize('notInUse')}
</DataListCell>,
<DataListCell id={this.elementId('effectiveurl', application)} width={4} key={'effectiveUrl-' + appIndex}>
<button className="pf-c-button pf-m-link" type="button" onClick={() => window.open(appUrl)}>
<span className="pf-c-button__icon">
<i className="fas fa-link" aria-hidden="true"></i>
</span>{application.effectiveUrl}</button>
</DataListCell>,
</DataListCell>
]}
/>
</DataListItemRow>