Tabs

core/package.json

@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@labkey/components": "3.25.1",
+    "@labkey/components": "3.26.0",
     "@labkey/themes": "1.3.3"
   },
   "devDependencies": {

core/src/client/QueryMetadataEditor/QueryMetadataEditor.tsx

@@ -392,7 +392,6 @@ export class App extends PureComponent<any, Partial<IAppState>> {
                 {showAlias && (
                     <AliasFieldModal
                         domainFields={domain.fields}
-                        showAlias={true}
                         onHide={this.onHideAliasField}
                         onAdd={this.onAddAliasField}
                     />

core/src/client/QueryMetadataEditor/components/AliaseFieldModal.tsx

@@ -1,124 +1,61 @@
-import React, {PureComponent} from "react";
-import {Button, Modal, Row, Col} from "react-bootstrap";
-import {List} from "immutable";
-import {DomainField, SelectInput} from "@labkey/components";
-
-interface AliasFieldModalProps
-{
-    domainFields: List<DomainField>
-    showAlias?: boolean
-    onHide: () => any
-    onAdd: (any) => any
-}
-
-interface AliasFieldModalState
-{
-    show?: boolean
-    selectedField?: DomainField
+import React, { FC, useCallback, useState } from 'react';
+import { List } from 'immutable';
+import { DomainField, Modal, SelectInput } from '@labkey/components';
+
+interface AliasFieldModalProps {
+    domainFields: List<DomainField>;
+    onHide: () => any;
+    onAdd: (any) => any;
 }
 
-export class AliasFieldModal extends PureComponent<AliasFieldModalProps, AliasFieldModalState> {
-
-    // pass fields as props
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            show: this.props.showAlias,
-            selectedField: this.props.domainFields.get(0)
-        }
-    }
-
-    handleOK = () => {
-        const { onAdd } = this.props;
-        const { selectedField } = this.state;
-
+export const AliasFieldModal: FC<AliasFieldModalProps> = ({ domainFields, onAdd, onHide }) => {
+    const [selectedField, setSelectedField] = useState<DomainField>(domainFields.get(0));
+    const onConfirm = useCallback(() => {
         const selectedFieldName = selectedField.name;
-
-        if (onAdd) {
-            const domainFieldChange = selectedField
-                .merge({
-                    name: 'Wrapped' + selectedFieldName,
-                    dataType: undefined,
-                    lockType: undefined,
-                    wrappedColumnName: selectedFieldName,
-                    propertyId: undefined,
-                    label: 'Wrapped' + selectedFieldName,
-                    lockExistingField: false,
-                    rangeURI: selectedField.rangeURI,
-                });
-            const newDomainField =  DomainField.create(domainFieldChange.toJS());
-            onAdd(newDomainField);
-        }
-
-    };
-
-    handleClose = () => {
-        const { onHide } = this.props;
-
-        onHide();
-    };
-
-    handleChange = (name, formValue, selected) => {
-        this.setState( () =>({
-            selectedField: selected
-        }));
-    };
-
-    renderDisplayFieldOptions = () => {
-        const { domainFields } = this.props;
-
-        return (
-            <>
-                <Row>
-                    <Col xs={3}>
+        const domainFieldChange = selectedField.merge({
+            name: 'Wrapped' + selectedFieldName,
+            dataType: undefined,
+            lockType: undefined,
+            wrappedColumnName: selectedFieldName,
+            propertyId: undefined,
+            label: 'Wrapped' + selectedFieldName,
+            lockExistingField: false,
+            rangeURI: selectedField.rangeURI,
+        });
+        const newDomainField = DomainField.create(domainFieldChange.toJS());
+        onAdd(newDomainField);
+    }, [onAdd, selectedField]);
+    const onChange = useCallback((_, __, domainField) => setSelectedField(domainField), []);
+    return (
+        <Modal
+            className="domain-modal"
+            confirmClass="btn-primary"
+            confirmText="OK"
+            onCancel={onHide}
+            onConfirm={onConfirm}
+            title="Choose a field to wrap"
+        >
+            <div className="row">
+                <div className="col-xs-3">
+                    <label>
                         Field Options
-                    </Col>
-                    <Col xs={9}>
-                        <SelectInput
-                            onChange={this.handleChange}
-                            value={domainFields.get(0)}
-                            options={domainFields.toArray()}
-                            inputClass={'col-xs-12'}
-                            valueKey="name"
-                            labelKey="label"
-                            clearable={false}
-                        />
-                    </Col>
-                </Row>
-            </>
-        )
-
-    };
-
-    render() {
-        const {show} = this.state;
-
-        return (
-            <Modal
-                show={show}
-                onHide={this.handleClose}>
-                <Modal.Header closeButton>
-                    <Modal.Title>{'Choose a field to wrap'}</Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <div className='domain-modal'>
-                        {this.renderDisplayFieldOptions()}
-                    </div>
-                </Modal.Body>
-                <Modal.Footer>
-                    <div className={'domain-designer-buttons'}>
-                        <Button onClick={this.handleClose} className='domain-adv-footer domain-adv-cancel-btn'>
-                            Cancel
-                        </Button>
-
-                        <Button onClick={this.handleOK} className='domain-adv-footer domain-adv-apply-btn' bsStyle={'primary'}>
-                            OK
-                        </Button>
-                    </div>
-                </Modal.Footer>
-            </Modal>
-        );
-    }
-
-}
+                    </label>
+                </div>
+
+                <div className="col-xs-9">
+                    <SelectInput
+                        id="domain-field-selector"
+                        onChange={onChange}
+                        value={domainFields.get(0)}
+                        options={domainFields.toArray()}
+                        inputClass="col-xs-12"
+                        valueKey="name"
+                        labelKey="label"
+                        clearable={false}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+}
+AliasFieldModal.displayName = 'AliasFieldModal';

core/src/client/components/AuthConfigMasterPanel.tsx

@@ -1,6 +1,5 @@
-import React, { PureComponent } from 'react';
-import { Panel, DropdownButton, MenuItem, Tab, Tabs } from 'react-bootstrap';
-import { LabelHelpTip } from '@labkey/components';
+import React, { PureComponent, ReactNode } from 'react';
+import { DropdownButton, MenuItem, LabelHelpTip, Tab, Tabs } from '@labkey/components';
 
 import { LOGIN_FORM_TIP_TEXT, SSO_TIP_TEXT } from '../AuthenticationConfiguration/constants';
 
@@ -35,24 +34,22 @@ class ViewOnlyAuthConfigRows extends PureComponent<ViewOnlyAuthConfigRowsProps>
 }
 
 interface PrimaryTabProps {
-    addNewPrimaryDropdown: JSX.Element[];
+    menuItems: ReactNode;
     canEdit: boolean;
-    primaryTabLoginForm: JSX.Element;
-    primaryTabSSO: JSX.Element;
+    primaryTabLoginForm: ReactNode;
+    body: ReactNode;
 }
 
 class PrimaryTab extends PureComponent<PrimaryTabProps> {
     render() {
-        const { addNewPrimaryDropdown, primaryTabLoginForm, primaryTabSSO, canEdit } = this.props;
+        const { menuItems, primaryTabLoginForm, body, canEdit } = this.props;
 
         return (
             <>
                 <div className="configurations__auth-tab">
                     {canEdit && (
                         <div className="configurations__dropdown">
-                            <DropdownButton id="primary-configurations-dropdown" title="Add New Primary Configuration">
-                                {addNewPrimaryDropdown}
-                            </DropdownButton>
+                            <DropdownButton title="Add New Primary Configuration">{menuItems}</DropdownButton>
                         </div>
                     )}
 
@@ -74,34 +71,34 @@ class PrimaryTab extends PureComponent<PrimaryTabProps> {
                         </LabelHelpTip>
                     </div>
 
-                    {primaryTabSSO}
+                    {body}
                 </div>
             </>
         );
     }
 }
 
 interface SecondaryTabProps {
-    addNewSecondaryDropdown: JSX.Element[];
+    menuItems: ReactNode;
     canEdit: boolean;
-    secondaryTabDuo: JSX.Element;
+    body: ReactNode;
 }
 
 class SecondaryTab extends PureComponent<SecondaryTabProps> {
     render() {
-        const { canEdit, addNewSecondaryDropdown, secondaryTabDuo } = this.props;
+        const { canEdit, menuItems, body } = this.props;
 
         return (
             <div className="configurations__auth-tab">
                 {canEdit && (
                     <div className="configurations__dropdown">
-                        <DropdownButton id="secondary-configurations-dropdown" title="Add New Secondary Configuration">
-                            {addNewSecondaryDropdown}
+                        <DropdownButton title="Add New Secondary Configuration">
+                            {menuItems}
                         </DropdownButton>
                     </div>
                 )}
 
-                {secondaryTabDuo}
+                {body}
             </div>
         );
     }
@@ -218,7 +215,7 @@ export default class AuthConfigMasterPanel extends PureComponent<Props, Partial<
             <ViewOnlyAuthConfigRows data={formConfigurations} providers={primaryProviders} />
         );
 
-        const primaryTabSSO = canEdit ? (
+        const primaryTabBody = canEdit ? (
             <DragAndDropPane
                 configType="ssoConfigurations"
                 authConfigs={ssoConfigurations}
@@ -231,7 +228,7 @@ export default class AuthConfigMasterPanel extends PureComponent<Props, Partial<
             <ViewOnlyAuthConfigRows data={ssoConfigurations} providers={primaryProviders} />
         );
 
-        const secondaryTabDuo = canEdit ? (
+        const secondaryTabBody = canEdit ? (
             <DragAndDropPane
                 configType="secondaryConfigurations"
                 authConfigs={secondaryConfigurations}
@@ -261,35 +258,35 @@ export default class AuthConfigMasterPanel extends PureComponent<Props, Partial<
         );
 
         return (
-            <Panel>
-                <Panel.Heading>Configurations</Panel.Heading>
-                <Panel.Body>
+            <div className="panel panel-default">
+                <div className="panel-heading">Configurations</div>
+                <div className="panel-body">
                     <a className="configurations__help-link" href={helpLink}>
                         Get help with authentication
                     </a>
 
                     {addNewModal}
 
-                    <Tabs defaultActiveKey={1} id="tab-panel">
-                        <Tab eventKey={1} title="Primary">
+                    <Tabs>
+                        <Tab eventKey="primary" title="Primary">
                             <PrimaryTab
                                 canEdit={canEdit}
-                                addNewPrimaryDropdown={addNewPrimaryDropdown}
+                                menuItems={addNewPrimaryDropdown}
                                 primaryTabLoginForm={primaryTabLoginForm}
-                                primaryTabSSO={primaryTabSSO}
+                                body={primaryTabBody}
                             />
                         </Tab>
 
-                        <Tab eventKey={2} title="Secondary">
+                        <Tab eventKey="secondary" title="Secondary">
                             <SecondaryTab
                                 canEdit={canEdit}
-                                addNewSecondaryDropdown={addNewSecondaryDropdown}
-                                secondaryTabDuo={secondaryTabDuo}
+                                menuItems={addNewSecondaryDropdown}
+                                body={secondaryTabBody}
                             />
                         </Tab>
                     </Tabs>
-                </Panel.Body>
-            </Panel>
+                </div>
+            </div>
         );
     }
 }