Fixed bugs from react-bootstrap

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

Hide file tree

Showing 9 changed files with 43 additions and 101 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -33,7 +33,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=true react-scripts build",
     "buildProd": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
@@ -17,7 +17,7 @@ export function Header () {
     const logoutLabel = useTranslation('action.logout');
 
     return (
-        <Navbar expand="md" fixed="top">
+        <Navbar expand="md" fixed="top" bg="">
             <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>
@@ -33,13 +33,11 @@ export function Header () {
                         <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>
-                    </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>
                     <Nav.Link href="/logout" target="_self" aria-label={logoutLabel}>
                         <FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
                         <Translate value="action.logout">Logout</Translate>

diff --git a/ui/src/app/dashboard/component/Search.js b/ui/src/app/dashboard/component/Search.js
@@ -34,13 +34,13 @@ export function Search ({ entities, searchable, children }) {
         <>
             <Form className="w-50">
                 <Form.Group>
-                    <Form.Label for="search" className="sr-only">Search</Form.Label>
+                    <Form.Label htmlFor="search" className="sr-only">Search</Form.Label>
                     <InputGroup>
                         <Form.Control type="email" name="email" id="search"
                             placeholder="Search Files" onChange={ (event) => search(event.target.value) }
                             value={query} />
                         <InputGroup.Append>
-                            <Button color="text" className="px-3" onClick={ () => search('') }>Clear</Button>
+                            <Button variant="text" className="px-3" onClick={ () => search('') }>Clear</Button>
                         </InputGroup.Append>
                     </InputGroup>
                 </Form.Group>

diff --git a/ui/src/app/dashboard/view/Dashboard.js b/ui/src/app/dashboard/view/Dashboard.js
@@ -58,7 +58,7 @@ export function Dashboard () {
     return (
         <div className="container-fluid p-3" role="navigation">
 
-            <Nav tabs>
+            <Nav variant="tabs">
                 <Nav.Item>
                     <NavLink className="nav-link" to={`${path}/metadata/manager/resolvers`}>
                         <Translate value="label.metadata-sources">Metadata Sources</Translate>

diff --git a/ui/src/app/metadata/component/properties/ArrayProperty.js b/ui/src/app/metadata/component/properties/ArrayProperty.js
@@ -120,37 +120,3 @@ export function ArrayProperty ({ property, columns, index, onPreview }) {
         </>
     );
 }
-
-/*
-<ng-container *ngIf="" [ngSwitch]="getItemType(property)">
-    <ng-container *ngSwitchCase="'datalist'">
-        <ng-template [ngTemplateOutlet]="listref"></ng-template>
-    </ng-container>
-    <ng-container *ngSwitchCase="'select'">
-        <ng-template [ngTemplateOutlet]="listref"></ng-template>
-    </ng-container>
-    <ng-container *ngSwitchDefault>
-        <div *ngIf="!property.widget || !property.widget.id">
-            <ng-template [ngTemplateOutlet]="listref"></ng-template>
-        </div>
-        <div *ngIf="property.widget && property.widget.data">
-            
-        </div>
-    </ng-container>
-</ng-container>
-<ng-template #listref>
-    [ngbPopover]="popContent"
-                                        triggers="mouseenter:mouseleave"
-                                        popoverClass="popover-lg popover-info"
-
-
-                                        <ng-template #popContent>
-                                        <ul className="list-unstyled">
-                                            <li *ngFor="let item of v;" className="p-2 border-bottom border-light">
-                                                {{ item }}
-                                            </li>
-                                        </ul>
-                                    </ng-template>
-</ng-template>
-
-*/
diff --git a/ui/src/app/metadata/component/properties/ArrayValue.js b/ui/src/app/metadata/component/properties/ArrayValue.js
@@ -3,36 +3,3 @@ import React from 'react';
 export function ArrayValue () {
     return (<></>);
 }
-
-/*
-<div className="d-flex align-items-start border-bottom border-light" [ngClass]="{'bg-diff': property.differences}" tabindex="0">
-        <span className="sr-only" *ngIf="property.differences">Changed:</span>
-        <span className="p-2" role="term" [ngStyle]="{'width': width}"><Translate [key]="property.name">{{ property.name }}</Translate></span>
-        <ng-container *ngFor="let v of property.value">
-            <p [ngStyle]="{'width': width}" className="text-secondary m-0" *ngIf="!v || !v.length">-</p>
-            <ul [ngStyle]="{'width': width}"
-                className="list-unstyled py-2 m-0"
-                [ngbPopover]="popContent"
-                triggers="mouseenter:mouseleave"
-                popoverClass="popover-lg popover-info"
-                *ngIf="v && v.length > 0">
-                <li *ngFor="let item of v; odd as isOdd; last as isLast"
-                    className="text-truncate border-bottom border-light"
-                    [ngClass]="{'py-2': v.length > 1, 'border-0': isLast}">
-                    <ng-container *ngIf="preview.observers.length > 0 && isUrl(item)">
-                        <button className="btn btn-link" (click)="preview.emit(item)">
-                            <i className="fa fa-eye fa-lg text-success"></i>
-                        </button>&nbsp;
-                    </ng-container>
-                    {{ item }}
-                </li>
-            </ul>
-            <ng-template #popContent>
-                <ul className="list-unstyled">
-                    <li *ngFor="let item of v;" className="p-2 border-bottom border-light">
-                        {{ item }}
-                    </li>
-                </ul>
-            </ng-template>
-        </ng-container>
-    </div>*/
diff --git a/ui/src/app/metadata/component/properties/PropertyValue.js b/ui/src/app/metadata/component/properties/PropertyValue.js
@@ -1,30 +1,28 @@
 import React from 'react';
 import Popover from 'react-bootstrap/Popover';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 import { usePropertyWidth } from './hooks';
-import { useGuid } from '../../../core/hooks/utils';
 
 export function PropertyValue ({ name, value, columns }) {
 
     const width = usePropertyWidth(columns);
 
-    const id = useGuid();
-
     return (
         <>
         { name && value !== null && value !== undefined  ? 
-            <>
+                <OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={(
+                    <Popover variant="info">
+                        <Popover.Content>{value.toString()}</Popover.Content>
+                    </Popover>
+                )}>
                 <span
-                    id={`Popover-${id}`}
                     className="d-block text-truncate"
                     role="definition"
                     style={columns ? { width } : {}}>
                     {value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'}
                 </span>
-                <Popover variant="info" trigger="hover" placement="left" target={`Popover-${id}`}>
-                    <Popover.Content>{value.toString()}</Popover.Content>
-                </Popover>
-            </>
+            </OverlayTrigger>
         : <span className="d-block text-truncate" style={columns ? { width } : {}}>-</span>}
         </>
     );

diff --git a/ui/src/app/metadata/domain/source/component/SourceList.js b/ui/src/app/metadata/domain/source/component/SourceList.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import Badge from 'react-bootstrap/Badge';
 import Popover from 'react-bootstrap/Popover';
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash, faCheck } from '@fortawesome/free-solid-svg-icons';
@@ -62,20 +64,27 @@ export default function SourceList({ entities, onDelete, onEnable }) {
                                             </Badge>
                                         }
                                     </td>
-                                    <td className="text-right" id={`delete-source-btn-${idx}`}>
-                                        <button className="btn btn-outline btn-sm btn-danger"
-                                            type="button"
-                                            disabled={source.serviceEnabled}
-                                            onClick={() => onDeleteSource(source.id, onDelete)}>
-                                            <span className="sr-only">Delete</span>
-                                            <FontAwesomeIcon icon={faTrash} />
-                                        </button>
-                                        {source.serviceEnabled &&
-                                            <Popover trigger="hover" placement="left" target={`delete-source-btn-${idx}`}>
-                                                <Popover.Content>A metadata source must be disabled before it can be deleted.</Popover.Content>
-                                            </Popover>
-                                        }
+
+
+                                    <td className="text-right">
+                                        <OverlayTrigger trigger={source.serviceEnabled ? ['hover', 'focus'] : []} placement="left"
+                                            overlay={
+                                                <Popover id={`delete-source-btn-${idx}`}>
+                                                    <Popover.Content>A metadata source must be disabled before it can be deleted.</Popover.Content>
+                                                </Popover>
+                                            }>
+                                                <span className="d-inline-block">
+                                                    <Button variant="danger" size="sm"
+                                                        type="button"
+                                                        disabled={source.serviceEnabled}
+                                                        onClick={() => onDeleteSource(source.id, onDelete)}>
+                                                        <span className="sr-only">Delete</span>
+                                                        <FontAwesomeIcon icon={faTrash} />
+                                                    </Button>
+                                                </span>
+                                        </OverlayTrigger>
                                     </td>
+
                                 </tr>
                             )}
                         </tbody>

diff --git a/ui/src/theme/project/index.scss b/ui/src/theme/project/index.scss
@@ -39,6 +39,10 @@ nav.fixed-top {
     border-bottom: 3px solid map-get($theme-colors, primary);
 }
 
+.navbar-light .navbar-nav .nav-link {
+    color: #00355f;
+}
+
 footer {
     background-color: $white;
     padding: 0 20px;