@stack-spot/portal-components 2.26.0 → 2.27.1

package/src/containers/NotificationsPage.tsx

@@ -1,98 +1,119 @@
-import { Text } from '@citric/core'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { styled } from 'styled-components'
-import { AsyncContent } from '../components/AsyncContent'
-import { ErrorFeedback } from '../components/error'
-import { SearchInput } from '../components/form/SearchInput'
-import { Select } from '../components/form/Select'
-import { NotificationList } from '../components/notification/NotificationList'
-import { useNotificationList } from '../context/notification/hooks'
-import { NotificationContext, NotificationPriority } from '../context/notification/types'
-import { useNotificationController } from '../notifications'
-
-const FilterBox = styled.div`
-  margin: 24px 0;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-
-  > * {
-    flex: 1;
-  }
-`
-
-const criticalities: NotificationPriority[] = ['HIGH', 'MEDIUM', 'LOW']
-const contexts: NotificationContext[] = ['ACCOUNT', 'STUDIO', 'WORKSPACE']
-
-export const NotificationsPage = () => {
-  const t = useTranslate(dictionary)
-  const controller = useNotificationController()
-  const { hasMore, items, loadMore, applyFilters, filters, status, error } = useNotificationList()
-
-  return (<>
-    <header><Text appearance="h2" as="h1">{t.title}</Text></header>
-    <Text appearance="body2" colorScheme="light.700">
-      {t.description}
-    </Text>
-    <FilterBox>
-      <SearchInput searchText={t.filter} defaultValue={filters.search} onChange={search => applyFilters({ search })} />
-      <Select
-        value={filters.criticality}
-        options={criticalities}
-        onChange={criticality => applyFilters({ criticality })}
-        emptyOption={t.allCriticalities}
-        renderLabel={o => t[`criticality.${o}`]}
-      />
-      <Select
-        value={filters.context}
-        options={contexts}
-        onChange={context => applyFilters({ context })}
-        emptyOption={t.allContexts}
-        renderLabel={o => t[`context.${o}`]}
-      />
-    </FilterBox>
-    <AsyncContent
-      error={error}
-      loading={status === 'startup'}
-      errorDetails={{ errorComponent: () => <ErrorFeedback code={error.code} />, reportError: () => { } }}
-    >
-      <NotificationList
-        items={items}
-        loading={status === 'loading'}
-        onCommit={id => controller.markAsCommitted(id)}
-        infiniteScroll={{ hasMore, loadMore }}
-        onClickAction={controller.config.onClickAction}
-        showEmptySearch
-      />
-    </AsyncContent>
-  </>)
-}
-
-const dictionary = {
-  en: {
-    title: 'Notifications',
-    description: 'Here you can view all your received notifications.',
-    filter: 'Filter',
-    allCriticalities: 'All severities',
-    'criticality.HIGH': 'High',
-    'criticality.MEDIUM': 'Medium',
-    'criticality.LOW': 'Low',
-    allContexts: 'All contexts',
-    'context.ACCOUNT': 'Account',
-    'context.STUDIO': 'Studio',
-    'context.WORKSPACE': 'Workspace',
-  },
-  pt: {
-    title: 'Notificações',
-    description: 'Aqui você encontra todas as notificações recebidas.',
-    filter: 'Filtrar',
-    allCriticalities: 'Todas as criticidades',
-    'criticality.HIGH': 'Alto',
-    'criticality.MEDIUM': 'Médio',
-    'criticality.LOW': 'Baixo',
-    allContexts: 'Todos os contextos',
-    'context.ACCOUNT': 'Conta',
-    'context.STUDIO': 'Estúdio',
-    'context.WORKSPACE': 'Workspace',
-  },
-} satisfies Dictionary
+import { Text } from '@citric/core'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import { AsyncContent } from '../components/AsyncContent'
+import { ErrorFeedback } from '../components/error'
+import { SearchInput } from '../components/form/SearchInput'
+import { Select } from '../components/form/Select'
+import { NotificationList } from '../components/notification/NotificationList'
+import { useNotificationList } from '../context/notification/hooks'
+import { NotificationContext, NotificationPriority } from '../context/notification/types'
+import { useNotificationController } from '../notifications'
+
+const FilterBox = styled.div`
+  margin: 24px 0;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+
+  > * {
+    flex: 1;
+  }
+`
+
+const criticalities: NotificationPriority[] = ['HIGH', 'MEDIUM', 'LOW']
+const contexts: NotificationContext[] = ['ACCOUNT', 'STUDIO', 'WORKSPACE']
+type TimeKey = `time.${1 | 7 | 30 | 90 | 365}`
+const times = [1, 7, 30, 90, 365]
+
+export const NotificationsPage = () => {
+  const t = useTranslate(dictionary)
+  const controller = useNotificationController()
+  const { hasMore, items, loadMore, applyFilters, filters, status, error } = useNotificationList()
+
+  return (<>
+    <header><Text appearance="h2" as="h1">{t.title}</Text></header>
+    <Text appearance="body2" colorScheme="light.700">
+      {t.description}
+    </Text>
+    <FilterBox>
+      <SearchInput searchText={t.filter} defaultValue={filters.search} onChange={search => applyFilters({ search })} />
+      <Select
+        value={filters.createdSince}
+        options={times}
+        onChange={createdSince => applyFilters({ createdSince })}
+        emptyOption={t.anyTime}
+        renderLabel={o => t[`time.${o}` as TimeKey]}
+      />
+      <Select
+        value={filters.criticality}
+        options={criticalities}
+        onChange={criticality => applyFilters({ criticality })}
+        emptyOption={t.allCriticalities}
+        renderLabel={o => t[`criticality.${o}`]}
+      />
+      <Select
+        value={filters.context}
+        options={contexts}
+        onChange={context => applyFilters({ context })}
+        emptyOption={t.allContexts}
+        renderLabel={o => t[`context.${o}`]}
+      />
+    </FilterBox>
+    <AsyncContent
+      error={error}
+      loading={status === 'startup'}
+      errorDetails={{ errorComponent: () => <ErrorFeedback code={error.code} />, reportError: () => { } }}
+    >
+      <NotificationList
+        items={items}
+        loading={status === 'loading'}
+        onCommit={id => controller.markAsCommitted(id)}
+        infiniteScroll={{ hasMore, loadMore }}
+        onClickAction={controller.config.onClickAction}
+        showEmptySearch
+      />
+    </AsyncContent>
+  </>)
+}
+
+const dictionary = {
+  en: {
+    title: 'Notifications',
+    description: 'Here you can view all your received notifications.',
+    filter: 'Filter',
+    allCriticalities: 'All severities',
+    'criticality.HIGH': 'High',
+    'criticality.MEDIUM': 'Medium',
+    'criticality.LOW': 'Low',
+    allContexts: 'All contexts',
+    'context.ACCOUNT': 'Account',
+    'context.STUDIO': 'Studio',
+    'context.WORKSPACE': 'Workspace',
+    'anyTime': 'Any time',
+    'time.1': 'Last 24 hours',
+    'time.7': 'Last 7 days',
+    'time.30': 'Last 30 days',
+    'time.90': 'Last 90 days',
+    'time.365': 'Last 12 months',
+  },
+  pt: {
+    title: 'Notificações',
+    description: 'Aqui você encontra todas as notificações recebidas.',
+    filter: 'Filtrar',
+    allCriticalities: 'Todas as criticidades',
+    'criticality.HIGH': 'Alto',
+    'criticality.MEDIUM': 'Médio',
+    'criticality.LOW': 'Baixo',
+    allContexts: 'Todos os contextos',
+    'context.ACCOUNT': 'Conta',
+    'context.STUDIO': 'Estúdio',
+    'context.WORKSPACE': 'Workspace',
+    'anyTime': 'Todos os períodos',
+    'time.1': 'Últimas 24 horas',
+    'time.7': 'Últimos 7 dias',
+    'time.30': 'Últimos 30 dias',
+    'time.90': 'Últimos 90 dias',
+    'time.365': 'Últimos 12 meses',
+  },
+} satisfies Dictionary

package/src/context/anchor.tsx

@@ -1,37 +1,37 @@
-import { createContext, useContext } from 'react'
-
-export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
-
-interface AnchorContext {
-  /**
-   * The component to render by a layout component a link is needed.
-   * @default <a>
-   */
-  anchorTag?: AnchorComponent,
-}
-
-const context = createContext<AnchorContext>({})
-
-const Anchor: AnchorComponent = props => <a {...props} />
-
-/**
- * Some components need to create HTML anchors (links) to other pages in the website. These links, sometimes, must to be managed by a 
- * navigator for React. Since we don't want to couple this library with any specific navigator, you can provide your own component for
- * creating links, it must follow the same interface of the HTML's `a` tag.
- * 
- * If this is not used, the tag `<a>` is used by default.
- * @param props the anchor component (anchorTag) and the content to render (children).
- */
-export const AnchorProvider = ({ children, ...props }: Required<AnchorContext> & { children: React.ReactNode }) => (
-  <context.Provider value={props}>{children}</context.Provider>
-)
-
-/**
- * A React hook for retrieving the Link (anchor) component.
- * @returns the link component declared at {@link AnchorProvider} or a component that renders the tag <a> from HTML if no link component was
- * provided.
- */
-export function useAnchorTag(): AnchorComponent {
-  const { anchorTag } = useContext(context)
-  return anchorTag ?? Anchor
-}
+import { createContext, useContext } from 'react'
+
+export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
+
+interface AnchorContext {
+  /**
+   * The component to render by a layout component a link is needed.
+   * @default <a>
+   */
+  anchorTag?: AnchorComponent,
+}
+
+const context = createContext<AnchorContext>({})
+
+const Anchor: AnchorComponent = props => <a {...props} />
+
+/**
+ * Some components need to create HTML anchors (links) to other pages in the website. These links, sometimes, must to be managed by a 
+ * navigator for React. Since we don't want to couple this library with any specific navigator, you can provide your own component for
+ * creating links, it must follow the same interface of the HTML's `a` tag.
+ * 
+ * If this is not used, the tag `<a>` is used by default.
+ * @param props the anchor component (anchorTag) and the content to render (children).
+ */
+export const AnchorProvider = ({ children, ...props }: Required<AnchorContext> & { children: React.ReactNode }) => (
+  <context.Provider value={props}>{children}</context.Provider>
+)
+
+/**
+ * A React hook for retrieving the Link (anchor) component.
+ * @returns the link component declared at {@link AnchorProvider} or a component that renders the tag <a> from HTML if no link component was
+ * provided.
+ */
+export function useAnchorTag(): AnchorComponent {
+  const { anchorTag } = useContext(context)
+  return anchorTag ?? Anchor
+}

package/src/context/loading.tsx

@@ -1,36 +1,36 @@
-import { LoadingCircular } from '@citric/ui'
-import { createContext, ReactElement, useContext } from 'react'
-
-interface LoadingContext {
-  /**
-   * The component to render by a layout component.
-   * @default <LoadingCircular>
-   */
-  loading?: ReactElement,
-}
-
-const context = createContext<LoadingContext>({})
-
-const Loading: ReactElement = <LoadingCircular size="sm" sx={{ position: 'absolute' }} />
-
-/**
- * Some portals use a different loading style than what we have in citric.
- * You can provide your own loading component to use wherever you want within the application.
- * 
- * @param position The position parameter is mandatory to be passed as absolute in the loading component that is being passed.
- *
- * If this is not used, the component `LoadingCircular` from citric is used by default.
- * @param props the loading component (useLoadingComponent) and the content to render (children).
- */
-export const LoadingProvider = ({ children, ...props }: Required<LoadingContext> & { children: React.ReactNode }) => (
-  <context.Provider value={props}>{children}</context.Provider>
-)
-
-/**
- * A React hook for retrieving the Loading component.
- * @returns the loading component declared at `LoadingProvider`.
- */
-export function useLoadingComponent(): ReactElement {
-  const { loading } = useContext(context)
-  return loading ?? Loading
-}
+import { LoadingCircular } from '@citric/ui'
+import { createContext, ReactElement, useContext } from 'react'
+
+interface LoadingContext {
+  /**
+   * The component to render by a layout component.
+   * @default <LoadingCircular>
+   */
+  loading?: ReactElement,
+}
+
+const context = createContext<LoadingContext>({})
+
+const Loading: ReactElement = <LoadingCircular size="sm" sx={{ position: 'absolute' }} />
+
+/**
+ * Some portals use a different loading style than what we have in citric.
+ * You can provide your own loading component to use wherever you want within the application.
+ * 
+ * @param position The position parameter is mandatory to be passed as absolute in the loading component that is being passed.
+ *
+ * If this is not used, the component `LoadingCircular` from citric is used by default.
+ * @param props the loading component (useLoadingComponent) and the content to render (children).
+ */
+export const LoadingProvider = ({ children, ...props }: Required<LoadingContext> & { children: React.ReactNode }) => (
+  <context.Provider value={props}>{children}</context.Provider>
+)
+
+/**
+ * A React hook for retrieving the Loading component.
+ * @returns the loading component declared at `LoadingProvider`.
+ */
+export function useLoadingComponent(): ReactElement {
+  const { loading } = useContext(context)
+  return loading ?? Loading
+}

package/src/context/notification/LazyNotificationList.ts

@@ -1,103 +1,103 @@
-import { pull, uniqBy } from 'lodash'
-import { GetTenantNotificationsResponse, ResponseModelGetTenantNotificationsResponse } from '../../notifications'
-import { LazyNotificationListener, LoadNotificationsFilters, LoadNotificationsOptions } from './types'
-
-interface ConstructorParams {
-  id: number,
-  load: (options: LoadNotificationsOptions) => Promise<ResponseModelGetTenantNotificationsResponse>,
-  filters?: LoadNotificationsFilters,
-}
-
-export class LazyNotificationList {
-  readonly id: number
-  items: GetTenantNotificationsResponse[] = []
-  private page = -1
-  private total = 0
-  private filters: LoadNotificationsFilters
-  private readonly load: (options: LoadNotificationsOptions) => Promise<ResponseModelGetTenantNotificationsResponse>
-  private listeners: LazyNotificationListener[] = []
-  private currentFetch: Promise<void> | undefined
-
-  constructor({ id, load, filters = {} }: ConstructorParams) {
-    this.id = id
-    this.load = load
-    this.filters = filters
-  }
-
-  private notify() {
-    const hasMore = this.hasMore()
-    this.listeners.forEach(l => l(this.items, hasMore))
-  }
-
-  async #loadMore(reset = false): Promise<void> {
-    try {
-      const result = await this.load({ ...this.filters, page: this.page + 1 })
-      if (reset) {
-        this.items = []
-        this.total = 0
-      }
-      // we can't have items with the same id: this can happen if new notifications have been created after the first page was loaded.
-      this.items = uniqBy([...this.items, ...result.items], 'id')
-      // we can't keep loading more if we already loaded every item or if the API returned an empty list.
-      this.total = result.items.length ? (this.total || result.total) : this.items.length
-      this.page++
-      this.notify()
-    } finally {
-      this.currentFetch = undefined
-    }
-  }
-
-  async applyFilters(filters: LoadNotificationsFilters) {
-    try {
-      await this.currentFetch
-    } catch {
-      /* empty: this error will be treated by the function who actually triggered `currentFetch`. We just need to make sure we wait until 
-      it ends before making new requests. */
-    }
-    const prevPage = this.page
-    const prevFilters = this.filters
-    this.filters = filters
-    this.page = -1
-    try {
-      
-      this.currentFetch = this.#loadMore(true)
-      await this.currentFetch
-    } catch (error) {
-      this.filters = prevFilters
-      this.page = prevPage
-      throw error
-    }
-  }
-
-  loadMore() {
-    this.currentFetch ??= this.#loadMore()
-    return this.currentFetch
-  }
-
-  hasMore() {
-    return this.items.length < this.total
-  }
-
-  subscribe(listener: LazyNotificationListener) {
-    this.listeners.push(listener)
-    return () => {
-      pull(this.listeners, listener)
-    }
-  }
-
-  update(readStatusMap: Map<string, boolean>) {
-    this.items.forEach(i => i.committed = readStatusMap.get(i.id) ?? i.committed)
-    if (this.filters.committed !== undefined) {
-      this.items = this.items.filter(i => i.committed === this.filters.committed)
-      // if the filtered list has one item or less, we update the list with the backend so it can show more items.
-      // we can't use loadMore in this case because the page 2 would now skip some items. We'd need the backend to implement a cursor
-      // interface.
-      if (this.items.length <= 1) this.applyFilters(this.filters)
-    }
-    this.notify()
-  }
-
-  mute() {
-    this.listeners = []
-  }
-}
+import { pull, uniqBy } from 'lodash'
+import { GetTenantNotificationsResponse, ResponseModelGetTenantNotificationsResponse } from '../../notifications'
+import { LazyNotificationListener, LoadNotificationsFilters, LoadNotificationsOptions } from './types'
+
+interface ConstructorParams {
+  id: number,
+  load: (options: LoadNotificationsOptions) => Promise<ResponseModelGetTenantNotificationsResponse>,
+  filters?: LoadNotificationsFilters,
+}
+
+export class LazyNotificationList {
+  readonly id: number
+  items: GetTenantNotificationsResponse[] = []
+  private page = -1
+  private total = 0
+  private filters: LoadNotificationsFilters
+  private readonly load: (options: LoadNotificationsOptions) => Promise<ResponseModelGetTenantNotificationsResponse>
+  private listeners: LazyNotificationListener[] = []
+  private currentFetch: Promise<void> | undefined
+
+  constructor({ id, load, filters = {} }: ConstructorParams) {
+    this.id = id
+    this.load = load
+    this.filters = filters
+  }
+
+  private notify() {
+    const hasMore = this.hasMore()
+    this.listeners.forEach(l => l(this.items, hasMore))
+  }
+
+  async #loadMore(reset = false): Promise<void> {
+    try {
+      const result = await this.load({ ...this.filters, page: this.page + 1 })
+      if (reset) {
+        this.items = []
+        this.total = 0
+      }
+      // we can't have items with the same id: this can happen if new notifications have been created after the first page was loaded.
+      this.items = uniqBy([...this.items, ...result.items], 'id')
+      // we can't keep loading more if we already loaded every item or if the API returned an empty list.
+      this.total = result.items.length ? (this.total || result.total) : this.items.length
+      this.page++
+      this.notify()
+    } finally {
+      this.currentFetch = undefined
+    }
+  }
+
+  async applyFilters(filters: LoadNotificationsFilters) {
+    try {
+      await this.currentFetch
+    } catch {
+      /* empty: this error will be treated by the function who actually triggered `currentFetch`. We just need to make sure we wait until 
+      it ends before making new requests. */
+    }
+    const prevPage = this.page
+    const prevFilters = this.filters
+    this.filters = filters
+    this.page = -1
+    try {
+      
+      this.currentFetch = this.#loadMore(true)
+      await this.currentFetch
+    } catch (error) {
+      this.filters = prevFilters
+      this.page = prevPage
+      throw error
+    }
+  }
+
+  loadMore() {
+    this.currentFetch ??= this.#loadMore()
+    return this.currentFetch
+  }
+
+  hasMore() {
+    return this.items.length < this.total
+  }
+
+  subscribe(listener: LazyNotificationListener) {
+    this.listeners.push(listener)
+    return () => {
+      pull(this.listeners, listener)
+    }
+  }
+
+  update(readStatusMap: Map<string, boolean>) {
+    this.items.forEach(i => i.committed = readStatusMap.get(i.id) ?? i.committed)
+    if (this.filters.committed !== undefined) {
+      this.items = this.items.filter(i => i.committed === this.filters.committed)
+      // if the filtered list has one item or less, we update the list with the backend so it can show more items.
+      // we can't use loadMore in this case because the page 2 would now skip some items. We'd need the backend to implement a cursor
+      // interface.
+      if (this.items.length <= 1) this.applyFilters(this.filters)
+    }
+    this.notify()
+  }
+
+  mute() {
+    this.listeners = []
+  }
+}