diff --git a/src/extensions/renderer-api/components.ts b/src/extensions/renderer-api/components.ts index 8958235f80..c051ce13e3 100644 --- a/src/extensions/renderer-api/components.ts +++ b/src/extensions/renderer-api/components.ts @@ -17,6 +17,7 @@ export * from "../../renderer/components/input/input" export * from "../../renderer/components/icon" export * from "../../renderer/components/tooltip" export * from "../../renderer/components/tabs" +export * from "../../renderer/components/table" export * from "../../renderer/components/badge" export * from "../../renderer/components/drawer" export * from "../../renderer/components/dialog" @@ -29,8 +30,6 @@ export * from "../../renderer/components/stepper" // kube helpers export * from "../../renderer/components/kube-object" -export * from "../../renderer/components/kube-object/kube-object-meta" -export * from "../../renderer/components/kube-object/kube-object-list-layout"; export * from "../../renderer/components/+events/kube-event-details" // specific exports diff --git a/src/renderer/components/+custom-resources/crd-resources.tsx b/src/renderer/components/+custom-resources/crd-resources.tsx index 26c8c17e5c..3a7d726b59 100644 --- a/src/renderer/components/+custom-resources/crd-resources.tsx +++ b/src/renderer/components/+custom-resources/crd-resources.tsx @@ -10,7 +10,7 @@ import { KubeObject } from "../../api/kube-object"; import { ICRDRouteParams } from "./crd.route"; import { autorun, computed } from "mobx"; import { crdStore } from "./crd.store"; -import { SortingCallback } from "../table"; +import { TableSortCallback } from "../table"; import { apiManager } from "../../api/api-manager"; interface Props extends RouteComponentProps { @@ -50,7 +50,7 @@ export class CrdResources extends React.Component { if (!crd) return null; const isNamespaced = crd.isNamespaced(); const extraColumns = crd.getPrinterColumns(false); // Cols with priority bigger than 0 are shown in details - const sortingCallbacks: { [sortBy: string]: SortingCallback } = { + const sortingCallbacks: { [sortBy: string]: TableSortCallback } = { [sortBy.name]: (item: KubeObject) => item.getName(), [sortBy.namespace]: (item: KubeObject) => item.getNs(), [sortBy.age]: (item: KubeObject) => item.metadata.creationTimestamp, diff --git a/src/renderer/components/item-object-list/item-list-layout.tsx b/src/renderer/components/item-object-list/item-list-layout.tsx index efab4ce372..57a2b9d55c 100644 --- a/src/renderer/components/item-object-list/item-list-layout.tsx +++ b/src/renderer/components/item-object-list/item-list-layout.tsx @@ -6,7 +6,7 @@ import { computed, observable, reaction, toJS, when } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { Plural, Trans } from "@lingui/macro"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; -import { SortingCallback, Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps } from "../table"; +import { TableSortCallback, Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps } from "../table"; import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, prevDefault, stopPropagation } from "../../utils"; import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons"; import { NoItems } from "../no-items"; @@ -52,7 +52,7 @@ export interface ItemListLayoutProps { isSelectable?: boolean; // show checkbox in rows for selecting items isSearchable?: boolean; // apply search-filter & add search-input copyClassNameFromHeadCells?: boolean; - sortingCallbacks?: { [sortBy: string]: SortingCallback }; + sortingCallbacks?: { [sortBy: string]: TableSortCallback }; tableProps?: Partial; // low-level table configuration renderTableHeader: TableCellProps[] | null; renderTableContents: (item: T) => (ReactNode | TableCellProps)[]; diff --git a/src/renderer/components/kube-object/index.ts b/src/renderer/components/kube-object/index.ts index b518226110..b90fafab0c 100644 --- a/src/renderer/components/kube-object/index.ts +++ b/src/renderer/components/kube-object/index.ts @@ -1,3 +1,4 @@ export * from "./kube-object-details" export * from "./kube-object-list-layout" export * from "./kube-object-menu" +export * from "./kube-object-meta" diff --git a/src/renderer/components/kube-object/kube-object-details.tsx b/src/renderer/components/kube-object/kube-object-details.tsx index 2e690c2db3..89de7ed5da 100644 --- a/src/renderer/components/kube-object/kube-object-details.tsx +++ b/src/renderer/components/kube-object/kube-object-details.tsx @@ -11,7 +11,7 @@ import { Spinner } from "../spinner"; import { apiManager } from "../../api/api-manager"; import { crdStore } from "../+custom-resources/crd.store"; import { CrdResourceDetails } from "../+custom-resources"; -import { KubeObjectMenu } from "./kube-object-menu" +import { KubeObjectMenu } from "./kube-object-menu" import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry"; export interface KubeObjectDetailsProps { diff --git a/src/renderer/components/notifications/index.ts b/src/renderer/components/notifications/index.ts index fea95e9bfe..8a98afb624 100644 --- a/src/renderer/components/notifications/index.ts +++ b/src/renderer/components/notifications/index.ts @@ -1 +1,2 @@ export * from './notifications' +export * from './notifications.store' diff --git a/src/renderer/components/notifications/notifications.store.ts b/src/renderer/components/notifications/notifications.store.ts index 1873ae91a4..075f28b9d5 100644 --- a/src/renderer/components/notifications/notifications.store.ts +++ b/src/renderer/components/notifications/notifications.store.ts @@ -5,8 +5,8 @@ import isObject from "lodash/isObject" import uniqueId from "lodash/uniqueId"; import { JsonApiErrorParsed } from "../../api/json-api"; -export type IMessageId = string | number; -export type IMessage = React.ReactNode | React.ReactNode[] | JsonApiErrorParsed; +export type NotificationId = string | number; +export type NotificationMessage = React.ReactNode | React.ReactNode[] | JsonApiErrorParsed; export enum NotificationStatus { OK = "ok", @@ -14,20 +14,20 @@ export enum NotificationStatus { INFO = "info", } -export interface INotification { - id?: IMessageId; - message: IMessage; +export interface Notification { + id?: NotificationId; + message: NotificationMessage; status?: NotificationStatus; timeout?: number; // auto-hiding timeout in milliseconds, 0 = no hide } @autobind() export class NotificationsStore { - public notifications = observable([], { deep: false }); + public notifications = observable([], { deep: false }); - protected autoHideTimers = new Map(); + protected autoHideTimers = new Map(); - addAutoHideTimer(notification: INotification) { + addAutoHideTimer(notification: Notification) { this.removeAutoHideTimer(notification); const { id, timeout } = notification; if (timeout) { @@ -36,7 +36,7 @@ export class NotificationsStore { } } - removeAutoHideTimer(notification: INotification) { + removeAutoHideTimer(notification: Notification) { const { id } = notification; if (this.autoHideTimers.has(id)) { clearTimeout(this.autoHideTimers.get(id)); @@ -45,7 +45,7 @@ export class NotificationsStore { } @action - add(notification: INotification) { + add(notification: Notification) { if (!notification.id) { notification.id = uniqueId("notification_"); } @@ -56,11 +56,11 @@ export class NotificationsStore { } @action - remove(itemOrId: IMessageId | INotification) { + remove(itemOrId: NotificationId | Notification) { if (!isObject(itemOrId)) { itemOrId = this.notifications.find(item => item.id === itemOrId); } - return this.notifications.remove(itemOrId as INotification); + return this.notifications.remove(itemOrId as Notification); } } diff --git a/src/renderer/components/notifications/notifications.tsx b/src/renderer/components/notifications/notifications.tsx index 35c741505c..a98b77ade3 100644 --- a/src/renderer/components/notifications/notifications.tsx +++ b/src/renderer/components/notifications/notifications.tsx @@ -5,7 +5,7 @@ import { reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react" import { JsonApiErrorParsed } from "../../api/json-api"; import { cssNames, prevDefault } from "../../utils"; -import { IMessage, INotification, notificationsStore, NotificationStatus } from "./notifications.store"; +import { NotificationMessage, Notification, notificationsStore, NotificationStatus } from "./notifications.store"; import { Animate } from "../animate"; import { Icon } from "../icon" @@ -13,7 +13,7 @@ import { Icon } from "../icon" export class Notifications extends React.Component { public elem: HTMLElement; - static ok(message: IMessage) { + static ok(message: NotificationMessage) { notificationsStore.add({ message: message, timeout: 2500, @@ -21,7 +21,7 @@ export class Notifications extends React.Component { }) } - static error(message: IMessage) { + static error(message: NotificationMessage) { notificationsStore.add({ message: message, timeout: 10000, @@ -29,7 +29,7 @@ export class Notifications extends React.Component { }); } - static info(message: IMessage, customOpts: Partial = {}) { + static info(message: NotificationMessage, customOpts: Partial = {}) { return notificationsStore.add({ status: NotificationStatus.INFO, timeout: 0, @@ -56,7 +56,7 @@ export class Notifications extends React.Component { }) } - getMessage(notification: INotification) { + getMessage(notification: Notification) { let { message } = notification; if (message instanceof JsonApiErrorParsed) { message = message.toString(); diff --git a/src/renderer/components/table/table-cell.tsx b/src/renderer/components/table/table-cell.tsx index ebd82203c0..a56f144bc0 100644 --- a/src/renderer/components/table/table-cell.tsx +++ b/src/renderer/components/table/table-cell.tsx @@ -1,5 +1,5 @@ import "./table-cell.scss"; -import type { SortBy, SortParams } from "./table"; +import type { TableSortBy, TableSortParams } from "./table"; import React, { ReactNode } from "react"; import { autobind, cssNames } from "../../utils"; @@ -13,9 +13,9 @@ export interface TableCellProps extends React.DOMAttributes { title?: ReactNode; checkbox?: boolean; // render cell with a checkbox isChecked?: boolean; // mark checkbox as checked or not - sortBy?: SortBy; // column name, must be same as key in sortable object - _sorting?: Partial; //
sorting state, don't use this prop outside (!) - _sort?(sortBy: SortBy): void; //
sort function, don't use this prop outside (!) + sortBy?: TableSortBy; // column name, must be same as key in sortable object
+ _sorting?: Partial; //
sorting state, don't use this prop outside (!) + _sort?(sortBy: TableSortBy): void; //
sort function, don't use this prop outside (!) _nowrap?: boolean; // indicator, might come from parent , don't use this prop outside (!) } diff --git a/src/renderer/components/table/table.tsx b/src/renderer/components/table/table.tsx index 6e09748499..540e05d818 100644 --- a/src/renderer/components/table/table.tsx +++ b/src/renderer/components/table/table.tsx @@ -14,10 +14,10 @@ import { ItemObject } from "../../item.store"; // todo: refactor + decouple search from location -export type SortBy = string; -export type OrderBy = "asc" | "desc" | string; -export type SortParams = { sortBy: SortBy; orderBy: OrderBy } -export type SortingCallback = (data: D) => string | number | (string | number)[]; +export type TableSortBy = string; +export type TableOrderBy = "asc" | "desc" | string; +export type TableSortParams = { sortBy: TableSortBy; orderBy: TableOrderBy } +export type TableSortCallback = (data: D) => string | number | (string | number)[]; export interface TableProps extends React.DOMAttributes { items?: ItemObject[]; // Raw items data @@ -29,11 +29,11 @@ export interface TableProps extends React.DOMAttributes { sortable?: { // Define sortable callbacks for every column in // @sortItem argument in the callback is an object, provided in - [sortBy: string]: SortingCallback; + [sortBy: string]: TableSortCallback; }; sortSyncWithUrl?: boolean; // sorting state is managed globally from url params - sortByDefault?: Partial; // default sorting params - onSort?: (params: SortParams) => void; // callback on sort change, default: global sync with url + sortByDefault?: Partial; // default sorting params + onSort?: (params: TableSortParams) => void; // callback on sort change, default: global sync with url noItems?: React.ReactNode; // Show no items state table list is empty selectedItemId?: string; // Allows to scroll list to selected item virtual?: boolean; // Use virtual list component to render only visible rows @@ -55,7 +55,7 @@ export class Table extends React.Component { @observable sortParamsLocal = this.props.sortByDefault; - @computed get sortParams(): Partial { + @computed get sortParams(): Partial { if (this.props.sortSyncWithUrl) { const sortBy = navigation.searchParams.get("sortBy") const orderBy = navigation.searchParams.get("orderBy") @@ -105,7 +105,7 @@ export class Table extends React.Component { } @autobind() - protected onSort(params: SortParams) { + protected onSort(params: TableSortParams) { const { sortSyncWithUrl, onSort } = this.props; if (sortSyncWithUrl) { setQueryParams(params) @@ -119,11 +119,11 @@ export class Table extends React.Component { } @autobind() - sort(colName: SortBy) { + sort(colName: TableSortBy) { const { sortBy, orderBy } = this.sortParams; const sameColumn = sortBy == colName; - const newSortBy: SortBy = colName; - const newOrderBy: OrderBy = (!orderBy || !sameColumn || orderBy === "desc") ? "asc" : "desc"; + const newSortBy: TableSortBy = colName; + const newOrderBy: TableOrderBy = (!orderBy || !sameColumn || orderBy === "desc") ? "asc" : "desc"; this.onSort({ sortBy: String(newSortBy), orderBy: newOrderBy,