Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding table package with injection tokens #7818

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open

Adding table package with injection tokens #7818

Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
007a017
Add table and add-remove buttons injection tokens
aleksfront Jun 1, 2023
471a515
Add table package.json
aleksfront Jun 1, 2023
6e6e540
Add table package tsconfig and webpack.config
aleksfront Jun 1, 2023
547722f
Add simple README
aleksfront Jun 1, 2023
a2cd784
Bump @ogre-tools/injectable version
aleksfront Jun 1, 2023
f9978f3
Use table from injection token
aleksfront Jun 1, 2023
c48b88e
Using AddOrRemoveButtons component from injection token
aleksfront Jun 1, 2023
60c4391
Creating tableComponentInjectable in open-lens
aleksfront Jun 1, 2023
c7f4d1c
Adding addRemoveButtonsInjectable
aleksfront Jun 1, 2023
9aae3ff
Adding @k8slens/table as dependencies to core and open-lens
aleksfront Jun 1, 2023
1855b2a
Create injectables in test-env also
aleksfront Jun 1, 2023
4173225
Remove "dev" command
aleksfront Jun 1, 2023
0f41556
Linter fixes
aleksfront Jun 1, 2023
2a629ff
Adding createTableStateInjectionToken
aleksfront Jun 2, 2023
365cf5c
Update package-lock.json
aleksfront Jun 2, 2023
71ebf6e
Add linkable command to core package
aleksfront Jun 2, 2023
da3946b
Adding tableStateInjectable and context
aleksfront Jun 2, 2023
4fa2cce
Using tableStateInjectable in content.tsx
aleksfront Jun 2, 2023
e4c4f54
Adding createTableStateInjectable
aleksfront Jun 2, 2023
0ac0157
Linter fixes
aleksfront Jun 2, 2023
c57c236
Merge branch 'master' into add-table-package
aleksfront Jun 2, 2023
d4edddf
Merge remote-tracking branch 'origin/master' into add-table-package
ixrock Jun 5, 2023
fc22241
Remove unused dev dependency from core
aleksfront Jun 6, 2023
3b17490
Changing paths for test-env injectables
aleksfront Jun 6, 2023
ddc1048
Adding TableDataColumn and TableDataRow types
aleksfront Jun 6, 2023
67370c1
Adding create-table-state.injectable.ts into test-env folder
aleksfront Jun 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 29 additions & 10 deletions packages/core/src/renderer/components/table/table-state.injectable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,27 @@ import type { TableDataContextValue } from "./table-data-context";
import type { CreateTableState } from "@k8slens/table";
import { createTableStateInjectionToken } from "@k8slens/table";

type TableDataColumn<DataItem = any> = object;
interface TableDataRow<DataItem = any> {
id: string;
data: DataItem;
index?: number;
className?: string;
}

interface TableDataColumn<DataItem = any> {
id: string;
title: React.ReactNode;
className?: string;
style?: React.CSSProperties;
size?: string;
minSize?: number;
resizable?: boolean;
draggable?: boolean;
sortable?: boolean;
renderValue?: (row: TableDataRow<DataItem>) => React.ReactNode;
sortValue?: (row: TableDataRow<DataItem>, col: TableDataColumn<DataItem>) => string | number;
searchValue?: (row: TableDataRow<DataItem>) => string;
}

export function createLensTableState<K extends KubeObject>({
tableId,
Expand All @@ -33,16 +53,15 @@ export function createLensTableState<K extends KubeObject>({
}: TableDataContextValue<K>, createState: CreateTableState) {
const headers = renderTableHeader as Required<TableCellProps>[];


let headingColumns: TableDataColumn<K>[] = headers.map(
let headingColumns: TableDataColumn[] = headers.map(
({ id: columnId, className, title }, index) => ({
id: columnId ?? className,
className,
resizable: !!columnId,
sortable: !!columnId,
draggable: !!columnId, // e.g. warning-icon column in pods
title,
renderValue(row: any, col: any) {
renderValue(row: TableDataRow) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be TableDataRow<K> otherwise you'll loose row.data typing (if provided in createLensTableState()

const content =
renderTableContents?.(row.data)[index] ??
contextColumns
Expand All @@ -57,13 +76,13 @@ export function createLensTableState<K extends KubeObject>({
return <div className={className}>{title}</div>;
}
},
sortValue(row: any, col: any) {
sortValue(row: TableDataRow, col: any) {
return sortingCallbacks?.[col.id]?.(row.data) as string;
},
}),
);

const checkboxColumn: TableDataColumn<K> = {
const checkboxColumn: TableDataColumn = {
id: "checkbox",
className: "checkbox",
draggable: false,
Expand All @@ -84,7 +103,7 @@ export function createLensTableState<K extends KubeObject>({
<div onClick={stopPropagation}>
<Checkbox
value={tableState.selectedRowsId.has(rowId)}
onChange={action((val, evt) => {
onChange={action(() => {
if (tableState.selectedRowsId.has(rowId)) {
tableState.selectedRowsId.delete(rowId);
} else {
Expand All @@ -97,7 +116,7 @@ export function createLensTableState<K extends KubeObject>({
},
};

const menuColumn: TableDataColumn<K> = {
const menuColumn: TableDataColumn = {
id: "menu",
className: "menu",
resizable: false,
Expand All @@ -118,7 +137,7 @@ export function createLensTableState<K extends KubeObject>({
<Checkbox
label={title ?? className}
value={!tableState.hiddenColumns.has(columnId)}
onChange={action((value, evt) => {
onChange={action(() => {
if (tableState.hiddenColumns.has(columnId)) {
tableState.hiddenColumns.delete(columnId);
} else {
Expand All @@ -131,7 +150,7 @@ export function createLensTableState<K extends KubeObject>({
</MenuActions>
);
},
renderValue(row: any, col: any) {
renderValue(row: any) {
return (
<div onClick={stopPropagation}>{renderItemMenu?.(row.data, store)}</div>
);
Expand Down