ui-soxo-bootstrap-core 2.6.63-dev.0 → 2.6.63-dev.1

package/core/lib/components/support-desk/components/my-tickets/my-tickets.js

@@ -1,343 +0,0 @@
-/**
- * "My Tickets" tab. Only the logged in user's tickets are returned: the encrypted token
- * carries their email and the Helpdesk filters on it. Nothing is filtered on the client.
- *
- * If the browser blocks the API call (CORS) the Helpdesk's own page is shown in an iframe.
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, DatePicker, Empty, Input, Result, Select, Table, Tag, Typography, message } from 'antd';
-import { ClearOutlined, ExportOutlined, PlusOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
-import {
-  PAGE_SIZE,
-  PRIORITY_COLORS,
-  STATUS_COLORS,
-  buildTicketsPageUrl,
-  fetchTickets,
-  formatDate,
-  formatDateTime,
-  normalize,
-  openInNewTab,
-  toPlainText,
-} from '../../support-desk.utils';
-
-const { Text } = Typography;
-
-// ==============================|| STATE ||============================== //
-
-const SEARCH_DEBOUNCE_MS = 350;
-
-/**
- * @param {object} config result of resolveSupportConfig
- * @param {boolean} active load only while the tab is visible
- */
-function useTickets(config, active) {
-  const [search, setSearch] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [status, setStatusState] = useState();
-  const [priority, setPriorityState] = useState();
-  const [range, setRangeState] = useState(null);
-  const [page, setPage] = useState(1);
-
-  const [tickets, setTickets] = useState([]);
-  const [total, setTotal] = useState(0);
-  const [options, setOptions] = useState({ statuses: [], priorities: [] });
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [fallbackUrl, setFallbackUrl] = useState('');
-
-  // The newest request wins; older ones are cancelled.
-  const controllerRef = useRef(null);
-
-  useEffect(() => {
-    if (search === debouncedSearch) return undefined;
-
-    const timer = setTimeout(() => {
-      setDebouncedSearch(search);
-      setPage(1);
-    }, SEARCH_DEBOUNCE_MS);
-    return () => clearTimeout(timer);
-  }, [search, debouncedSearch]);
-
-  const load = useCallback(async () => {
-    if (controllerRef.current) controllerRef.current.abort();
-    const controller = new AbortController();
-    controllerRef.current = controller;
-
-    setLoading(true);
-    setError('');
-
-    try {
-      const result = await fetchTickets(
-        config,
-        {
-          page,
-          page_size: PAGE_SIZE,
-          search: debouncedSearch,
-          status,
-          priority,
-          date_from: range?.[0]?.format('YYYY-MM-DD'),
-          date_to: range?.[1]?.format('YYYY-MM-DD'),
-        },
-        controller.signal
-      );
-
-      setTickets(result.tickets);
-      setTotal(result.total);
-      // Keep the last known options so the dropdowns do not empty when a filter returns no rows.
-      setOptions((prev) => ({
-        statuses: result.statuses.length ? result.statuses : prev.statuses,
-        priorities: result.priorities.length ? result.priorities : prev.priorities,
-      }));
-    } catch (err) {
-      if (err.code === 'aborted') return;
-
-      // Blocked by CORS: show the Helpdesk's own page instead of a dead tab.
-      if (err.code === 'blocked') {
-        try {
-          setFallbackUrl(await buildTicketsPageUrl(config));
-          return;
-        } catch (e) {
-          /* fall through to the error state */
-        }
-      }
-
-      setError(err.message || 'Please try again in a moment.');
-      setTickets([]);
-      setTotal(0);
-    } finally {
-      if (controllerRef.current === controller) setLoading(false);
-    }
-  }, [config, page, debouncedSearch, status, priority, range]);
-
-  useEffect(() => {
-    if (active) load();
-  }, [active, load]);
-
-  // Cancel anything in flight when the drawer closes.
-  useEffect(
-    () => () => {
-      if (controllerRef.current) controllerRef.current.abort();
-      controllerRef.current = null;
-    },
-    []
-  );
-
-  const withFirstPage = (setter) => (value) => {
-    setter(value);
-    setPage(1);
-  };
-
-  const hasFilters = Boolean(search || status || priority || range);
-
-  const clearFilters = () => {
-    setSearch('');
-    setDebouncedSearch('');
-    setStatusState(undefined);
-    setPriorityState(undefined);
-    setRangeState(null);
-    setPage(1);
-  };
-
-  return {
-    filters: { search, status, priority, range },
-    setSearch,
-    setStatus: withFirstPage(setStatusState),
-    setPriority: withFirstPage(setPriorityState),
-    setRange: withFirstPage(setRangeState),
-    clearFilters,
-    hasFilters,
-    options,
-    page,
-    setPage,
-    tickets,
-    total,
-    loading,
-    error,
-    fallbackUrl,
-    reload: load,
-  };
-}
-
-// ==============================|| FILTERS ||============================== //
-
-function TicketFilters({ tickets }) {
-  const { filters, options, hasFilters, setSearch, setStatus, setPriority, setRange, clearFilters } = tickets;
-
-  return (
-    <div className="support-filters">
-      <Input
-        allowClear
-        className="support-filters__search"
-        prefix={<SearchOutlined />}
-        placeholder="Search by ticket ID or subject"
-        value={filters.search}
-        onChange={(event) => setSearch(event.target.value)}
-      />
-      <Select allowClear placeholder="Status" value={filters.status} onChange={setStatus} className="support-filters__select">
-        {options.statuses.map((item) => (
-          <Select.Option key={item} value={item}>
-            {item}
-          </Select.Option>
-        ))}
-      </Select>
-      <Select allowClear placeholder="Priority" value={filters.priority} onChange={setPriority} className="support-filters__select">
-        {options.priorities.map((item) => (
-          <Select.Option key={item} value={item}>
-            {item}
-          </Select.Option>
-        ))}
-      </Select>
-      <DatePicker.RangePicker value={filters.range} onChange={setRange} className="support-filters__dates" />
-      <div className="support-filters__actions">
-        {hasFilters && (
-          <Button type="link" icon={<ClearOutlined />} onClick={clearFilters}>
-            Clear
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ==============================|| TABLE ||============================== //
-
-const columns = [
-  {
-    title: 'Ticket',
-    dataIndex: 'name',
-    width: 110,
-    render: (value) => <Text strong>{value}</Text>,
-  },
-  {
-    title: 'Subject',
-    dataIndex: 'subject',
-    render: (value, row) => {
-      const description = toPlainText(row.description);
-      return (
-        <div className="support-subject">
-          <div className="support-subject__title" title={value}>
-            {value || '-'}
-          </div>
-          {description && (
-            <div className="support-subject__text" title={description}>
-              {description}
-            </div>
-          )}
-        </div>
-      );
-    },
-  },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    width: 160,
-    render: (value) => <Tag color={STATUS_COLORS[normalize(value)] || 'default'}>{value || '-'}</Tag>,
-  },
-  {
-    title: 'Priority',
-    dataIndex: 'priority',
-    width: 100,
-    render: (value) => <Tag color={PRIORITY_COLORS[normalize(value)] || 'default'}>{value || '-'}</Tag>,
-  },
-  {
-    title: 'Created',
-    dataIndex: 'creation',
-    width: 120,
-    render: (value) => <span title={formatDateTime(value)}>{formatDate(value)}</span>,
-  },
-];
-
-function TicketTable({ tickets, onRaiseTicket }) {
-  const { tickets: rows, total, page, setPage, loading, error, hasFilters, clearFilters, reload } = tickets;
-
-  if (error) {
-    return (
-      <Result
-        status="warning"
-        title="We couldn't load your tickets"
-        subTitle={error}
-        extra={
-          <Button type="primary" icon={<ReloadOutlined />} onClick={reload}>
-            Try again
-          </Button>
-        }
-      />
-    );
-  }
-
-  const empty = hasFilters ? (
-    <Empty description="No tickets match your filters">
-      <Button onClick={clearFilters}>Clear filters</Button>
-    </Empty>
-  ) : (
-    <Empty description="You haven't raised any tickets yet">
-      <Button type="primary" icon={<PlusOutlined />} onClick={onRaiseTicket}>
-        Raise a ticket
-      </Button>
-    </Empty>
-  );
-
-  return (
-    <Table
-      size="middle"
-      rowKey="name"
-      columns={columns}
-      dataSource={rows}
-      loading={loading}
-      scroll={{ x: 640 }}
-      locale={{ emptyText: loading ? <div style={{ height: 120 }} /> : empty }}
-      pagination={{
-        current: page,
-        pageSize: PAGE_SIZE,
-        total,
-        showSizeChanger: false,
-        hideOnSinglePage: true,
-        showTotal: (count, [from, to]) => `${from}-${to} of ${count} tickets`,
-        onChange: setPage,
-      }}
-    />
-  );
-}
-
-// ==============================|| MY TICKETS ||============================== //
-
-export default function MyTickets({ config, active, onRaiseTicket }) {
-  const tickets = useTickets(config, active);
-
-  const handleOpenInNewTab = () =>
-    openInNewTab(() => buildTicketsPageUrl(config)).catch((err) => message.error(err?.message || 'Unable to open your tickets right now.'));
-
-  // Reload also works in fallback mode: it makes a new link, so the embedded page reloads.
-  const toolbar = (
-    <div className="support-toolbar">
-      <Button type="link" size="small" icon={<ReloadOutlined />} onClick={tickets.reload} disabled={tickets.loading}>
-        Reload
-      </Button>
-      <Button type="link" size="small" icon={<ExportOutlined />} onClick={handleOpenInNewTab}>
-        Open in new tab
-      </Button>
-    </div>
-  );
-
-  if (tickets.fallbackUrl) {
-    return (
-      <div className="support-tickets">
-        {toolbar}
-        <div className="support-tickets__frame">
-          <iframe title="My support tickets" src={tickets.fallbackUrl} className="support-frame" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="support-tickets">
-      {toolbar}
-      <TicketFilters tickets={tickets} />
-      <div className="support-tickets__body">
-        <TicketTable tickets={tickets} onRaiseTicket={onRaiseTicket} />
-      </div>
-    </div>
-  );
-}

package/core/lib/components/support-desk/support-desk.dom.test.js

@@ -1,20 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { toPlainText } from './support-desk.utils';
-
-describe('toPlainText', () => {
-  it('strips markup and collapses spaces', () => {
-    expect(toPlainText('<p>Hello   <b>world</b></p>\n<p>again</p>')).toBe('Hello world again');
-    expect(toPlainText('')).toBe('');
-    expect(toPlainText(null)).toBe('');
-  });
-
-  it('does not load or run anything in the markup', async () => {
-    window.__pwned = false;
-    toPlainText('<img src="x" onerror="window.__pwned = true"><script>window.__pwned = true</script>');
-
-    await new Promise((resolve) => setTimeout(resolve, 20));
-    expect(window.__pwned).toBe(false);
-  });
-});