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

Jump to bottom

Update new header for Alias, Index Templates, Policy Managed Indices, Indexes and Transform Jobs #1124

Merged
merged 10 commits into from
Aug 20, 2024
Merged

Update new header for Alias, Index Templates, Policy Managed Indices, Indexes and Transform Jobs #1124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5620c30
wip: changes for new ui
tandonks Aug 12, 2024
5a87ced
New UI changes
tandonks Aug 14, 2024
892ece2
Header Changes
tandonks Aug 16, 2024
133c84b
New UI changes
tandonks Aug 16, 2024
05a5ee5
UTs handel
tandonks Aug 16, 2024
f795539
Header UI changes
tandonks Aug 16, 2024
4eac94d
Updated Change Policy Page
tandonks Aug 18, 2024
5f3cacd
Fixed bug in alias for new UI
tandonks Aug 18, 2024
b7606e0
Fixing a few bugs and addressing comments
tandonks Aug 19, 2024
1e6df0b
Fixing a few bugs in old UI
tandonks Aug 19, 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
5 changes: 3 additions & 2 deletions public/components/ContentPanel/ContentPanelActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,16 @@ interface ContentPanelActionsProps {
onClickModal: (onShow: (component: any, props: object) => void) => () => void;
};
}[];
size?: "s" | "m";
}

const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions }) => (
const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions, size }) => (
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
{actions.map(({ text, buttonProps = {}, flexItemProps = {}, modal = null, children }, index) => {
let button = children ? (
children
) : (
<EuiButton {...buttonProps} data-test-subj={`${text}Button`}>
<EuiButton {...buttonProps} data-test-subj={`${text}Button`} size={size ? size : "m"}>
Copy link
Member

@SuZhou-Joe SuZhou-Joe Aug 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Just size is good enough, m is the default value of EuiButton size I remember.

{text}
</EuiButton>
);
Expand Down
6 changes: 3 additions & 3 deletions public/components/FilterGroup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ export interface IFilterGroupProps {
options: { label: string }[];
value?: string[];
filterButtonProps?: EuiFilterButtonProps;
useNewUx?: boolean;
useNewUX?: boolean;
onChange?: (val: IFilterGroupProps["value"]) => void;
}

export default function FilterGroup({ options, value, filterButtonProps, useNewUx, onChange }: IFilterGroupProps) {
export default function FilterGroup({ options, value, filterButtonProps, onChange, useNewUX }: IFilterGroupProps) {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);

const onButtonClick = () => {
Expand All @@ -31,7 +31,7 @@ export default function FilterGroup({ options, value, filterButtonProps, useNewU
numFilters={options?.length}
hasActiveFilters={!!value?.length}
numActiveFilters={value?.length}
size={useNewUx ? "s" : undefined}
size={useNewUX ? "s" : undefined}
{...filterButtonProps}
/>
}
Expand Down
17 changes: 17 additions & 0 deletions public/containers/IndexDetail/IndexDetail.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,23 @@ import { browserServicesMock, coreServicesMock } from "../../../test/mocks";
import { ServicesContext } from "../../services";
import { CoreServicesContext } from "../../components/core_services";
import { CatIndex } from "../../../server/models/interfaces";
import { getApplication, getNavigationUI, getUISettings } from "../../services/Services";

jest.mock("../../services/Services", () => ({
...jest.requireActual("../../services/Services"),
getUISettings: jest.fn(),
getApplication: jest.fn(),
getNavigationUI: jest.fn(),
}));

beforeEach(() => {
(getUISettings as jest.Mock).mockReturnValue({
get: jest.fn().mockReturnValue(false), // or false, depending on your test case
});
(getApplication as jest.Mock).mockReturnValue({});

(getNavigationUI as jest.Mock).mockReturnValue({});
});

browserServicesMock.commonService.apiCaller = jest.fn(
async (payload): Promise<any> => {
Expand Down
17 changes: 17 additions & 0 deletions public/pages/Aliases/components/IndexControls/IndexControls.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,23 @@ import { render, waitFor } from "@testing-library/react";
// @ts-ignore
import userEvent from "@testing-library/user-event";
import IndexControls from "./IndexControls";
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";

jest.mock("../../../../services/Services", () => ({
...jest.requireActual("../../../../services/Services"),
getUISettings: jest.fn(),
getApplication: jest.fn(),
getNavigationUI: jest.fn(),
}));

beforeEach(() => {
(getUISettings as jest.Mock).mockReturnValue({
get: jest.fn().mockReturnValue(false), // or false, depending on your test case
});
(getApplication as jest.Mock).mockReturnValue({});

(getNavigationUI as jest.Mock).mockReturnValue({});
});

describe("<IndexControls /> spec", () => {
it("renders the component", async () => {
Expand Down
48 changes: 46 additions & 2 deletions public/pages/Aliases/components/IndexControls/IndexControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,23 @@

import React, { useEffect, useState } from "react";
import { EuiComboBox, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
import { ALIAS_STATUS_OPTIONS } from "../../../../utils/constants";
import { ALIAS_STATUS_OPTIONS, IndicesUpdateMode } from "../../../../utils/constants";
import { getUISettings } from "../../../../services/Services";
import AliasesActions from "../../containers/AliasActions";
import { IAlias } from "../../interface";
import { RouteComponentProps } from "react-router-dom";
import FilterGroup from "../../../../components/FilterGroup";

export interface SearchControlsProps {
value: {
search: string;
status: string;
selectedItems: IAlias[];
};
onSearchChange: (args: SearchControlsProps["value"]) => void;
onDelete: () => Promise<void>;
history: RouteComponentProps["history"];
onUpdateAlias: () => void;
}

export default function SearchControls(props: SearchControlsProps) {
Expand All @@ -28,7 +37,42 @@ export default function SearchControls(props: SearchControlsProps) {
useEffect(() => {
setState(props.value);
}, [props.value]);
return (

const uiSettings = getUISettings();
const useUpdatedUX = uiSettings.get("home:useNewHomePage");

return useUpdatedUX ? (
<EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
<EuiFlexItem>
<EuiFieldSearch
compressed
fullWidth
placeholder="Search"
value={state.search}
onChange={(e) => onChange("search", e.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem style={{ flexBasis: "100px" }} grow={false}>
<FilterGroup
filterButtonProps={{
children: "Status",
}}
onChange={(val) => onChange("status", (val || []).map((item) => item).join(","))}
value={state.status ? state.status.split(",").map((label) => label) : []}
options={ALIAS_STATUS_OPTIONS}
useNewUX={useUpdatedUX}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<AliasesActions
onUpdateAlias={props.onUpdateAlias}
selectedItems={props.value.selectedItems}
onDelete={props.onDelete}
history={props.history}
/>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
<EuiFlexItem>
<EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />
Expand Down
17 changes: 17 additions & 0 deletions public/pages/Aliases/containers/AliasActions/AliasActions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,23 @@ import { ServicesContext } from "../../../../services";
import { CoreServicesContext } from "../../../../components/core_services";
import { buildMockApiCallerForFlush, selectedAliases } from "../../../../containers/FlushIndexModal/FlushIndexModalTestHelper";
import { IAlias } from "../../interface";
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";

jest.mock("../../../../services/Services", () => ({
...jest.requireActual("../../../../services/Services"),
getUISettings: jest.fn(),
getApplication: jest.fn(),
getNavigationUI: jest.fn(),
}));

beforeEach(() => {
(getUISettings as jest.Mock).mockReturnValue({
get: jest.fn().mockReturnValue(false), // or false, depending on your test case
});
(getApplication as jest.Mock).mockReturnValue({});

(getNavigationUI as jest.Mock).mockReturnValue({});
});

function renderWithRouter(props: Omit<AliasesActionsProps, "history">) {
return {
Expand Down
7 changes: 6 additions & 1 deletion public/pages/Aliases/containers/AliasActions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import FlushIndexModal from "../../../../containers/FlushIndexModal";
import RefreshActionModal from "../../../../containers/RefreshAction";
import { IAlias } from "../../interface";
import { ROUTES, INDEX_OP_TARGET_TYPE } from "../../../../utils/constants";
import { getUISettings } from "../../../../services/Services";

export interface AliasesActionsProps {
selectedItems: IAlias[];
Expand Down Expand Up @@ -44,14 +45,18 @@ export default function AliasesActions(props: AliasesActionsProps) {
};

const renderKey = useMemo(() => Date.now(), [selectedItems]);
const uiSettings = getUISettings();
const useUpdatedUX = uiSettings.get("home:useNewHomePage");

const size = useUpdatedUX ? "s" : undefined;

return (
<>
<SimplePopover
data-test-subj="moreAction"
panelPaddingSize="none"
button={
<EuiButton iconType="arrowDown" iconSide="right">
<EuiButton iconType="arrowDown" iconSide="right" size={size}>
Actions
</EuiButton>
}
Expand Down
17 changes: 17 additions & 0 deletions public/pages/Aliases/containers/Aliases/Aliases.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,23 @@ import { ROUTES } from "../../../../utils/constants";
import { CoreServicesContext } from "../../../../components/core_services";
import userEvent from "@testing-library/user-event";
import { IAlias } from "../../interface";
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";

jest.mock("../../../../services/Services", () => ({
...jest.requireActual("../../../../services/Services"),
getUISettings: jest.fn(),
getApplication: jest.fn(),
getNavigationUI: jest.fn(),
}));

beforeEach(() => {
(getUISettings as jest.Mock).mockReturnValue({
get: jest.fn().mockReturnValue(false), // or false, depending on your test case
});
(getApplication as jest.Mock).mockReturnValue({});

(getNavigationUI as jest.Mock).mockReturnValue({});
});

function renderWithRouter() {
return {
Expand Down
Loading
Loading