Skip to content

Commit

Permalink
new page header update for index snapshot and repository pages
Browse files Browse the repository at this point in the history
Signed-off-by: Sandeep Kumawat <[email protected]>
  • Loading branch information
Sandeep Kumawat committed Aug 14, 2024
1 parent 8db8494 commit 0757416
Show file tree
Hide file tree
Showing 6 changed files with 312 additions and 81 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -578,11 +578,10 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
<h1>{isEdit ? "Edit" : "Create"} policy</h1>
</EuiTitle>
{subTitleText}
<EuiSpacer />
</>
)}

<EuiSpacer />

<ContentPanel title="Policy settings" titleSize="m">
<CustomLabel title="Policy name" />
<EuiFormRow isInvalid={!!policyIdError} error={policyIdError}>
Expand Down
86 changes: 83 additions & 3 deletions public/pages/Repositories/containers/Repositories/Repositories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EuiTableFieldDataColumnType,
EuiText,
EuiTextColor,
EuiButtonIcon,
} from "@elastic/eui";
import { getErrorMessage } from "../../../../utils/helpers";
import React, { Component, useContext } from "react";
Expand All @@ -27,6 +28,7 @@ import { truncateSpan } from "../../../Snapshots/helper";
import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";

interface RepositoriesProps extends RouteComponentProps, DataSourceMenuProperties {
snapshotManagementService: SnapshotManagementService;
Expand All @@ -44,6 +46,7 @@ interface RepositoriesState extends DataSourceMenuProperties {
editRepo: string | null;

isDeleteModalVisible: boolean;
useNewUX: boolean;
}

export class Repositories extends MDSEnabledComponent<RepositoriesProps, RepositoriesState> {
Expand All @@ -53,6 +56,8 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
constructor(props: RepositoriesProps) {
super(props);

const uiSettings = getUISettings();
const useNewUX = uiSettings.get("home:useNewHomePage");
this.state = {
...this.state,
repositories: [],
Expand All @@ -62,6 +67,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
isPopoverOpen: false,
editRepo: null,
isDeleteModalVisible: false,
useNewUX: useNewUX,
};

this.columns = [
Expand Down Expand Up @@ -93,7 +99,10 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
}

async componentDidMount() {
this.context.chrome.setBreadcrumbs([BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.REPOSITORIES]);
const breadCrumbs = this.state.useNewUX
? [BREADCRUMBS.SNAPSHOT_REPOSITORIES]
: [BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.REPOSITORIES];
this.context.chrome.setBreadcrumbs(breadCrumbs);
await this.getRepos();
}

Expand Down Expand Up @@ -194,7 +203,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
};

render() {
const { repositories, loading, selectedItems, showFlyout, isPopoverOpen, editRepo, isDeleteModalVisible } = this.state;
const { repositories, loading, selectedItems, showFlyout, isPopoverOpen, editRepo, isDeleteModalVisible, useNewUX } = this.state;
const popoverActionItems = [
<EuiContextMenuItem
key="Edit"
Expand Down Expand Up @@ -246,9 +255,45 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
</EuiButton>,
];

const renderToolsRight = () => {
return [
<EuiButtonIcon
iconType="refresh"
onClick={this.getRepos}
data-test-subj="refreshButton"
aria-label="refresh"
size="s"
display="base"
/>,
];
};

const renderToolsLeft = () => {
return [
<EuiButton
iconType="trash"
iconSide="left"
iconSize="s"
disabled={!selectedItems.length}
onClick={this.showDeleteModal}
data-test-subj="deleteButton"
aria-label="delete"
color="danger"
size="s"
minWidth={75}
>
Delete
</EuiButton>,
];
};

const search = {
toolsRight: useNewUX ? renderToolsRight() : undefined,
toolsLeft: useNewUX ? renderToolsLeft() : undefined,
box: {
placeholder: "Search repository",
compressed: useNewUX ? true : false,
increamental: true,
},
filters: [
{
Expand All @@ -273,9 +318,44 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
} else {
additionalWarning += " in the repository.";
}

const descriptionData = [
{
renderComponent: (
<EuiText size="s" color="subdued">
Repositories are remote storage locations used to store snapshots.
</EuiText>
),
},
];

const controlControlsData = [
{
id: "Create repository",
label: "Create repository",
iconType: "plus",
fill: true,
run: this.onClickCreate,
testId: "createRepo",
controlType: "button",
},
];

const { HeaderControl } = getNavigationUI();
const { setAppRightControls, setAppDescriptionControls } = getApplication();
const useTitle = useNewUX ? undefined : "Repositories";
const useActions = useNewUX ? undefined : actions;
const useSubTitleText = useNewUX ? undefined : subTitleText;

return (
<>
<ContentPanel title="Repositories" actions={actions} subTitleText={subTitleText}>
{useNewUX ? (
<>
<HeaderControl setMountPoint={setAppRightControls} controls={controlControlsData} />
<HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
</>
) : null}
<ContentPanel title={useTitle} actions={useActions} subTitleText={useSubTitleText}>
<EuiInMemoryTable
items={repositories}
itemId="id"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -442,11 +442,10 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
</>
)}

<EuiSpacer />

<ContentPanel title="Policy settings" titleSize="m">
<EuiFlexGrid columns={3}>
{policySettingItems.map((item) => (
Expand Down
Loading

0 comments on commit 0757416

Please sign in to comment.