Use new patternfly jumplinks. (#246)
* Use new patternfly jumplinks. * Update snapshots
This commit is contained in:
parent
b59902e3c8
commit
2be549a60e
12 changed files with 15416 additions and 12639 deletions
|
@ -16,10 +16,10 @@
|
|||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@patternfly/patternfly": "^4.42.2",
|
||||
"@patternfly/react-core": "4.50.2",
|
||||
"@patternfly/react-icons": "4.7.6",
|
||||
"@patternfly/react-table": "4.16.20",
|
||||
"@patternfly/patternfly": "^4.65.6",
|
||||
"@patternfly/react-core": "4.79.2",
|
||||
"@patternfly/react-icons": "4.7.18",
|
||||
"@patternfly/react-table": "4.19.24",
|
||||
"file-saver": "^2.0.2",
|
||||
"i18next": "^19.6.2",
|
||||
"keycloak-admin": "1.14.2",
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -8,7 +8,7 @@ Object {
|
|||
<table
|
||||
aria-label="Clients"
|
||||
class="pf-c-table pf-m-grid-md pf-m-compact"
|
||||
data-ouia-component-id="OUIA-Generated-Table-1"
|
||||
data-ouia-component-id="OUIA-Generated-Table-2"
|
||||
data-ouia-component-type="PF4/Table"
|
||||
data-ouia-safe="true"
|
||||
role="grid"
|
||||
|
@ -16,7 +16,12 @@ Object {
|
|||
<thead
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-1"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
<th
|
||||
class=""
|
||||
data-key="0"
|
||||
|
@ -53,15 +58,17 @@ Object {
|
|||
class=""
|
||||
data-key="4"
|
||||
data-label=""
|
||||
scope=""
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=""
|
||||
role="rowgroup"
|
||||
>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-1"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-2"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -161,7 +168,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-2"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-3"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -261,7 +268,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-3"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-4"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -334,7 +341,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-4"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-5"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -407,7 +414,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-5"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-6"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -478,7 +485,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-6"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-7"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -578,7 +585,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-7"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-8"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -649,7 +656,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-8"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-9"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -755,7 +762,7 @@ Object {
|
|||
<table
|
||||
aria-label="Clients"
|
||||
class="pf-c-table pf-m-grid-md pf-m-compact"
|
||||
data-ouia-component-id="OUIA-Generated-Table-1"
|
||||
data-ouia-component-id="OUIA-Generated-Table-2"
|
||||
data-ouia-component-type="PF4/Table"
|
||||
data-ouia-safe="true"
|
||||
role="grid"
|
||||
|
@ -763,7 +770,12 @@ Object {
|
|||
<thead
|
||||
class=""
|
||||
>
|
||||
<tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-1"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
<th
|
||||
class=""
|
||||
data-key="0"
|
||||
|
@ -800,15 +812,17 @@ Object {
|
|||
class=""
|
||||
data-key="4"
|
||||
data-label=""
|
||||
scope=""
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=""
|
||||
role="rowgroup"
|
||||
>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-1"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-2"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -908,7 +922,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-2"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-3"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -1008,7 +1022,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-3"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-4"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -1081,7 +1095,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-4"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-5"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -1154,7 +1168,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-5"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-6"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -1225,7 +1239,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-6"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-7"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -1325,7 +1339,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-7"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-8"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
@ -1396,7 +1410,7 @@ Object {
|
|||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-8"
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-9"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe="true"
|
||||
>
|
||||
|
|
|
@ -57,6 +57,8 @@
|
|||
|
||||
"createRealm": "Create Realm",
|
||||
|
||||
"jumpToSection": "Jump to section",
|
||||
|
||||
"Sunday": "Sunday",
|
||||
"Monday": "Monday",
|
||||
"Tuesday": "Tuesday",
|
||||
|
|
|
@ -41,6 +41,7 @@ exports[`remove alert after timeout: cleared alert 1`] = `
|
|||
data-ouia-safe={true}
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
type="button"
|
||||
>
|
||||
Add
|
||||
|
@ -91,6 +92,7 @@ exports[`remove alert after timeout: with alert 1`] = `
|
|||
data-ouia-safe={true}
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
type="button"
|
||||
>
|
||||
Add
|
||||
|
|
|
@ -48,6 +48,8 @@ exports[`Confirmation dialog renders simple confirm dialog 1`] = `
|
|||
ouiaSafe={true}
|
||||
showClose={true}
|
||||
title="Delete app02?"
|
||||
titleIconVariant={null}
|
||||
titleLabel=""
|
||||
variant="small"
|
||||
>
|
||||
<Portal
|
||||
|
@ -97,10 +99,15 @@ exports[`Confirmation dialog renders simple confirm dialog 1`] = `
|
|||
class="pf-c-modal-box__header"
|
||||
>
|
||||
<h1
|
||||
class="pf-c-modal-box__title pf-c-modal-box__title"
|
||||
class="pf-c-modal-box__title"
|
||||
id="pf-modal-part-2"
|
||||
>
|
||||
Delete app02?
|
||||
|
||||
<span
|
||||
class="pf-c-modal-box__title-text"
|
||||
>
|
||||
Delete app02?
|
||||
</span>
|
||||
</h1>
|
||||
</header>
|
||||
<div
|
||||
|
@ -174,6 +181,8 @@ exports[`Confirmation dialog renders simple confirm dialog 1`] = `
|
|||
ouiaSafe={true}
|
||||
showClose={true}
|
||||
title="Delete app02?"
|
||||
titleIconVariant={null}
|
||||
titleLabel=""
|
||||
variant="small"
|
||||
>
|
||||
<Backdrop>
|
||||
|
@ -236,6 +245,7 @@ exports[`Confirmation dialog renders simple confirm dialog 1`] = `
|
|||
data-ouia-safe={true}
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
type="button"
|
||||
>
|
||||
<TimesIcon
|
||||
|
@ -265,20 +275,27 @@ exports[`Confirmation dialog renders simple confirm dialog 1`] = `
|
|||
</button>
|
||||
</Button>
|
||||
</ModalBoxCloseButton>
|
||||
<ModalBoxHeader>
|
||||
<ModalBoxHeader
|
||||
help={null}
|
||||
>
|
||||
<header
|
||||
className="pf-c-modal-box__header"
|
||||
>
|
||||
<ModalBoxTitle
|
||||
className="pf-c-modal-box__title"
|
||||
id="pf-modal-part-2"
|
||||
title="Delete app02?"
|
||||
titleIconVariant={null}
|
||||
titleLabel=""
|
||||
>
|
||||
<h1
|
||||
className="pf-c-modal-box__title pf-c-modal-box__title"
|
||||
className="pf-c-modal-box__title"
|
||||
id="pf-modal-part-2"
|
||||
>
|
||||
Delete app02?
|
||||
<span
|
||||
className="pf-c-modal-box__title-text"
|
||||
>
|
||||
Delete app02?
|
||||
</span>
|
||||
</h1>
|
||||
</ModalBoxTitle>
|
||||
</header>
|
||||
|
@ -313,6 +330,7 @@ exports[`Confirmation dialog renders simple confirm dialog 1`] = `
|
|||
disabled={false}
|
||||
id="modal-confirm"
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
|
@ -334,6 +352,7 @@ exports[`Confirmation dialog renders simple confirm dialog 1`] = `
|
|||
disabled={false}
|
||||
id="modal-cancel"
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
type="button"
|
||||
>
|
||||
cancel
|
||||
|
|
|
@ -39,7 +39,7 @@ exports[`<FormAccess /> render normal form 1`] = `
|
|||
<div
|
||||
className="pf-c-form__group-control"
|
||||
>
|
||||
<ForwardRef
|
||||
<TextInput
|
||||
id="field"
|
||||
isDisabled={false}
|
||||
key=".0"
|
||||
|
@ -75,7 +75,7 @@ exports[`<FormAccess /> render normal form 1`] = `
|
|||
type="text"
|
||||
/>
|
||||
</TextInputBase>
|
||||
</ForwardRef>
|
||||
</TextInput>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
|
|
@ -13,6 +13,9 @@ exports[`<HelpHeader /> enable help 1`] = `
|
|||
aria-haspopup="true"
|
||||
aria-label="Help"
|
||||
class="pf-c-dropdown__toggle pf-m-plain"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
|
||||
data-ouia-component-type="PF4/DropdownToggle"
|
||||
data-ouia-safe="true"
|
||||
id="help"
|
||||
type="button"
|
||||
>
|
||||
|
@ -44,6 +47,9 @@ exports[`<HelpHeader /> enable help 1`] = `
|
|||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-3"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
|
@ -81,6 +87,9 @@ exports[`<HelpHeader /> enable help 1`] = `
|
|||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item pf-m-description"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-4"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
|
@ -166,6 +175,9 @@ exports[`<HelpHeader /> open dropdown 1`] = `
|
|||
aria-haspopup="true"
|
||||
aria-label="Help"
|
||||
class="pf-c-dropdown__toggle pf-m-plain"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
|
||||
data-ouia-component-type="PF4/DropdownToggle"
|
||||
data-ouia-safe="true"
|
||||
id="help"
|
||||
type="button"
|
||||
>
|
||||
|
@ -197,6 +209,9 @@ exports[`<HelpHeader /> open dropdown 1`] = `
|
|||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-1"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
|
@ -234,6 +249,9 @@ exports[`<HelpHeader /> open dropdown 1`] = `
|
|||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item pf-m-description"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-2"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
|
@ -314,6 +332,9 @@ exports[`<HelpHeader /> render 1`] = `
|
|||
aria-haspopup="true"
|
||||
aria-label="Help"
|
||||
class="pf-c-dropdown__toggle pf-m-plain"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
|
||||
data-ouia-component-type="PF4/DropdownToggle"
|
||||
data-ouia-safe="true"
|
||||
id="help"
|
||||
type="button"
|
||||
>
|
||||
|
|
|
@ -100,7 +100,7 @@ exports[`<JsonFileUpload /> render 1`] = `
|
|||
<div
|
||||
className="pf-c-input-group"
|
||||
>
|
||||
<ForwardRef
|
||||
<TextInput
|
||||
aria-describedby="test-browse-button"
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
id="test-filename"
|
||||
|
@ -146,7 +146,7 @@ exports[`<JsonFileUpload /> render 1`] = `
|
|||
value=""
|
||||
/>
|
||||
</TextInputBase>
|
||||
</ForwardRef>
|
||||
</TextInput>
|
||||
<Button
|
||||
id="test-browse-button"
|
||||
isDisabled={false}
|
||||
|
@ -164,6 +164,7 @@ exports[`<JsonFileUpload /> render 1`] = `
|
|||
disabled={false}
|
||||
id="test-browse-button"
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
type="button"
|
||||
>
|
||||
Browse...
|
||||
|
@ -184,6 +185,7 @@ exports[`<JsonFileUpload /> render 1`] = `
|
|||
data-ouia-safe={true}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
|
@ -198,7 +200,6 @@ exports[`<JsonFileUpload /> render 1`] = `
|
|||
>
|
||||
<TextArea
|
||||
aria-label="File upload"
|
||||
className=""
|
||||
disabled={false}
|
||||
id="test"
|
||||
isRequired={false}
|
||||
|
@ -209,18 +210,33 @@ exports[`<JsonFileUpload /> render 1`] = `
|
|||
validated="default"
|
||||
value=""
|
||||
>
|
||||
<textarea
|
||||
aria-invalid={false}
|
||||
<TextArea
|
||||
aria-label="File upload"
|
||||
className="pf-c-form-control pf-m-resize-vertical"
|
||||
className=""
|
||||
disabled={false}
|
||||
id="test"
|
||||
innerRef={null}
|
||||
isRequired={false}
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
required={false}
|
||||
resizeOrientation="vertical"
|
||||
validated="default"
|
||||
value=""
|
||||
/>
|
||||
>
|
||||
<textarea
|
||||
aria-invalid={false}
|
||||
aria-label="File upload"
|
||||
className="pf-c-form-control pf-m-resize-vertical"
|
||||
disabled={false}
|
||||
id="test"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
required={false}
|
||||
value=""
|
||||
/>
|
||||
</TextArea>
|
||||
</TextArea>
|
||||
</div>
|
||||
<input
|
||||
|
@ -355,7 +371,7 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
|||
<div
|
||||
className="pf-c-input-group"
|
||||
>
|
||||
<ForwardRef
|
||||
<TextInput
|
||||
aria-describedby="upload-browse-button"
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
id="upload-filename"
|
||||
|
@ -401,7 +417,7 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
|||
value=""
|
||||
/>
|
||||
</TextInputBase>
|
||||
</ForwardRef>
|
||||
</TextInput>
|
||||
<Button
|
||||
id="upload-browse-button"
|
||||
isDisabled={false}
|
||||
|
@ -419,6 +435,7 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
|||
disabled={false}
|
||||
id="upload-browse-button"
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
type="button"
|
||||
>
|
||||
Browse...
|
||||
|
@ -439,6 +456,7 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
|||
data-ouia-safe={true}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
role={null}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
|
@ -453,7 +471,6 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
|||
>
|
||||
<TextArea
|
||||
aria-label="File upload"
|
||||
className=""
|
||||
disabled={false}
|
||||
id="upload"
|
||||
isRequired={false}
|
||||
|
@ -464,18 +481,33 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
|||
validated="default"
|
||||
value=""
|
||||
>
|
||||
<textarea
|
||||
aria-invalid={false}
|
||||
<TextArea
|
||||
aria-label="File upload"
|
||||
className="pf-c-form-control pf-m-resize-vertical"
|
||||
className=""
|
||||
disabled={false}
|
||||
id="upload"
|
||||
innerRef={null}
|
||||
isRequired={false}
|
||||
name="upload"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
required={false}
|
||||
resizeOrientation="vertical"
|
||||
validated="default"
|
||||
value=""
|
||||
/>
|
||||
>
|
||||
<textarea
|
||||
aria-invalid={false}
|
||||
aria-label="File upload"
|
||||
className="pf-c-form-control pf-m-resize-vertical"
|
||||
disabled={false}
|
||||
id="upload"
|
||||
name="upload"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
required={false}
|
||||
value=""
|
||||
/>
|
||||
</TextArea>
|
||||
</TextArea>
|
||||
</div>
|
||||
<input
|
||||
|
|
|
@ -101,6 +101,9 @@ exports[`renders realm selector 1`] = `
|
|||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle keycloak__realm_selector_dropdown__toggle"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
|
||||
data-ouia-component-type="PF4/DropdownToggle"
|
||||
data-ouia-safe="true"
|
||||
id="realm-select-toggle"
|
||||
type="button"
|
||||
>
|
||||
|
@ -138,6 +141,9 @@ exports[`renders realm selector 1`] = `
|
|||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-1"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
|
@ -163,6 +169,9 @@ exports[`renders realm selector 1`] = `
|
|||
aria-haspopup={true}
|
||||
bubbleEvent={false}
|
||||
className="keycloak__realm_selector_dropdown__toggle"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
|
||||
data-ouia-component-type="PF4/DropdownToggle"
|
||||
data-ouia-safe={true}
|
||||
getMenuRef={[Function]}
|
||||
id="realm-select-toggle"
|
||||
isActive={false}
|
||||
|
@ -186,6 +195,9 @@ exports[`renders realm selector 1`] = `
|
|||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle keycloak__realm_selector_dropdown__toggle"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
|
||||
data-ouia-component-type="PF4/DropdownToggle"
|
||||
data-ouia-safe="true"
|
||||
id="realm-select-toggle"
|
||||
type="button"
|
||||
>
|
||||
|
@ -223,6 +235,9 @@ exports[`renders realm selector 1`] = `
|
|||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-1"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
|
@ -248,6 +263,9 @@ exports[`renders realm selector 1`] = `
|
|||
aria-expanded={false}
|
||||
aria-haspopup={true}
|
||||
className="pf-c-dropdown__toggle keycloak__realm_selector_dropdown__toggle"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
|
||||
data-ouia-component-type="PF4/DropdownToggle"
|
||||
data-ouia-safe={true}
|
||||
disabled={false}
|
||||
id="realm-select-toggle"
|
||||
onClick={[Function]}
|
||||
|
|
|
@ -1,5 +1,12 @@
|
|||
import React, { Children, useEffect, useState } from "react";
|
||||
import { Grid, GridItem, Title } from "@patternfly/react-core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Grid,
|
||||
GridItem,
|
||||
JumpLinks,
|
||||
JumpLinksItem,
|
||||
Title,
|
||||
} from "@patternfly/react-core";
|
||||
|
||||
import { FormPanel } from "./FormPanel";
|
||||
import style from "./scroll-form.module.css";
|
||||
|
@ -10,76 +17,43 @@ type ScrollFormProps = {
|
|||
};
|
||||
|
||||
export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
|
||||
const { t } = useTranslation("common");
|
||||
const [active, setActive] = useState(sections[0]);
|
||||
useEffect(() => {
|
||||
const getCurrentSection = () => {
|
||||
for (let sectionName of sections) {
|
||||
const section = document.getElementById(sectionName)!;
|
||||
const startAt = section.offsetTop;
|
||||
const endAt = startAt + section.offsetHeight;
|
||||
const currentPosition =
|
||||
document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const isInView = currentPosition >= startAt && currentPosition < endAt;
|
||||
if (isInView) {
|
||||
return sectionName;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const active = getCurrentSection();
|
||||
if (active) {
|
||||
setActive(active);
|
||||
}
|
||||
});
|
||||
}, [active, sections]);
|
||||
|
||||
const Nav = () => (
|
||||
<div className={style.sticky}>
|
||||
<Title headingLevel="h5" size="lg">
|
||||
Jump to Section
|
||||
{t("jumpToSection")}
|
||||
</Title>
|
||||
<div className="pf-c-tabs pf-m-vertical">
|
||||
<ul className="pf-c-tabs__list">
|
||||
{sections.map((cat) => (
|
||||
<li
|
||||
className={
|
||||
"pf-c-tabs__item" + (active === cat ? " pf-m-current" : "")
|
||||
}
|
||||
key={cat}
|
||||
>
|
||||
<button
|
||||
className="pf-c-tabs__link"
|
||||
id={`link-${cat}`}
|
||||
onClick={() =>
|
||||
document
|
||||
.getElementById(cat)
|
||||
?.scrollIntoView({ behavior: "smooth" })
|
||||
}
|
||||
>
|
||||
<span className="pf-c-tabs__item-text">{cat}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<JumpLinks isVertical>
|
||||
{sections.map((cat) => (
|
||||
<JumpLinksItem
|
||||
isActive={active === cat}
|
||||
key={cat}
|
||||
href={`#${cat}`}
|
||||
onClick={() => setActive(cat)}
|
||||
>
|
||||
{cat}
|
||||
</JumpLinksItem>
|
||||
))}
|
||||
</JumpLinks>
|
||||
</div>
|
||||
);
|
||||
|
||||
const nodes = Children.toArray(children);
|
||||
return (
|
||||
<>
|
||||
<Grid hasGutter>
|
||||
<GridItem span={8}>
|
||||
{sections.map((cat, index) => (
|
||||
<FormPanel id={cat} key={cat} title={cat}>
|
||||
{nodes[index]}
|
||||
</FormPanel>
|
||||
))}
|
||||
</GridItem>
|
||||
<GridItem span={4}>
|
||||
<Nav />
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</>
|
||||
<Grid hasGutter>
|
||||
<GridItem span={8}>
|
||||
{sections.map((cat, index) => (
|
||||
<FormPanel id={cat} key={cat} title={cat}>
|
||||
{nodes[index]}
|
||||
</FormPanel>
|
||||
))}
|
||||
</GridItem>
|
||||
<GridItem span={4}>
|
||||
<Nav />
|
||||
</GridItem>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
|
75
yarn.lock
75
yarn.lock
|
@ -3458,51 +3458,56 @@
|
|||
dependencies:
|
||||
mkdirp "^1.0.4"
|
||||
|
||||
"@patternfly/patternfly@4.42.2", "@patternfly/patternfly@^4.42.2":
|
||||
version "4.42.2"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.42.2.tgz#236d87bd85f00cb7a16d0c2956638ecedc3fa6ef"
|
||||
integrity sha512-VLDhNko4D09sKcnzWEzMr8T8z9btqAYpuK0ntWMsAwi+/C9XsKyaxPioxuEsm7PeuW6OU0neEzSDYMSUnwrMBQ==
|
||||
"@patternfly/patternfly@4.65.5":
|
||||
version "4.65.5"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.65.5.tgz#22917237ea8b9cbfe52be1dfd00a258a6bfdb324"
|
||||
integrity sha512-10dXyBt4fo55Wtm7v+Vmn9eVp4rD25fR296uif0nxGX3ZXhEuyyPOfo2DgNmCFHu42Exo6N8DP7W472Pp9VkJw==
|
||||
|
||||
"@patternfly/react-core@4.50.2", "@patternfly/react-core@^4.50.2":
|
||||
version "4.50.2"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.50.2.tgz#b66d9bd8804994af70c2d80ce43a0dee6b90de5c"
|
||||
integrity sha512-EAzrgsNivoYJb+Zk0YGKgr24J4qqY8dnPt96NJKhEcSRmVeqJEvL6Uhd1xJF1hRKQ5Bzrn/Lp66C+u5fgmnUBw==
|
||||
"@patternfly/patternfly@^4.65.6":
|
||||
version "4.65.6"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.65.6.tgz#ca906c6d55ffc3097d0e23d9ad578e95cb866ea3"
|
||||
integrity sha512-dENO2nZbf5SoEH68coW9U+6FpZmdVnFVjztl7rUeWUPSBUuF1eWld5LT03Q6PVoZuWqqbJxFJodyFKwLb+L9vw==
|
||||
|
||||
"@patternfly/react-core@4.79.2", "@patternfly/react-core@^4.79.2":
|
||||
version "4.79.2"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.79.2.tgz#058ebea5a2749294dd69ad9fe8d3e43088100ada"
|
||||
integrity sha512-TCWi5Hu8+gpqFVAL4ZMXCRLbRfayM7wJ8+/Ob4rfhC61qm36CZNAcqWOmuV8bghOzB29INUMNShggtuiUa5mkg==
|
||||
dependencies:
|
||||
"@patternfly/react-icons" "^4.7.6"
|
||||
"@patternfly/react-styles" "^4.7.5"
|
||||
"@patternfly/react-tokens" "^4.9.8"
|
||||
"@patternfly/react-icons" "^4.7.18"
|
||||
"@patternfly/react-styles" "^4.7.16"
|
||||
"@patternfly/react-tokens" "^4.9.18"
|
||||
focus-trap "4.0.2"
|
||||
react-dropzone "9.0.0"
|
||||
tippy.js "5.1.2"
|
||||
tslib "^1.11.1"
|
||||
tslib "1.13.0"
|
||||
|
||||
"@patternfly/react-icons@4.7.6", "@patternfly/react-icons@^4.7.6":
|
||||
version "4.7.6"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.7.6.tgz#d5f19192912284fc334abb034bc08967b4245f22"
|
||||
integrity sha512-B1+gVqe4zS+xQGrQh09z846rWxS6JNAs7PpQJYPEJ1SLzLOwy5wEaOK67im9dD6niEJifJqCcbacCNtVZjlWag==
|
||||
"@patternfly/react-icons@4.7.18", "@patternfly/react-icons@^4.7.18":
|
||||
version "4.7.18"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.7.18.tgz#c188f1f460f62bd9ee262f1da580caaefbf8fdf9"
|
||||
integrity sha512-Kd0JjeVCESpMJGb5ZkLXvAdCuklV9dYGUkcTO18WMyXQ57s9+xXjVA77wojmp6Ru1ZCWOP5bLXZOKmwVnOfUpQ==
|
||||
|
||||
"@patternfly/react-styles@^4.7.5":
|
||||
version "4.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.7.5.tgz#b5d7161c0c75b54974b7a4db5a69ab30f6dbcb45"
|
||||
integrity sha512-xom9hI2QzztT5pxByTFj2h3E0s4zD/+wVVLqvugl98cy8bCNpfo97OftfDCxBSV0MuhFDMs8/zr9QJUcq/O8Lw==
|
||||
"@patternfly/react-styles@^4.7.16":
|
||||
version "4.7.16"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.7.16.tgz#a6c5c1cd7efbe54423210ba9cd70a4c41660e09e"
|
||||
integrity sha512-bJmRrYKXgHGPPwLHg/gy1tDb/qEV6JpFLgkelLuz38czXeBnPpAUn9yKry3wNr95VQGERT6FcLsWjXKPY1x42Q==
|
||||
|
||||
"@patternfly/react-table@4.16.20":
|
||||
version "4.16.20"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.16.20.tgz#43e1f855e6cde5fb39b7ce1a6e63c989abadf242"
|
||||
integrity sha512-EBxTnlmEMUcIoL8r1i4sBGB2y1IY1ym9zc47TniC+huC+jWDgxLy2866N/GA+GHtuBT3aPR/0WtziWCD/To8QQ==
|
||||
"@patternfly/react-table@4.19.24":
|
||||
version "4.19.24"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.19.24.tgz#5d121e60f1475af0001a64ace278b92da334614b"
|
||||
integrity sha512-m7nwDnjlgbnqUHbvHzw53ln6ST42Y/n49Jpt1SUvhpzwppb/SSmY0IrT+3ukwOgLW5jeErGTxCNGNIpAaugTBA==
|
||||
dependencies:
|
||||
"@patternfly/patternfly" "4.42.2"
|
||||
"@patternfly/react-core" "^4.50.2"
|
||||
"@patternfly/react-icons" "^4.7.6"
|
||||
"@patternfly/react-styles" "^4.7.5"
|
||||
"@patternfly/react-tokens" "^4.9.8"
|
||||
"@patternfly/patternfly" "4.65.5"
|
||||
"@patternfly/react-core" "^4.79.2"
|
||||
"@patternfly/react-icons" "^4.7.18"
|
||||
"@patternfly/react-styles" "^4.7.16"
|
||||
"@patternfly/react-tokens" "^4.9.18"
|
||||
lodash "^4.17.19"
|
||||
tslib "^1.11.1"
|
||||
tslib "1.13.0"
|
||||
|
||||
"@patternfly/react-tokens@^4.9.8":
|
||||
version "4.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.9.8.tgz#260079b01359bcaf23875890e412f3c6e87e0202"
|
||||
integrity sha512-HBbtQHlWl3/B9KrS1fI3/k6sXDowfTsmw0zKuHXWjG552l0ApOrDmzh120Q7m6cvvkFv/Cw6XRwtJIDZBCEiyg==
|
||||
"@patternfly/react-tokens@^4.9.18":
|
||||
version "4.9.18"
|
||||
resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.9.18.tgz#b34afc5fd2567a50b7658aff004f31b536fd9096"
|
||||
integrity sha512-zQfqwKtoz1hDngyiGnF6oHeESDtgNY6C79Db97JxMMuRBV7i+5f6uC/DrYhcqNtqHA7mxrVJg0SM1xnPSAW9lA==
|
||||
|
||||
"@pmmmwh/react-refresh-webpack-plugin@^0.4.2":
|
||||
version "0.4.3"
|
||||
|
@ -18911,7 +18916,7 @@ ts-pnp@^1.1.6:
|
|||
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
|
||||
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
|
||||
|
||||
tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
|
||||
tslib@1.13.0, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
|
||||
integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
|
||||
|
|
Loading…
Reference in a new issue