@cccsaurora/howler-ui 2.14.0-dev.263 → 2.14.0-dev.264

package/components/elements/addons/search/phrase/index.ts

@@ -0,0 +1,86 @@
+export type PhraseAnalysis = {
+  cursor: number;
+  parentIndex: number;
+  parent: PhraseToken;
+  currentIndex: number;
+  current: PhraseToken;
+  suggest: {
+    token: PhraseToken;
+    parent: PhraseToken;
+    value: string;
+  };
+  tokens?: PhraseToken[];
+};
+
+export type PhraseToken = {
+  value: string;
+  startIndex: number;
+  endIndex: number;
+  type?: string;
+  children?: PhraseToken[];
+};
+
+export type PhraseSuggester = {
+  suggest: (phrase: PhraseAnalysis) => string[];
+};
+
+export type PhraseSuggestorValue = {
+  field: string;
+  values: string[];
+};
+
+export class PhraseBuffer {
+  constructor(type?: string) {
+    this.type = type;
+  }
+
+  private type: string;
+
+  private startIndex: number = 0;
+
+  private endIndex: number = -1;
+
+  private buffer: string[] = [];
+
+  public init(startIndex: number, buffer?: string[]): PhraseBuffer {
+    this.buffer = buffer ? [...buffer] : [];
+    this.startIndex = startIndex;
+    this.endIndex = startIndex + (buffer ? buffer.length : 0);
+    return this;
+  }
+
+  public append(value: string): PhraseBuffer {
+    this.buffer.push(value);
+    this.endIndex += value.length;
+    return this;
+  }
+
+  public value(): string {
+    return this.buffer.join('');
+  }
+
+  public start(index?: number): number {
+    if (index !== undefined) {
+      this.startIndex = index;
+    }
+    return this.startIndex;
+  }
+
+  public end(index?: number): number {
+    if (index !== undefined) {
+      this.endIndex = index;
+    }
+    return this.endIndex;
+  }
+
+  public token(): PhraseToken {
+    return this.endIndex > 0
+      ? {
+          type: this.type,
+          value: this.value(),
+          startIndex: this.startIndex,
+          endIndex: this.endIndex - 1
+        }
+      : null;
+  }
+}

package/components/elements/addons/search/phrase/word/WordLexer.ts

@@ -0,0 +1,10 @@
+import type PhraseConsumer from '../PhraseConsumer';
+import PhraseLexer from '../PhraseLexer';
+import WhitespaceConsumer from './consumers/WhitespaceConsumer';
+import WordConsumer from './consumers/WordConsumer';
+
+export default class WordLexer extends PhraseLexer {
+  public consumers(): PhraseConsumer<PhraseLexer>[] {
+    return [new WordConsumer(), new WhitespaceConsumer()];
+  }
+}

package/components/elements/addons/search/phrase/word/WordSuggester.ts

@@ -0,0 +1,9 @@
+import type { PhraseAnalysis, PhraseSuggester } from '..';
+
+export default class WordSuggestor implements PhraseSuggester {
+  constructor(private suggestions: string[]) {}
+
+  public suggest(phrase: PhraseAnalysis): string[] {
+    return this.suggestions.filter(s => s.indexOf(phrase.suggest.value) > -1);
+  }
+}

package/components/elements/addons/search/phrase/word/consumers/WhitespaceConsumer.ts

@@ -0,0 +1,21 @@
+import type { PhraseToken } from '../..';
+import PhraseConsumer from '../../PhraseConsumer';
+import type PhraseLexer from '../../PhraseLexer';
+
+export default class WhitespaceConsumer extends PhraseConsumer<PhraseLexer> {
+  public lock(lexer: PhraseLexer): boolean {
+    return lexer.bufferValue().match(/\s/) && lexer.ahead(1) !== ' ';
+  }
+
+  public consume(lexer: PhraseLexer): PhraseToken {
+    if (lexer.ahead(1) !== ' ') {
+      return {
+        type: 'whitespace',
+        startIndex: lexer.start(),
+        endIndex: lexer.end(),
+        value: this._buffer.join('')
+      };
+    }
+    return null;
+  }
+}

package/components/elements/addons/search/phrase/word/consumers/WordConsumer.ts

@@ -0,0 +1,21 @@
+import type { PhraseToken } from '../..';
+import PhraseConsumer from '../../PhraseConsumer';
+import type PhraseLexer from '../../PhraseLexer';
+
+export default class WordConsumer extends PhraseConsumer<PhraseLexer> {
+  public lock(lexer: PhraseLexer): boolean {
+    return !lexer.bufferValue().match(/\s/) && (lexer.ahead(1) === ' ' || lexer.ahead(1) === '');
+  }
+
+  public consume(lexer: PhraseLexer): PhraseToken {
+    if (lexer.ahead(1) === ' ' || lexer.aheadIsEmpty(true)) {
+      return {
+        type: 'word',
+        startIndex: lexer.start(),
+        endIndex: lexer.end(),
+        value: this._buffer.join('')
+      };
+    }
+    return null;
+  }
+}

package/components/elements/display/ActionButton.tsx

@@ -0,0 +1,40 @@
+import { Button, type ButtonProps } from '@mui/material';
+import api from 'api';
+import useMyApi from 'components/hooks/useMyApi';
+import useMyActionFunctions from 'components/routes/action/useMyActionFunctions';
+import type { Action } from 'models/entities/generated/Action';
+import { useEffect, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ActionButton: FC<{ actionId: string; hitId: string; label: string } & ButtonProps> = ({
+  actionId,
+  hitId,
+  label,
+  ...otherProps
+}) => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+
+  const { executeAction } = useMyActionFunctions();
+
+  const [action, setAction] = useState<Action | null>(null);
+
+  useEffect(() => {
+    dispatchApi(api.search.action.post({ query: `action_id:${actionId}`, rows: 1 })).then(result =>
+      setAction(result.items[0])
+    );
+  }, [actionId, dispatchApi]);
+
+  return (
+    <Button
+      variant={otherProps.variant ?? 'outlined'}
+      disabled={!action}
+      onClick={() => executeAction(actionId, `howler.id:${hitId}`)}
+      color={otherProps.color ?? 'primary'}
+    >
+      {label ?? action?.name ?? t('loading')}
+    </Button>
+  );
+};
+
+export default ActionButton;

package/components/elements/display/Classification.tsx

@@ -0,0 +1,29 @@
+import { Chip, useMediaQuery, useTheme } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import type { FC } from 'react';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Classification: FC = () => {
+  const { config } = useContext(ApiConfigContext);
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const isSm = useMediaQuery(theme.breakpoints.down('md'));
+
+  const label = useMemo(() => {
+    if (isSm) {
+      return config.c12nDef?.UNRESTRICTED?.replace(/[a-z]/g, '').replace(/ /g, '') ?? '???';
+    } else {
+      return config.c12nDef?.UNRESTRICTED ?? 'Unknown';
+    }
+  }, [config.c12nDef?.UNRESTRICTED, isSm]);
+
+  const color = useMemo(
+    () => config.c12nDef?.levels_styles_map?.[label.replace(/\/\/.+/, '')]?.color ?? 'default',
+    [config.c12nDef?.levels_styles_map, label]
+  );
+
+  return <Chip label={t(label)} color={color} sx={{ mr: 1, fontSize: '.9rem', p: 2, textTransform: 'uppercase' }} />;
+};
+
+export default Classification;

package/components/elements/display/DocumentationButton.tsx

@@ -0,0 +1,46 @@
+import { Help } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+
+const DocumentationButton: FC = () => {
+  const { t } = useTranslation();
+  const location = useLocation();
+
+  const [link, i18nKey] = useMemo(() => {
+    switch (location.pathname) {
+      case '/action': {
+        return ['/help/actions', 'documentation.open.actions'];
+      }
+      case '/search':
+      case '/advanced': {
+        return ['/help/search', 'documentation.open.search'];
+      }
+      case '/views':
+      case '/views/create': {
+        return ['/help/views', 'documentation.open.views'];
+      }
+      case '/templates':
+      case '/templates/view': {
+        return ['/help/templates', 'documentation.open.templates'];
+      }
+      default: {
+        return [null, null];
+      }
+    }
+  }, [location.pathname]);
+
+  return (
+    link && (
+      <Tooltip title={t(i18nKey)}>
+        <IconButton size="small" component={Link} to={link} sx={{ ml: -2, color: 'text.secondary', opacity: 0.8 }}>
+          <Help sx={{ fontSize: '16px' }} />
+        </IconButton>
+      </Tooltip>
+    )
+  );
+};
+
+export default DocumentationButton;

package/components/elements/display/DynamicTabs.tsx

@@ -0,0 +1,52 @@
+import { Box, Tab, Tabs } from '@mui/material';
+import * as React from 'react';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const CustomTabPanel: React.FC<TabPanelProps> = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div role="tabpanel" hidden={value !== index} id={`tabpanel-${index}`} aria-labelledby={`tab-${index}`} {...other}>
+      {value === index && <Box sx={{ p: 1 }}>{children}</Box>}
+    </div>
+  );
+};
+
+const a11yProps = (index: number) => {
+  return {
+    id: `tab-${index}`,
+    'aria-controls': `tabpanel-${index}`
+  };
+};
+
+const DynamicTabs: React.FC<{ tabs: { title: string; children: React.ReactNode }[] }> = ({ tabs }) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={value} onChange={handleChange} aria-label="dynamic tabs">
+          {tabs.map((t, index) => (
+            <Tab key={t.title} label={t.title} {...a11yProps(index)} />
+          ))}
+        </Tabs>
+      </Box>
+      {tabs.map((t, index) => (
+        <CustomTabPanel key={t.title} value={value} index={index}>
+          {t.children}
+        </CustomTabPanel>
+      ))}
+    </Box>
+  );
+};
+
+export default DynamicTabs;

package/components/elements/display/HandlebarsMarkdown.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable no-console */
+import Handlebars from 'handlebars';
+import asyncHelpers from 'handlebars-async-helpers';
+import type { FC, ReactElement } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Throttler from 'utils/Throttler';
+import { hashCode } from 'utils/utils';
+import Markdown, { type MarkdownProps } from '../display/Markdown';
+import { useHelpers } from './handlebars/helpers';
+
+type HandlebarsInstance = typeof Handlebars;
+
+interface HandlebarsMarkdownProps extends MarkdownProps {
+  object?: { [index: string]: any };
+  disableLinks?: boolean;
+}
+
+const THROTTLER = new Throttler(500);
+
+const HandlebarsMarkdown: FC<HandlebarsMarkdownProps> = ({ md, object = {}, disableLinks = false }) => {
+  const { t } = useTranslation();
+  const helpers = useHelpers();
+
+  const [rendered, setRendered] = useState('');
+
+  const [mdComponents, setMdComponents] = useState<Record<string, ReactElement>>({});
+
+  const handlebars: HandlebarsInstance = useMemo(() => {
+    const instance = asyncHelpers(Handlebars);
+
+    instance.registerHelper('img', async context => {
+      const hash = Object.fromEntries(
+        await Promise.all(Object.entries(context.hash).map(async ([key, val]) => [key, await val]))
+      );
+
+      if (!hash.src) {
+        return '';
+      }
+
+      const props = Object.entries(hash)
+        .map(([key, val]) => `${key}="${val}"`)
+        .join(' ');
+
+      return new Handlebars.SafeString(`<img ${props} >`);
+    });
+
+    return instance;
+  }, []);
+
+  useEffect(() => {
+    helpers.forEach(helper => {
+      if (handlebars.helpers[helper.keyword] && !helper.componentCallback) {
+        return;
+      }
+
+      handlebars.registerHelper(helper.keyword, (...args: any[]) => {
+        console.debug(`Running helper ${helper.keyword}`);
+
+        if (helper.componentCallback) {
+          const id = hashCode(JSON.stringify([helper.keyword, ...args])).toString();
+          if (!mdComponents[id]) {
+            const result = helper.componentCallback(...args);
+
+            if (result instanceof Promise) {
+              result.then(_result => setMdComponents(_components => ({ ..._components, [id]: _result })));
+            } else {
+              setMdComponents(_components => ({ ..._components, [id]: result }));
+            }
+          }
+          return new Handlebars.SafeString(`\`${id}\``);
+        }
+
+        return helper.callback(...args);
+      });
+    });
+  }, [handlebars, helpers, mdComponents]);
+
+  useEffect(() => {
+    THROTTLER.debounce(async () => {
+      try {
+        const compiled = handlebars.compile(md || '');
+
+        setRendered(await compiled(object));
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+
+        setRendered(`
+<h2 style="color: red">${t('markdown.error')}</h2>
+
+**\`${err.toString()}\`**
+
+<code style="font-size: 0.8rem"><pre>
+${err.stack}
+</pre></code>
+        `);
+      }
+    });
+  }, [md, handlebars, object, t]);
+
+  return <Markdown md={rendered} disableLinks={disableLinks} components={mdComponents} />;
+};
+
+export default memo(HandlebarsMarkdown);

package/components/elements/display/HowlerAvatar.tsx

@@ -0,0 +1,66 @@
+import type { AvatarProps, SxProps, Theme } from '@mui/material';
+import { Avatar, Tooltip, useTheme } from '@mui/material';
+import { AvatarContext } from 'components/app/providers/AvatarProvider';
+import { memo, useCallback, useContext, useEffect, useState, type FC, type ReactNode } from 'react';
+import { nameToInitials } from 'utils/stringUtils';
+import { stringToColor } from 'utils/utils';
+
+type HowlerAvatarProps = AvatarProps & {
+  userId: string;
+};
+
+const HowlerAvatar: FC<HowlerAvatarProps> = ({ userId, ...avatarProps }) => {
+  const { getAvatar } = useContext(AvatarContext);
+  const theme = useTheme();
+  const [props, setProps] = useState<{ sx?: SxProps<Theme>; children?: ReactNode | ReactNode[]; src?: string }>();
+
+  const stringAvatar = useCallback(
+    (name: string) => {
+      return {
+        sx: {
+          bgcolor: stringToColor(name),
+          color: theme.palette.getContrastText(stringToColor(name))
+        },
+        children: nameToInitials(name)
+      };
+    },
+    [theme.palette]
+  );
+
+  useEffect(() => {
+    if (!userId || userId.toLowerCase() === 'unassigned') {
+      setProps({});
+    } else {
+      getAvatar(userId)
+        .then(av =>
+          av && !av.startsWith('http') && !av.startsWith('data:') ? setProps(stringAvatar(av)) : setProps({ src: av })
+        )
+        .catch(e => {
+          // eslint-disable-next-line no-console
+          console.debug(e);
+          setProps({
+            src: null
+          });
+        });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId]);
+
+  if (userId) {
+    return (
+      <Tooltip title={userId}>
+        <Avatar
+          {...avatarProps}
+          {...props}
+          sx={{ ...(avatarProps?.sx || {}), ...(props?.sx || {}) } as SxProps<Theme>}
+        />
+      </Tooltip>
+    );
+  } else {
+    return (
+      <Avatar {...avatarProps} {...props} sx={{ ...(avatarProps?.sx || {}), ...(props?.sx || {}) } as SxProps<Theme>} />
+    );
+  }
+};
+
+export default memo(HowlerAvatar);

package/components/elements/display/HowlerAvatarHeader.tsx

@@ -0,0 +1,37 @@
+import { Grid, styled, Typography, useTheme } from '@mui/material';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { FC } from 'react';
+import HowlerAvatar from './HowlerAvatar';
+
+const AvatarContainer = styled(Grid)(({ theme }) => ({
+  marginRight: theme.spacing(4)
+}));
+
+const HowlerAvatarHeader: FC<{ user: HowlerUser }> = ({ user }) => {
+  const theme = useTheme();
+  return (
+    <AvatarContainer item sm={12} md={2}>
+      <Grid container spacing={2} justifyContent="center">
+        <Grid item>
+          <HowlerAvatar
+            userId={user?.username}
+            sx={{
+              width: theme.spacing(16),
+              height: theme.spacing(16),
+              [theme.breakpoints.down('sm')]: {
+                width: theme.spacing(24),
+                height: theme.spacing(24)
+              },
+              margin: '0 1rem'
+            }}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Typography textAlign="center">{user?.name ?? ''}</Typography>
+        </Grid>
+      </Grid>
+    </AvatarContainer>
+  );
+};
+
+export default HowlerAvatarHeader;

package/components/elements/display/HowlerCard.tsx

@@ -0,0 +1,10 @@
+import type { CardProps } from '@mui/material';
+import { Card } from '@mui/material';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+const HowlerCard: FC<CardProps> = props => (
+  <Card style={{ outline: 'none' }} elevation={props.variant !== 'outlined' ? 4 : 0} {...props} />
+);
+
+export default memo(HowlerCard);

package/components/elements/display/Image.tsx

@@ -0,0 +1,43 @@
+import { Close } from '@mui/icons-material';
+import { Box, IconButton, lighten, Modal } from '@mui/material';
+import { useState, type DetailedHTMLProps, type FC, type ImgHTMLAttributes } from 'react';
+
+const Image: FC<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = props => {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <img {...props} style={{ ...(props.style ?? {}), cursor: 'pointer' }} onClick={() => setShowModal(true)} />
+      <Modal open={showModal} onClose={() => setShowModal(false)}>
+        <Box
+          sx={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+          onClick={() => setShowModal(false)}
+        >
+          <IconButton
+            onClick={() => setShowModal(false)}
+            sx={theme => ({
+              position: 'fixed',
+              top: '2rem',
+              right: '2rem',
+              backgroundColor: 'background.paper',
+              '&:hover': {
+                backgroundColor: lighten(theme.palette.background.paper, 0.1)
+              }
+            })}
+          >
+            <Close />
+          </IconButton>
+          <img {...props} style={{ ...(props.style ?? {}), maxWidth: '70vw', maxHeight: '70vh' }} />
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export default Image;