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

[Enhancement] #848 increase column width and page size #934

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

[Enhancement] #848 increase column width and page size #934

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f419eba
increased width for indices index column
kohinoor98 Nov 16, 2023
b262a01
changing page size options for indices page
kohinoor98 Nov 16, 2023
e84dd3f
snapshot changes
kohinoor98 Nov 16, 2023
05ce5c0
Merge branch 'main' into #848_inc_width_row_count
bowenlan-amzn Nov 16, 2023
c2763be
Merge branch 'main' into #848_inc_width_row_count
kohinoor98 Nov 21, 2023
65a68ab
migrating to DataGrid
kohinoor98 Jan 6, 2024
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
4 changes: 2 additions & 2 deletions public/pages/Indices/containers/Indices/Indices.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
import IndexControls from "../../components/IndexControls";
import IndexEmptyPrompt from "../../components/IndexEmptyPrompt";
import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS, indicesColumns } from "../../utils/constants";
import { DEFAULT_PAGE_SIZE_OPTIONS_INDICES, DEFAULT_QUERY_PARAMS, indicesColumns } from "../../utils/constants";
import IndexService from "../../../../services/IndexService";
import CommonService from "../../../../services/CommonService";
import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
Expand Down Expand Up @@ -214,7 +214,7 @@ export default class Indices extends Component<IndicesProps, IndicesState> {
const pagination: Pagination = {
pageIndex: page,
pageSize: size,
pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS_INDICES,
totalItemCount: totalIndices,
};

Expand Down
2 changes: 1 addition & 1 deletion public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ exports[`<Indices /> spec renders the component 1`] = `
data-test-subj="tableHeaderCell_index_0"
role="columnheader"
scope="col"
style="width: 250px;"
style="width: 320px;"
>
<button
class="euiTableHeaderButton euiTableHeaderButton-isSorted"
Expand Down
3 changes: 2 additions & 1 deletion public/pages/Indices/utils/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const renderNumber = (value) => {
};

export const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
export const DEFAULT_PAGE_SIZE_OPTIONS_INDICES = [10, 20, 50, 100, 500];
Copy link
Member

Choose a reason for hiding this comment

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

Can you add unit test for this pagination logic


export const DEFAULT_QUERY_PARAMS = {
from: 0,
Expand Down Expand Up @@ -45,7 +46,7 @@ const getColumns = (props: IColumnOptions): EuiTableFieldDataColumnType<ManagedC
sortable: true,
truncateText: false,
textOnly: true,
width: "250px",
width: "320px",
Copy link
Member

Choose a reason for hiding this comment

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

Would it be possible to let user drag the width of our table?
Currently although the text is capped, I remember user can hover on it and see the name which is fine.

Adding width here is not the best because people may have very long index name 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@bowenlan-amzn Based on this I will go ahead and make the switch to the Data Grid component

Copy link
Member

Choose a reason for hiding this comment

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

Great, @kamingleung is our UX expert and thanks him for guiding here!

render: (index: string) => {
return <IndexDetail {...props} index={index} />;
},
Expand Down
4 changes: 1 addition & 3 deletions ...ontainers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,7 @@ HTMLCollection [
>
<caption
class="euiScreenReaderOnly euiTableCaption"
>
This table contains 1 rows out of 1 rows; Page 1 of 1.
</caption>
/>
<thead>
<tr>
<th
Expand Down
Loading