@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/elements/hit/actions/ButtonActions.tsx

@@ -1,269 +0,0 @@
-import type { StyledComponent } from '@emotion/styled';
-import {
-  Badge,
-  Button,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  Stack,
-  styled,
-  Tooltip,
-  type BadgeProps
-} from '@mui/material';
-import { blueGrey } from '@mui/material/colors';
-import type { FC } from 'react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { HitShortcuts } from '../HitShortcuts';
-import type { ActionButton } from './SharedComponents';
-import { TOP_ROW } from './SharedComponents';
-
-interface DesktopActionProps {
-  actions: ActionButton[];
-  loading: boolean;
-  shortcuts: HitShortcuts;
-  currentVote: string;
-  orientation: 'horizontal' | 'vertical';
-}
-
-const StyledBadge: StyledComponent<BadgeProps> = styled(Badge)({
-  '& .MuiBadge-badge': {
-    borderRadius: '4px',
-    background: blueGrey[400],
-    fontSize: 9,
-    height: '15px',
-    minWidth: '15px',
-    padding: '0',
-    right: '5px',
-    top: '2.5px'
-  }
-});
-
-const ButtonActions: FC<DesktopActionProps> = ({ actions, loading, orientation, shortcuts, currentVote }) => {
-  const { t } = useTranslation();
-
-  const isHorizontal = useMemo(() => orientation === 'horizontal', [orientation]);
-  const showShortcuts = useMemo(() => shortcuts === HitShortcuts.SHORTCUTS_HINT, [shortcuts]);
-
-  const actionRows = useMemo(
-    () =>
-      actions
-        .filter(action => action.type === 'action')
-        .reduce(
-          ([top, bottom], action) => {
-            if (top.length === bottom.length) {
-              top.push(action);
-            } else {
-              bottom.push(action);
-            }
-
-            return [top, bottom];
-          },
-          [[], []] as [ActionButton[], ActionButton[]]
-        ),
-    [actions]
-  );
-
-  const assessmentRows = useMemo(
-    () =>
-      actions
-        .filter(action => action.type === 'assessment')
-        .reduce(
-          ([top, bottom], action) => {
-            if (TOP_ROW.includes(action.name)) {
-              top.push(action);
-            } else {
-              bottom.push(action);
-            }
-
-            return [top, bottom];
-          },
-          [[], []] as [ActionButton[], ActionButton[]]
-        ) ?? [],
-    [actions]
-  );
-
-  return (
-    <Stack
-      direction={isHorizontal ? 'row' : 'column'}
-      spacing={0.75}
-      alignItems={!isHorizontal && 'start'}
-      py={1}
-      sx={{ position: 'relative', flex: 1 }}
-      justifyContent="space-between"
-    >
-      <FormControl
-        disabled={loading}
-        sx={[
-          {
-            display: 'grid',
-            justifyContent: 'stretch',
-            gap: 0.8
-          },
-          isHorizontal
-            ? {
-                // If you want to understand the disgusting, unholy grid shenanigans that's going on here, talk to Matt R
-                // If you want to complain about how bad this is, talk to Ben
-                gridTemplateRows: 'auto 1fr 1fr', // Make sure the buttons are the same height
-                gridAutoColumns: 'minmax(0, 125px)', // Make sure the buttons are the same width
-                // God help me
-                gridTemplateColumns: `repeat(auto, 125px)`
-                // Why do we need to use both gridTemplateColumns AND gridAutoColumns, you ask?
-                // I DON'T KNOW ASK WHOEVER WROTE THE CSS GRID SPEC
-              }
-            : {
-                gridTemplateColumns: '1fr 1fr'
-              }
-        ]}
-      >
-        <FormLabel>{t('hit.details.actions.action')}</FormLabel>
-        {actionRows.flatMap((row, rowIndex) =>
-          row.map((option, index) => {
-            const gridSx = isHorizontal
-              ? { gridColumn: index, gridRow: rowIndex + 2 }
-              : { gridColumn: rowIndex + 1, gridRow: index + 2 };
-
-            const button = (
-              <Button
-                size="small"
-                variant="outlined"
-                color="secondary"
-                disabled={loading}
-                key={option.name}
-                onClick={option.actionFunction}
-                sx={[
-                  {
-                    width: '100%',
-                    p: 0.6
-                  },
-                  gridSx,
-                  isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))
-                ]}
-              >
-                {option.i18nKey ? t(option.i18nKey) : option.name}
-              </Button>
-            );
-
-            if (showShortcuts) {
-              return (
-                <StyledBadge badgeContent={option.key} key={option.name} sx={gridSx}>
-                  {button}
-                </StyledBadge>
-              );
-            }
-
-            return button;
-          })
-        )}
-        {assessmentRows.flat().length > 0 && (
-          <FormLabel
-            sx={
-              isHorizontal
-                ? {
-                    gridRow: 1,
-                    gridColumn: actionRows[0].length + 1
-                  }
-                : { gridRow: actionRows[0].length + 2 }
-            }
-          >
-            {t('hit.details.actions.assessment')}
-          </FormLabel>
-        )}
-        {assessmentRows.flatMap((row, rowIndex) =>
-          row.map((action, index) => {
-            const gridSx = isHorizontal
-              ? {
-                  gridColumn: index + 1 + actionRows[0].length,
-                  gridRow: rowIndex + 2
-                }
-              : { gridColumn: rowIndex + 1, gridRow: index + 3 + actionRows[0].length };
-
-            const button = (
-              <Tooltip title={t(`hit.details.asessments.${action.name}.description`)}>
-                <Button
-                  key={action.name}
-                  variant="outlined"
-                  size="small"
-                  disabled={loading}
-                  onClick={action.actionFunction}
-                  sx={[
-                    {
-                      width: '100%',
-                      p: 0.6
-                    },
-                    gridSx,
-                    isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))
-                  ]}
-                >
-                  {action.name}
-                </Button>
-              </Tooltip>
-            );
-
-            if (showShortcuts) {
-              return (
-                <StyledBadge badgeContent={action.key} key={action.key} sx={gridSx}>
-                  {button}
-                </StyledBadge>
-              );
-            }
-
-            return button;
-          })
-        )}
-      </FormControl>
-      <FormControl
-        disabled={loading || !actions.some(action => action.type === 'vote')}
-        sx={{ opacity: +actions.some(action => action.type === 'vote') }}
-      >
-        <FormLabel sx={{ mb: 1 }}>{t('hit.details.actions.vote')}</FormLabel>
-        <RadioGroup value={currentVote}>
-          {actions
-            .filter(action => action.type === 'vote')
-            .map(action => {
-              const button = (
-                <FormControlLabel
-                  key={action.key}
-                  value={action.name.toLowerCase()}
-                  sx={{ display: 'flex', alignItems: 'center' }}
-                  componentsProps={{
-                    typography: {
-                      sx: [isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))]
-                    }
-                  }}
-                  control={<Radio size="small" sx={[{ mr: 1 }, isHorizontal && { p: 0.5 }]} />}
-                  label={action.name}
-                  onClick={action.actionFunction}
-                />
-              );
-
-              if (showShortcuts && action.key) {
-                return (
-                  <StyledBadge
-                    badgeContent={action.key}
-                    key={action.key}
-                    sx={[
-                      { '& .MuiBadge-badge': { left: '20px', top: '5px', right: 'unset' } },
-                      loading && { '.MuiBadge-badge': { opacity: '0.5' } }
-                    ]}
-                    anchorOrigin={{
-                      vertical: 'top',
-                      horizontal: 'left'
-                    }}
-                  >
-                    {button}
-                  </StyledBadge>
-                );
-              }
-
-              return button;
-            })}
-        </RadioGroup>
-      </FormControl>
-    </Stack>
-  );
-};
-
-export default ButtonActions;

package/components/elements/hit/actions/DropdownActions.tsx

@@ -1,157 +0,0 @@
-import {
-  FormControl,
-  formControlClasses,
-  Grid,
-  InputLabel,
-  MenuItem,
-  Select,
-  Skeleton,
-  Stack,
-  Typography
-} from '@mui/material';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { capitalize } from 'lodash-es';
-import type { FC } from 'react';
-import { useContext, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { ActionButton } from './SharedComponents';
-
-interface DropdownActionProps {
-  actions: ActionButton[];
-  currentAssessment: string;
-  currentStatus: string;
-  currentVote: string;
-  loading: boolean;
-  orientation: 'horizontal' | 'vertical';
-}
-
-const DropdownActions: FC<DropdownActionProps> = ({
-  actions,
-  currentAssessment,
-  currentStatus,
-  currentVote,
-  loading,
-  orientation
-}) => {
-  const { t } = useTranslation();
-  const config = useContext(ApiConfigContext);
-  const isHorizontal = useMemo(() => orientation === 'horizontal', [orientation]);
-
-  if (!config.config.lookups) {
-    return (
-      <Grid container justifyContent="end" spacing={4} p={2}>
-        <Grid item sm="auto" xs={12}>
-          <Skeleton variant="rounded" width="200px" height={orientation === 'horizontal' ? '40px' : '56px'}></Skeleton>
-        </Grid>
-        <Grid item sm="auto" xs={12}>
-          <Skeleton variant="rounded" width="200px" height={orientation === 'horizontal' ? '40px' : '56px'}></Skeleton>
-        </Grid>
-        <Grid item sm="auto" xs={12}>
-          <Skeleton variant="rounded" width="200px" height={orientation === 'horizontal' ? '40px' : '56px'}></Skeleton>
-        </Grid>
-      </Grid>
-    );
-  }
-
-  return (
-    <Grid
-      container
-      justifyContent="end"
-      spacing={2}
-      p={2}
-      sx={[isHorizontal && { [`& .${formControlClasses.root}`]: { minWidth: '140px' } }]}
-    >
-      <Grid item sm={!isHorizontal ? true : 'auto'} xs={12}>
-        <FormControl disabled={loading} fullWidth>
-          <InputLabel id="transition-label" htmlFor="transition">
-            {t('hit.details.actions.action')}
-          </InputLabel>
-          <Select
-            labelId="transition-label"
-            id="transition"
-            size={isHorizontal ? 'small' : 'medium'}
-            label={t('hit.details.actions.action')}
-            value={currentStatus}
-          >
-            <MenuItem value={currentStatus} sx={{ display: 'none' }}>
-              {currentStatus.replace(/-/g, ' ').replace(/^[a-z]/, val => val.toUpperCase())}
-            </MenuItem>
-            {actions
-              .filter(_action => _action.type === 'action')
-              .map(_action => (
-                <MenuItem key={_action.name} value={_action.name} onClick={_action.actionFunction}>
-                  {_action.i18nKey ? t(_action.i18nKey) : _action.name}
-                </MenuItem>
-              ))}
-          </Select>
-        </FormControl>
-      </Grid>
-      <Grid item sm={!isHorizontal ? true : 'auto'} xs={12}>
-        <FormControl disabled={loading || !actions.some(action => action.type === 'assessment')} fullWidth>
-          <InputLabel id="assess-label" htmlFor="assess">
-            {t('hit.details.actions.assessment')}
-          </InputLabel>
-          <Select
-            labelId="assess-label"
-            id="assess"
-            size={isHorizontal ? 'small' : 'medium'}
-            label={t('hit.details.actions.assessment')}
-            value={currentAssessment ?? 'no-assessment'}
-            MenuProps={{
-              anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
-              transformOrigin: { horizontal: 'left', vertical: 'top' }
-            }}
-          >
-            <MenuItem value="no-assessment" sx={{ display: 'none' }}>
-              {t('hit.details.actions.assessment.noassessment')}
-            </MenuItem>
-            {actions
-              .filter(action => action.type === 'assessment')
-              .map(a => (
-                <MenuItem value={a.name} onClick={a.actionFunction} key={a.name}>
-                  <Stack direction="column">
-                    <span>
-                      {a.name
-                        .split(/[ -]/)
-                        .map(part => capitalize(part))
-                        .join(' ')}
-                    </span>
-                    <Typography variant="caption" color="text.secondary" maxWidth="250px" sx={{ whiteSpace: 'wrap' }}>
-                      {t(`hit.details.asessments.${a.name}.description`)}
-                    </Typography>
-                  </Stack>
-                </MenuItem>
-              ))}
-          </Select>
-        </FormControl>
-      </Grid>
-      <Grid item sm={!isHorizontal ? true : 'auto'} xs={12}>
-        <FormControl disabled={loading || !actions.some(action => action.type === 'vote')} fullWidth>
-          <InputLabel id="vote-label" htmlFor="vote">
-            {t('hit.details.actions.vote')}
-          </InputLabel>
-          <Select
-            labelId="vote-label"
-            id="vote"
-            size={isHorizontal ? 'small' : 'medium'}
-            label={t('hit.details.actions.vote')}
-            value={currentVote || 'no-vote'}
-          >
-            <MenuItem value="no-vote" sx={{ display: 'none' }}>
-              {t('hit.details.actions.vote.novote')}
-            </MenuItem>
-            {actions
-              .filter(action => action.type === 'vote')
-              .map(action => (
-                <MenuItem key={action.name} value={action.name.toLowerCase()} onClick={action.actionFunction}>
-                  {action.i18nKey ? t(action.i18nKey) : action.name}
-                </MenuItem>
-              ))}
-          </Select>
-        </FormControl>
-      </Grid>
-    </Grid>
-  );
-};
-
-export default DropdownActions;

package/components/elements/hit/actions/SharedComponents.tsx

@@ -1,40 +0,0 @@
-import type { StyledComponent } from '@emotion/styled';
-import { Badge, styled, type BadgeProps } from '@mui/material';
-import { blueGrey } from '@mui/material/colors';
-import type { ReactNode } from 'react';
-
-export type ActionButton = {
-  type: 'assessment' | 'action' | 'vote';
-  name: string;
-  actionFunction: () => void;
-  key?: string;
-  i18nKey?: string;
-  icon?: ReactNode;
-};
-
-export type Keybinds = {
-  [key: string]: () => void;
-};
-
-export const TOP_ROW = ['legitimate', 'false-positive', 'ambiguous', 'development', 'security'];
-
-export const ASSESSMENT_KEYBINDS = ['A', 'S', 'D', 'F', 'G', 'Z', 'X', 'C', 'V', 'B'];
-
-export const VOTE_OPTIONS: Partial<ActionButton>[] = [
-  { name: 'Benign', key: 'Q', type: 'vote' },
-  { name: 'Obscure', key: 'W', type: 'vote' },
-  { name: 'Malicious', key: 'E', type: 'vote' }
-];
-
-export const StyledBadge: StyledComponent<BadgeProps> = styled(Badge)({
-  '& .MuiBadge-badge': {
-    borderRadius: '4px',
-    background: blueGrey[400],
-    fontSize: 9,
-    height: '15px',
-    minWidth: '15px',
-    padding: '0',
-    right: '5px',
-    top: '2.5px'
-  }
-});