Update field selection table row actions

src/components/editor/Bindings/Backfill/BackfillButton.tsx

@@ -225,7 +225,7 @@ function BackfillButton({
 
             <Stack direction="row" spacing={2}>
                 <BooleanToggleButton
-                    size={bindingIndex === -1 ? 'large' : undefined}
+                    size="small"
                     selected={Boolean(selected || reversioned)}
                     disabled={disabled || reversioned}
                     onClick={(event, checked: string) => {

src/components/editor/Bindings/FieldSelection/TableColumnSelector.tsx

@@ -1,18 +1,17 @@
-import { optionalColumnIntlKeys } from 'components/tables/FieldSelection';
+import { optionalColumnIntlKeys } from 'components/tables/FieldSelection/shared';
 import SelectColumnMenu from 'components/tables/SelectColumnMenu';
 import { useDisplayTableColumns } from 'context/TableSettings';
 import { SyntheticEvent } from 'react';
 import { TablePrefixes } from 'stores/Tables/hooks';
 import { TableColumns } from 'types';
 import { WithRequiredNonNullProperty } from 'types/utils';
 import { hasLength } from 'utils/misc-utils';
+import { TableColumnSelectorProps } from './types';
 
-interface Props {
-    columns: TableColumns[];
-    loading: boolean;
-}
-
-export default function TableColumnSelector({ columns, loading }: Props) {
+export default function TableColumnSelector({
+    columns,
+    loading,
+}: TableColumnSelectorProps) {
     const { tableSettings, setTableSettings } = useDisplayTableColumns();
 
     const optionalColumns = columns.filter(

src/components/editor/Bindings/FieldSelection/index.tsx

@@ -32,11 +32,7 @@ import {
 } from 'stores/FormState/hooks';
 import { FormStatus } from 'stores/FormState/types';
 import { Schema } from 'types';
-import {
-    getBindingIndex,
-    isExcludeOnlyField,
-    isRequireOnlyField,
-} from 'utils/workflow-utils';
+import { getBindingIndex } from 'utils/workflow-utils';
 import RefreshStatus from './RefreshStatus';
 
 interface Props {
@@ -82,12 +78,8 @@ const mapConstraintsToProjections = (
                 selectionMetadata = require[field];
             } else if (exclude?.includes(field)) {
                 selectionType = 'exclude';
-            } else if (!recommended && constraint) {
-                selectionType = isRequireOnlyField(constraint.type)
-                    ? 'require'
-                    : isExcludeOnlyField(constraint.type)
-                    ? 'exclude'
-                    : null;
+            } else if (typeof recommended === 'boolean' && !recommended) {
+                selectionType = null;
             }
         }
 

src/components/editor/Bindings/FieldSelection/types.ts

@@ -1,4 +1,4 @@
-import { Schema } from 'types';
+import { Schema, TableColumns } from 'types';
 
 export interface Projection {
     field: string;
@@ -71,3 +71,8 @@ export interface CompositeProjection extends Projection {
     selectionType: FieldSelectionType | null;
     selectionMetadata?: Schema;
 }
+
+export interface TableColumnSelectorProps {
+    columns: TableColumns[];
+    loading: boolean;
+}

src/components/graphs/DataByHourGraph/StatTypeSelector.tsx

@@ -1,28 +1,25 @@
-import { ToggleButtonGroup } from '@mui/material';
 import OutlinedToggleButton from 'components/shared/buttons/OutlinedToggleButton';
-import { outlinedToggleButtonGroupStyling } from 'context/Theme';
-import { FormattedMessage } from 'react-intl';
+import OutlinedToggleButtonGroup from 'components/shared/OutlinedToggleButtonGroup';
+import { useIntl } from 'react-intl';
 import { useDetailsUsageStore } from 'stores/DetailsUsage/useDetailsUsageStore';
 
 function StatTypeSelector() {
+    const intl = useIntl();
+
     const [statType, setStatType] = useDetailsUsageStore((store) => [
         store.statType,
         store.setStatType,
     ]);
 
     return (
-        <ToggleButtonGroup
-            size="small"
-            exclusive
-            sx={outlinedToggleButtonGroupStyling}
-        >
+        <OutlinedToggleButtonGroup size="small" exclusive>
             <OutlinedToggleButton
                 size="small"
                 value="bytes"
                 selected={statType === 'bytes'}
                 onClick={() => setStatType('bytes')}
             >
-                <FormattedMessage id="data.data" />
+                {intl.formatMessage({ id: 'data.data' })}
             </OutlinedToggleButton>
 
             <OutlinedToggleButton
@@ -31,9 +28,9 @@ function StatTypeSelector() {
                 selected={statType === 'docs'}
                 onClick={() => setStatType('docs')}
             >
-                <FormattedMessage id="data.docs" />
+                {intl.formatMessage({ id: 'data.docs' })}
             </OutlinedToggleButton>
-        </ToggleButtonGroup>
+        </OutlinedToggleButtonGroup>
     );
 }
 

src/components/shared/Entity/Details/Logs/Status/SectionFormatter.tsx

@@ -1,6 +1,6 @@
-import { Box, ToggleButtonGroup } from '@mui/material';
+import { Box } from '@mui/material';
 import OutlinedToggleButton from 'components/shared/buttons/OutlinedToggleButton';
-import { outlinedToggleButtonGroupStyling } from 'context/Theme';
+import OutlinedToggleButtonGroup from 'components/shared/OutlinedToggleButtonGroup';
 import { useIntl } from 'react-intl';
 import { useEntityStatusStore } from 'stores/EntityStatus/Store';
 
@@ -12,11 +12,7 @@ export default function SectionFormatter() {
 
     return (
         <Box style={{ paddingTop: 4 }}>
-            <ToggleButtonGroup
-                size="small"
-                exclusive
-                sx={outlinedToggleButtonGroupStyling}
-            >
+            <OutlinedToggleButtonGroup size="small" exclusive>
                 <OutlinedToggleButton
                     size="small"
                     value="dashboard"
@@ -36,7 +32,7 @@ export default function SectionFormatter() {
                 >
                     {intl.formatMessage({ id: 'details.ops.status.cta.raw' })}
                 </OutlinedToggleButton>
-            </ToggleButtonGroup>
+            </OutlinedToggleButtonGroup>
         </Box>
     );
 }

src/components/shared/Entity/Details/Spec/index.tsx

@@ -1,9 +1,9 @@
-import { Grid, Stack, ToggleButtonGroup, Typography } from '@mui/material';
+import { Grid, Stack, Typography } from '@mui/material';
 import LiveSpecEditor from 'components/editor/LiveSpec';
-import ExternalLink from 'components/shared/ExternalLink';
 import OutlinedToggleButton from 'components/shared/buttons/OutlinedToggleButton';
+import ExternalLink from 'components/shared/ExternalLink';
+import OutlinedToggleButtonGroup from 'components/shared/OutlinedToggleButtonGroup';
 import { useEntityType } from 'context/EntityContext';
-import { outlinedToggleButtonGroupStyling } from 'context/Theme';
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import CollectionSpecViews from './CollectionViews';
@@ -61,11 +61,7 @@ function Spec() {
                         </Stack>
 
                         {entityType === 'collection' ? (
-                            <ToggleButtonGroup
-                                size="small"
-                                exclusive
-                                sx={outlinedToggleButtonGroupStyling}
-                            >
+                            <OutlinedToggleButtonGroup size="small" exclusive>
                                 <OutlinedToggleButton
                                     size="small"
                                     value="table"
@@ -87,7 +83,7 @@ function Spec() {
                                 >
                                     <FormattedMessage id="details.spec.cta.raw" />
                                 </OutlinedToggleButton>
-                            </ToggleButtonGroup>
+                            </OutlinedToggleButtonGroup>
                         ) : null}
                     </Stack>
 

src/components/shared/OutlinedToggleButtonGroup.tsx

@@ -0,0 +1,31 @@
+import {
+    styled,
+    ToggleButtonGroup,
+    ToggleButtonGroupProps,
+} from '@mui/material';
+
+const OutlinedToggleButtonGroup = styled(ToggleButtonGroup, {
+    shouldForwardProp: (props) => props !== 'buttonSelector',
+})<ToggleButtonGroupProps & { buttonSelector?: string }>(
+    ({ buttonSelector }) => ({
+        [`${buttonSelector ?? '& .MuiToggleButton-root'}`]: {
+            '&:not(:first-of-type), &:not(:last-of-type)': {
+                borderRadius: 0,
+            },
+            '&:first-of-type': {
+                borderTopLeftRadius: 4,
+                borderBottomLeftRadius: 4,
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+            },
+            '&:last-of-type': {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 4,
+                borderBottomRightRadius: 4,
+            },
+        },
+    })
+);
+
+export default OutlinedToggleButtonGroup;

src/components/shared/buttons/OutlinedToggleButton.tsx

@@ -1,85 +1,53 @@
-import {
-    SxProps,
-    Theme,
-    ToggleButton,
-    toggleButtonClasses,
-    useTheme,
-} from '@mui/material';
+import { styled, ToggleButton, toggleButtonClasses } from '@mui/material';
 import {
     defaultOutline,
+    defaultOutline_hovered,
     disabledButtonText,
-    disabledButtonText_primary,
     intensifiedOutline,
-    outlinedButtonBackground,
-    outlinedButtonBackground_disabled,
-    primaryColoredOutline,
-    primaryColoredOutline_disabled,
-    primaryColoredOutline_hovered,
 } from 'context/Theme';
-import { OutlinedToggleButtonProps } from './types';
 
-function OutlinedToggleButton({
-    children,
-    defaultStateSx,
-    disabled,
-    disabledStateSx,
-    selectedStateSx,
+const OutlinedToggleButton = styled(ToggleButton)(({
+    color,
     selected,
-    value,
-    onChange,
-    onClick,
-    ...props
-}: OutlinedToggleButtonProps) {
-    const theme = useTheme();
-
-    const defaultDisabledStateSx: SxProps<Theme> = selected
-        ? {
-              backgroundColor:
-                  outlinedButtonBackground_disabled[theme.palette.mode],
-              border: primaryColoredOutline_disabled[theme.palette.mode],
-              color: disabledButtonText_primary[theme.palette.mode],
-          }
-        : {
-              backgroundColor: 'none',
-              border: defaultOutline[theme.palette.mode],
-              color: disabledButtonText[theme.palette.mode],
-          };
+    theme,
+}) => {
+    const colorKey = color ?? 'primary';
 
-    let sx: SxProps<Theme> = {
-        px: '9px',
-        py: '3px',
-        border: intensifiedOutline[theme.palette.mode],
-        borderRadius: 2,
-        [`&.${toggleButtonClasses.selected}`]: selectedStateSx ?? {
-            'backgroundColor': outlinedButtonBackground[theme.palette.mode],
-            'border': primaryColoredOutline[theme.palette.mode],
-            'color': theme.palette.primary.main,
+    return {
+        'padding': '3px 9px',
+        'border': intensifiedOutline[theme.palette.mode],
+        'borderRadius': 4,
+        '&:hover': {
+            border: defaultOutline_hovered[theme.palette.mode],
+        },
+        [`&.${toggleButtonClasses.selected}`]: {
+            'backgroundColor': theme.palette[colorKey].alpha_12,
+            'border': `1px solid ${theme.palette[colorKey].alpha_50}`,
+            'color':
+                theme.palette.mode === 'light'
+                    ? theme.palette[colorKey].dark
+                    : theme.palette[colorKey].main,
             '&:hover': {
-                border: primaryColoredOutline_hovered[theme.palette.mode],
+                border: `1px solid ${
+                    theme.palette.mode === 'light' &&
+                    ['success', 'info'].includes(colorKey)
+                        ? theme.palette[colorKey].dark
+                        : theme.palette[colorKey].main
+                }`,
             },
         },
-        [`&.${toggleButtonClasses.disabled}`]:
-            disabledStateSx ?? defaultDisabledStateSx,
+        [`&.${toggleButtonClasses.disabled}`]: selected
+            ? {
+                  backgroundColor: theme.palette[colorKey].alpha_05,
+                  border: `1px solid ${theme.palette[colorKey].alpha_12}`,
+                  color: theme.palette[colorKey].alpha_26,
+              }
+            : {
+                  backgroundColor: 'none',
+                  border: defaultOutline[theme.palette.mode],
+                  color: disabledButtonText[theme.palette.mode],
+              },
     };
-
-    if (defaultStateSx) {
-        sx = { ...sx, ...defaultStateSx };
-    }
-
-    return (
-        <ToggleButton
-            size="small"
-            {...props}
-            value={value}
-            selected={selected}
-            disabled={disabled}
-            onChange={onChange}
-            onClick={onClick}
-            sx={sx}
-        >
-            {children}
-        </ToggleButton>
-    );
-}
+});
 
 export default OutlinedToggleButton;