refactor(nms): Consolide Select component

Signed-off-by: Thomas Schmitt <thomas.schmitt@tngtech.com>

nms/fbc_js_core/ui/components/auth/EditUserDialog.js

@@ -29,7 +29,6 @@ import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import Select from '@material-ui/core/Select';
-import SymphonySelect from '../../../../fbc_js_core/ui/components/design-system/Select/Select';
 import TextField from '@material-ui/core/TextField';
 import renderList from '../../../../fbc_js_core/util/renderList';
 import {UserRoles} from '../../../../fbc_js_core/auth/types';
@@ -164,30 +163,18 @@ export default function EditUserDialog(props: Props) {
             />
           </>
         )}
-        <SymphonySelect
-          className={classes.select}
-          skin="gray"
-          label="Role"
-          options={[
-            {
-              key: 'user',
-              label: 'User',
-              value: UserRoles.USER,
-            },
-            {
-              key: 'read_only_user',
-              label: 'Read Only User',
-              value: UserRoles.READ_ONLY_USER,
-            },
-            {
-              key: 'super_user',
-              label: 'Super User',
-              value: UserRoles.SUPERUSER,
-            },
-          ]}
-          selectedValue={role}
-          onChange={value => setRole(value)}
-        />
+        <FormControl className={classes.input}>
+          <InputLabel id="role-select-label">Role</InputLabel>
+          <Select
+            labelId="role-select-label"
+            id="role-select"
+            value={role}
+            onChange={({target}) => setRole(target.value)}>
+            <MenuItem value={UserRoles.USER}>User</MenuItem>
+            <MenuItem value={UserRoles.READ_ONLY_USER}>Read Only User</MenuItem>
+            <MenuItem value={UserRoles.SUPERUSER}>Super User</MenuItem>
+          </Select>
+        </FormControl>
         {isTabEnabled('nms') && allNetworkIDs && (
           <FormControl className={classes.input}>
             <InputLabel htmlFor="network_ids">Accessible Networks</InputLabel>

nms/fbc_js_core/ui/components/design-system/Button.js

@@ -21,10 +21,7 @@ import * as React from 'react';
 import Text from '../../../../app/theme/design-system/Text';
 import classNames from 'classnames';
 import {colors} from '../../../../app/theme/default';
-import {joinNullableStrings} from '../../../../fbc_js_core/util/strings';
 import {makeStyles} from '@material-ui/styles';
-import {useFormElementContext} from './Form/FormElementContext';
-import {useMemo} from 'react';
 
 const useStyles = makeStyles(_theme => ({
   root: {
@@ -314,33 +311,18 @@ const Button = (props: Props, forwardedRef: TRefFor<HTMLButtonElement>) => {
     className,
     children,
     skin = 'primary',
-    disabled: disabledProp = false,
+    disabled = false,
     variant = 'contained',
     useEllipsis = true,
     onClick,
     leftIcon: LeftIcon = null,
     leftIconClass = null,
     rightIcon: RightIcon = null,
     rightIconClass = null,
-    tooltip: tooltipProp,
+    tooltip,
   } = props;
   const classes = useStyles();
 
-  const {
-    disabled: contextDisabled,
-    tooltip: contextTooltip,
-  } = useFormElementContext();
-
-  const disabled = useMemo(() => disabledProp || contextDisabled, [
-    disabledProp,
-    contextDisabled,
-  ]);
-
-  const tooltip = useMemo(
-    () => joinNullableStrings([tooltipProp, contextTooltip]),
-    [contextTooltip, tooltipProp],
-  );
-
   return (
     <button
       className={classNames(

nms/fbc_js_core/ui/components/design-system/Checkbox/Checkbox.js

@@ -24,8 +24,6 @@ import TextPairingContainer from '../helpers/TextPairingContainer';
 import classNames from 'classnames';
 import {colors} from '../../../../../app/theme/default';
 import {makeStyles} from '@material-ui/styles';
-import {useFormElementContext} from '../Form/FormElementContext';
-import {useMemo} from 'react';
 
 const useStyles = makeStyles(_theme => ({
   root: {
@@ -72,7 +70,7 @@ const Checkbox = (props: Props) => {
     indeterminate,
     onChange,
     onClick,
-    disabled: propDisabled = false,
+    disabled = false,
     ...TextPairingContainerProps
   } = props;
   const classes = useStyles();
@@ -82,12 +80,6 @@ const Checkbox = (props: Props) => {
     ? CheckBoxIcon
     : CheckBoxOutlineBlankIcon;
 
-  const {disabled: contextDisabled} = useFormElementContext();
-  const disabled = useMemo(
-    () => (propDisabled ? propDisabled : contextDisabled),
-    [contextDisabled, propDisabled],
-  );
-
   return (
     <TextPairingContainer {...TextPairingContainerProps} disabled={disabled}>
       <div