-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add page style dialog and its routing
- Loading branch information
1 parent
2d4d7dd
commit a475235
Showing
11 changed files
with
351 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/EntityPage.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import React, { memo, useRef, useState } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import Button from '@splunk/react-ui/Button'; | ||
| import Link from '@splunk/react-ui/Link'; | ||
| import WaitSpinner from '@splunk/react-ui/WaitSpinner'; | ||
| import ColumnLayout from '@splunk/react-ui/ColumnLayout'; | ||
| import { _ } from '@splunk/ui-utils/i18n'; | ||
| import { useSplunkTheme } from '@splunk/themes'; | ||
|
|
||
| import { MODE_CLONE, MODE_CREATE, MODE_EDIT } from '../constants/modes'; | ||
| import { PAGE_INPUT } from '../constants/pages'; | ||
| import BaseFormView from './BaseFormView'; | ||
| import { TitleComponent } from '../pages/Input/InputPageStyle'; | ||
|
|
||
| function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLabel }) { | ||
| const form = useRef(); | ||
| const [isSubmitting, setIsSubmitting] = useState(false); | ||
| let buttonText = _('Submit'); | ||
|
|
||
| if (mode === MODE_CREATE) { | ||
| buttonText = _('Add'); | ||
| } else if (mode === MODE_CLONE) { | ||
| buttonText = _('Clone Input'); | ||
| } else if (mode === MODE_EDIT) { | ||
| buttonText = _('Update'); | ||
| } | ||
|
|
||
| const { embossShadow } = useSplunkTheme(); | ||
| const colStyle = { | ||
| boxShadow: embossShadow, | ||
| padding: '5%', | ||
| }; | ||
|
|
||
| const handleSubmit = () => { | ||
| const result = form.current.handleSubmit(); | ||
| if (result) { | ||
| handleRequestClose(); | ||
| } | ||
| }; | ||
|
|
||
| const handleFormSubmit = (set, close) => { | ||
| setIsSubmitting(set); | ||
| if (close) { | ||
| handleRequestClose(); | ||
| } | ||
| }; | ||
| return ( | ||
| <ColumnLayout gutter={8}> | ||
| <ColumnLayout.Row style={{ padding: '5px 0px' }}> | ||
| <ColumnLayout.Column> | ||
| <TitleComponent> | ||
| <Link onClick={handleRequestClose}>{_('Inputs')}</Link> | ||
| {' > '} | ||
| {_(formLabel)} | ||
| </TitleComponent> | ||
| </ColumnLayout.Column> | ||
| </ColumnLayout.Row> | ||
| <ColumnLayout.Row> | ||
| <ColumnLayout.Column span={2} /> | ||
| <ColumnLayout.Column span={8} style={colStyle}> | ||
| <BaseFormView | ||
| ref={form} | ||
| page={PAGE_INPUT} | ||
| serviceName={serviceName} | ||
| mode={mode} | ||
| stanzaName={stanzaName} | ||
| handleFormSubmit={handleFormSubmit} | ||
| /> | ||
| </ColumnLayout.Column> | ||
| <ColumnLayout.Column span={2} /> | ||
| </ColumnLayout.Row> | ||
| <ColumnLayout.Row> | ||
| <ColumnLayout.Column span={7} /> | ||
| <ColumnLayout.Column span={3} style={{ textAlign: 'right' }}> | ||
| <Button | ||
| appearance="secondary" | ||
| onClick={handleRequestClose} | ||
| label={_('Cancel')} | ||
| disabled={isSubmitting} | ||
| /> | ||
| <Button | ||
| appearance="primary" | ||
| label={isSubmitting ? <WaitSpinner /> : buttonText} | ||
| onClick={handleSubmit} | ||
| disabled={isSubmitting} | ||
| /> | ||
| </ColumnLayout.Column> | ||
| <ColumnLayout.Column span={2} /> | ||
| </ColumnLayout.Row> | ||
| </ColumnLayout> | ||
| ); | ||
| } | ||
|
|
||
| EntityPage.propTypes = { | ||
| handleRequestClose: PropTypes.func, | ||
| serviceName: PropTypes.string, | ||
| mode: PropTypes.string, | ||
| stanzaName: PropTypes.string, | ||
| formLabel: PropTypes.string, | ||
| }; | ||
|
|
||
| export default memo(EntityPage); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/constants/dialogStyles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export const STYLE_PAGE = 'page'; | ||
| export const STYLE_MODAL = 'modal'; |
2 changes: 2 additions & 0 deletions
2
splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/constants/pages.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export const PAGE_INPUT = 'inputs'; | ||
| export const PAGE_CONF = 'configuration'; |
Oops, something went wrong.