diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/Filter.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/Filter.js index e9739dce9b..3993b68f65 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/Filter.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/Filter.js @@ -13,24 +13,24 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, ReactElement, MouseEvent } from 'react' import PropTypes from 'prop-types' +import { MouseEvent, ReactElement, memo } from 'react' +import { Autocomplete, Box, Tooltip, Typography } from '@mui/material' import CheckIcon from 'iconoir-react/dist/Check' import LockIcon from 'iconoir-react/dist/Lock' -import { Box, Typography, Autocomplete } from '@mui/material' import { useAddLabelMutation } from 'client/features/OneApi/auth' +import { SubmitButton } from 'client/components/FormControl' +import { Tr, Translate } from 'client/components/HOC' +import { StatusCircle } from 'client/components/Status' import { PopperComponent, StyledInput, } from 'client/components/Tables/Enhanced/Utils/GlobalLabel/styles' -import { SubmitButton } from 'client/components/FormControl' -import { StatusCircle } from 'client/components/Status' -import { getColorFromString } from 'client/models/Helper' -import { Translate, Tr } from 'client/components/HOC' import { T } from 'client/constants' +import { getColorFromString } from 'client/models/Helper' const Label = memo(({ label, selected, unknown, ...props }) => { const [addLabel, { isLoading }] = useAddLabelMutation() @@ -46,24 +46,32 @@ const Label = memo(({ label, selected, unknown, ...props }) => { } return ( - - - - - {label} - - } - sx={{ p: 0, visibility: unknown ? 'visible' : 'hidden' }} - /> + + {label}} + > + + + + + {label} + + } + sx={{ p: 0, visibility: unknown ? 'visible' : 'hidden' }} + /> + + ) }) diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/index.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/index.js index 8c21125eff..b53fed5ef8 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/index.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalLabel/index.js @@ -13,21 +13,21 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement, useState, useMemo, useCallback } from 'react' import PropTypes from 'prop-types' +import { ReactElement, useCallback, useMemo, useState } from 'react' -import SettingsIcon from 'iconoir-react/dist/LabelOutline' import { Stack } from '@mui/material' +import SettingsIcon from 'iconoir-react/dist/LabelOutline' import { UseFiltersInstanceProps } from 'react-table' import { useAuth } from 'client/features/Auth' +import { Translate } from 'client/components/HOC' +import HeaderPopover from 'client/components/Header/Popover' import Allocator from 'client/components/Tables/Enhanced/Utils/GlobalLabel/Allocator' import FilterByLabel from 'client/components/Tables/Enhanced/Utils/GlobalLabel/Filter' -import HeaderPopover from 'client/components/Header/Popover' -import { areStringEqual, jsonToXml } from 'client/models/Helper' -import { Translate } from 'client/components/HOC' import { T } from 'client/constants' +import { areStringEqual, jsonToXml } from 'client/models/Helper' export const LABEL_COLUMN_ID = 'label' @@ -169,7 +169,10 @@ const GlobalLabel = ({ disabled: isLoading, onClick: handleOpenPopover, }} - popperProps={{ placement: 'bottom-end' }} + popperProps={{ + placement: 'bottom-end', + sx: { width: { xs: '100%', md: 500 } }, + }} onClickAway={handleClickAwayPopover} > {({ handleClose }) =>