swapped bootstrap component libraries, added base editor

TIER · May 4, 2021 · 4fe12cc · 4fe12cc
1 parent 5365c51
commit 4fe12cc
Show file tree

Hide file tree

Showing 22 changed files with 590 additions and 199 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -7,6 +7,8 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@rjsf/bootstrap-4": "^2.5.1",
+    "@rjsf/core": "^2.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -18,12 +20,12 @@
     "prop-types": "^15.7.2",
     "query-string": "^7.0.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-scroll": "^1.8.2",
-    "reactstrap": "^8.9.0",
     "sass": "^1.32.11",
     "use-http": "^1.0.20",
     "use-query-params": "^1.2.2",

diff --git a/ui/src/app/admin/container/UserManagement.js b/ui/src/app/admin/container/UserManagement.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import Modal from 'react-bootstrap/Modal';
 import useFetch from 'use-http';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -66,23 +66,23 @@ export default function UserManagement({ users, children, reload }) {
     return (
         <div className="user-management">
             {children(users, roles, setUserRoleRequest, (id) => setDeleting(id))}
-            <Modal isOpen={!!deleting} toggle={() => setDeleting(null)}>
-                <ModalHeader toggle={toggle}><Translate value="message.delete-user-title">Delete User?</Translate></ModalHeader>
-                <ModalBody className="d-flex align-content-center">
+            <Modal.Dialog show={!!deleting} onHide={() => setDeleting(null)}>
+                <Modal.Header toggle={toggle}><Translate value="message.delete-user-title">Delete User?</Translate></Modal.Header>
+                <Modal.Body className="d-flex align-content-center">
                     <FontAwesomeIcon className="text-danger mr-4" size="4x" icon={faExclamationTriangle} />
                     <p className="text-danger font-weight-bold mb-0">
                         <Translate value="message.delete-user-body">You are requesting to delete a user. If you complete this process the user will be removed. This cannot be undone. Do you wish to continue?</Translate>
                     </p>
-                </ModalBody>
-                <ModalFooter>
-                    <Button color="danger" onClick={() => deleteUser(deleting)}>
+                </Modal.Body>
+                <Modal.Footer>
+                    <button className="btn btn-danger" type="button" onClick={() => deleteUser(deleting)}>
                         <Translate value="action.delete">Delete</Translate>
-                    </Button>{' '}
-                    <Button color="secondary" onClick={() => setDeleting(null)}>
+                    </button>{' '}
+                    <button className="btn btn-secondary" type="button" onClick={() => setDeleting(null)}>
                         <Translate value="action.cancel">Cancel</Translate>
-                    </Button>
-                </ModalFooter>
-            </Modal>
+                    </button>
+                </Modal.Footer>
+            </Modal.Dialog>
         </div>
     );
 }
diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
@@ -1,77 +1,51 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import {
-    Collapse,
-    Navbar,
-    NavbarToggler,
-    NavbarBrand,
-    Nav,
-    NavItem,
-    NavLink,
-    UncontrolledDropdown,
-    DropdownToggle,
-    DropdownMenu,
-    DropdownItem,
-    NavbarText
-} from 'reactstrap';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlusCircle, faTh, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+import { faTh, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
 
 import Translate from '../../i18n/components/translate';
 import { useTranslation } from '../../i18n/hooks';
 
 import { brand } from '../../app.brand';
 
 export function Header () {
-    const [isOpen, setIsOpen] = React.useState(false);
-
-    const toggle = () => setIsOpen(!isOpen);
     const logoutLabel = useTranslation('action.logout');
 
     return (
         <Navbar expand="md" fixed="top">
-            <NavbarBrand href={brand.logo.link.url} title={brand.logo.link.description}>
+            <Navbar.Brand href={brand.logo.link.url} title={brand.logo.link.description}>
                 <img src={brand.logo.small} width="30" height="30" className="d-inline-block align-top" alt={brand.logo.alt} />
                 <span className="d-lg-inline d-none"><Translate value={brand.logo.link.label}></Translate></span>
-            </NavbarBrand>
-            <NavbarText><Translate value={brand.header.title}></Translate></NavbarText>
-            <NavbarToggler onClick={toggle} />
-            <Collapse isOpen={isOpen} navbar>
+            </Navbar.Brand>
+            <Navbar.Text><Translate value={brand.header.title}></Translate></Navbar.Text>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="ml-auto align-items-center" navbar>
-                    <UncontrolledDropdown nav inNavbar caret="true">
-                        <DropdownToggle className="btn btn-outline-primary btn-sm py-1" nav>
-                            <FontAwesomeIcon icon={faPlusCircle} className="mr-2" />
-                            <Translate value="action.add-new">Add New</Translate>
-                        </DropdownToggle>
-                        <DropdownMenu right>
-                            <DropdownItem>
-                            Option 1
-                            </DropdownItem>
-                            <DropdownItem>
-                            Option 2
-                            </DropdownItem>
-                            <DropdownItem>
-                            Reset
-                            </DropdownItem>
-                        </DropdownMenu>
-                    </UncontrolledDropdown>
-                    <NavItem>
+                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
+                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
+                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+                        <NavDropdown.Divider />
+                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
+                    </NavDropdown>
+                    <Nav.Link>
                         <Link to="/dashboard" className="nav-link" aria-label="Metadata Dashboard">
                             <i className="fa fa-th fa-fw" aria-hidden="true"></i>
                             <FontAwesomeIcon icon={faTh} className="mr-2" />
                             <Translate value="action.dashboard">Dashboard</Translate>
                         </Link>
-                    </NavItem>
-                    <NavItem>
-                        <NavLink className="nav-link" href="/logout" target="_self" aria-label={logoutLabel}>
-                            <FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
-                            <Translate value="action.logout">Logout</Translate>
-                        </NavLink>
-                    </NavItem>
+                    </Nav.Link>
+                    <Nav.Link href="/logout" target="_self" aria-label={logoutLabel}>
+                        <FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
+                        <Translate value="action.logout">Logout</Translate>
+                    </Nav.Link>
                 </Nav>
-            </Collapse>
+            </Navbar.Collapse>
         </Navbar>
     );
 }

diff --git a/ui/src/app/dashboard/component/Search.js b/ui/src/app/dashboard/component/Search.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import pick from 'lodash/pick';
 
-import { Form, Label, Input, Button, InputGroup, InputGroupAddon, FormGroup} from 'reactstrap';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+
+
 import { includes, some, values } from 'lodash';
 
 export function Search ({ entities, searchable, children }) {
@@ -29,17 +33,17 @@ export function Search ({ entities, searchable, children }) {
     return (
         <>
             <Form className="w-50">
-                <FormGroup>
-                    <Label for="search" className="sr-only">Search</Label>
+                <Form.Group>
+                    <Form.Label for="search" className="sr-only">Search</Form.Label>
                     <InputGroup>
-                        <Input type="email" name="email" id="search"
+                        <Form.Control type="email" name="email" id="search"
                             placeholder="Search Files" onChange={ (event) => search(event.target.value) }
                             value={query} />
-                        <InputGroupAddon addonType="append">
+                        <InputGroup.Append>
                             <Button color="text" className="px-3" onClick={ () => search('') }>Clear</Button>
-                        </InputGroupAddon>
+                        </InputGroup.Append>
                     </InputGroup>
-                </FormGroup>
+                </Form.Group>
             </Form>
             { children(searched) }
         </>

diff --git a/ui/src/app/dashboard/view/Dashboard.js b/ui/src/app/dashboard/view/Dashboard.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Nav, NavItem } from 'reactstrap';
+import Nav from 'react-bootstrap/Nav';
 import { Switch, Route, Redirect, useRouteMatch } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
 
@@ -59,29 +59,29 @@ export function Dashboard () {
         <div className="container-fluid p-3" role="navigation">
 
             <Nav tabs>
-                <NavItem>
+                <Nav.Item>
                     <NavLink className="nav-link" to={`${path}/metadata/manager/resolvers`}>
                         <Translate value="label.metadata-sources">Metadata Sources</Translate>
                     </NavLink>
-                </NavItem>
+                </Nav.Item>
                 {isAdmin &&
                 <>
-                    <NavItem>
+                    <Nav.Item>
                         <NavLink className="nav-link" to={`${path}/metadata/manager/providers`}>
                             <Translate value="label.metadata-providers">Metadata Providers</Translate>
                         </NavLink>
-                    </NavItem>
-                    <NavItem>
+                    </Nav.Item>
+                    <Nav.Item>
                         <NavLink className="nav-link" to={`${path}/admin/management`}>
                             <Translate value="label.admin">Admin</Translate>
                         </NavLink>
-                    </NavItem>
-                    <NavItem>
+                    </Nav.Item>
+                    <Nav.Item>
                         <NavLink className="nav-link d-flex align-items-center" to={`${path}/admin/actions`}>
                             <Translate value="label.action-required">Action Required</Translate>
                             <span className="badge badge-pill badge-danger ml-1">{actions}</span>
                         </NavLink>
-                    </NavItem>
+                    </Nav.Item>
                 </>
                 }
             </Nav>

diff --git a/ui/src/app/dashboard/view/ProvidersTab.js b/ui/src/app/dashboard/view/ProvidersTab.js
@@ -6,7 +6,7 @@ import ProviderList from '../../metadata/domain/provider/component/ProviderList'
 import {Search} from '../component/Search';
 import { Ordered } from '../component/Ordered';
 import { useIsAdmin } from '../../core/user/UserContext';
-import { Alert } from 'reactstrap';
+import Alert from 'react-bootstrap/Alert';
 
 const searchProps = ['name', '@type', 'createdBy'];
 
@@ -55,7 +55,7 @@ export function ProvidersTab () {
                     </div>
                 </>
                 :
-                <Alert color="danger">Access Denied</Alert>}
+                <Alert variant="danger">Access Denied</Alert>}
             </div>
         </section>
     );

diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
@@ -46,7 +46,7 @@ export function Metadata () {
                                 <MetadataVersion></MetadataVersion>
                             </MetadataDetail>
                         } />
-                        <Route path={`${path}/edit`} component={ MetadataEditor } />
+                        <Route path={`${path}/edit/:section`} component={ MetadataEditor } />
                     </Switch>
                 </MetadataSchema>
             </MetadataXmlLoader>

diff --git a/ui/src/app/metadata/component/MetadataConfiguration.js b/ui/src/app/metadata/component/MetadataConfiguration.js
@@ -6,21 +6,17 @@ import { usePropertyWidth } from './properties/hooks';
 
 import { ObjectProperty } from './properties/ObjectProperty';
 
-export function MetadataConfiguration ({ configuration }) {
-
-    const onEdit = (value) => console.log(value);
+export function MetadataConfiguration ({ configuration, onEdit }) {
 
     const columns = configuration.dates?.length || 1;
     const width = usePropertyWidth(columns);
 
-    const editable = configuration.sections?.length <= 1;
-
     return (
         <>
             { configuration && configuration.sections.map((section, sidx) =>
                 <React.Fragment key={sidx}>
                     {section?.properties?.length > 0 && 
-                    <MetadataSection section={section} key={sidx} index={ sidx } onEdit={editable ? onEdit : null}>
+                    <MetadataSection section={section} key={sidx} index={ sidx } onEdit={onEdit}>
                         <div className="d-flex border-bottom border-light border-2 py-2">
                             <strong style={ {width} }><Translate value="label.option">Option</Translate></strong>
                             {configuration.dates.map((d, didx) => 

diff --git a/ui/src/app/metadata/component/MetadataSection.js b/ui/src/app/metadata/component/MetadataSection.js
@@ -1,9 +1,13 @@
+import React from 'react';
 import { faEdit } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+
 import Translate from '../../i18n/components/translate';
 
 export function MetadataSection ({ section, index = -1, onEdit, children }) {
+
+
+
     return (
         <>
             <section className="mb-4 config-section-list-item">

diff --git a/ui/src/app/metadata/component/properties/PropertyValue.js b/ui/src/app/metadata/component/properties/PropertyValue.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { UncontrolledPopover, PopoverBody } from 'reactstrap';
+import Popover from 'react-bootstrap/Popover';
 
 import { usePropertyWidth } from './hooks';
 import { useGuid } from '../../../core/hooks/utils';
@@ -21,9 +21,9 @@ export function PropertyValue ({ name, value, columns }) {
                     style={columns ? { width } : {}}>
                     {value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'}
                 </span>
-                <UncontrolledPopover color="info" trigger="hover" placement="left" target={`Popover-${id}`} delay={500}>
-                    <PopoverBody>{value.toString()}</PopoverBody>
-                </UncontrolledPopover>
+                <Popover variant="info" trigger="hover" placement="left" target={`Popover-${id}`}>
+                    <Popover.Content>{value.toString()}</Popover.Content>
+                </Popover>
             </>
         : <span className="d-block text-truncate" style={columns ? { width } : {}}>-</span>}
         </>

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js
@@ -53,7 +53,7 @@ export function MetadataFilterVersionList ({ configuration, limited, columns })
                                 :
                                 <div className="d-flex justify-content-end my-2">
                                     {comparing ? 
-                                        <button class="btn btn-success" onClick={resetFilterComparison}>
+                                        <button className="btn btn-success" onClick={resetFilterComparison}>
                                             <FontAwesomeIcon icon={faArrowLeft} />&nbsp;
                                             <Translate value="label.filter-versions">Filter Versions</Translate>
                                         </button>

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js
@@ -11,8 +11,6 @@ export function MetadataFilterVersionListItem ({ filters, width, selected, index
     const filter = filters.find(f => f.hasOwnProperty('@type'));
     const type = filter['@type'];
 
-    React.useEffect(() => console.log(filters), [filters]);
-
     const definition = React.useMemo(() => getDefinition(type), [type]);
 
     const { get, response } = useMetadataSchema();

diff --git a/ui/src/app/metadata/domain/provider/component/ProviderList.js b/ui/src/app/metadata/domain/provider/component/ProviderList.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Badge, } from 'reactstrap';
+import Badge from 'react-bootstrap/Badge';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronCircleDown, faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
 
@@ -59,7 +59,7 @@ export default function ProviderList({ entities, reorder = true, first, last, on
                             <td className="align-middle">{ provider.createdBy }</td>
                             <td className="align-middle"><FormattedDate date={provider.createdDate} /></td>
                             <td className="text-right align-middle">
-                                <Badge color={provider.serviceEnabled ? 'success' : 'danger'}>
+                                <Badge variant={provider.serviceEnabled ? 'success' : 'danger'}>
                                     <Translate value={provider.serviceEnabled ? 'value.enabled' : 'value.disabled'}></Translate>
                                 </Badge>
                             </td>