Skip to content

Commit

Permalink
Add hostname to the breadcrumb
Browse files Browse the repository at this point in the history 
Co-authored-by: Jelle van der Waa <[email protected]>
  • Loading branch information
@allisonkarlitskaya @jelly
allisonkarlitskaya and jelly committed Feb 12, 2024
1 parent 5573753 commit af23853
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 19 deletions.
27 changes: 27 additions & 0 deletions src/cockpit.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,33 @@ declare module 'cockpit' {

export const location: Location;

/* === cockpit.dbus ========================== */

interface DBusProxyEvents extends EventMap {
changed(changes: { [property: string]: unknown }): void;
}

interface DBusProxy extends EventSource<DBusProxyEvents> {
valid: boolean;
[property: string]: unknown;
}

interface DBusOptions {
bus?: string;
address?: string;
superuser?: "require" | "try";
track?: boolean;
}

interface DBusClient {
readonly unique_name: string;
readonly options: DBusOptions;
proxy(interface: string, path: string, options?: { watch?: boolean }): DBusProxy;
close(): void;
}

function dbus(name: string | null, options?: DBusOptions): DBusClient;

/* === cockpit.file ========================== */

interface FileSyntaxObject<T, B> {
Expand Down
47 changes: 38 additions & 9 deletions src/navigator-breadcrumbs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,57 @@
*/
import cockpit from "cockpit";
import React from "react";
import { HddIcon } from "@patternfly/react-icons";

import { Button, Flex, PageBreadcrumb } from "@patternfly/react-core";

function useHostname() {
const [hostname, setHostname] = React.useState<string | null>(null);

React.useEffect(() => {
const client = cockpit.dbus('org.freedesktop.hostname1');
const hostname1 = client.proxy('org.freedesktop.hostname1', '/org/freedesktop/hostname1');

function changed() {
if (hostname1.valid && typeof hostname1.Hostname === 'string') {
setHostname(hostname1.Hostname);
}
}

hostname1.addEventListener("changed", changed);
return () => {
hostname1.removeEventListener("changed", changed);
client.close();
};
}, []);

return hostname;
}

export function NavigatorBreadcrumbs({ path }: { path: string[] }) {
const hostname = useHostname();

function navigate(n_parts: number) {
cockpit.location.go("/", { path: encodeURIComponent(path.slice(0, n_parts).join("/")) });
}

const fullPath = path.slice(1);
fullPath.unshift(hostname || "server");

return (
<PageBreadcrumb stickyOnBreakpoint={{ default: "top" }}>
<Flex spaceItems={{ default: "spaceItemsXs" }}>
{path.map((dir, i) => {
{fullPath.map((dir, i) => {
return (
<React.Fragment key={dir || "/"}>
{i !== path.length - 1 &&
<Button
variant="link" onClick={() => { navigate(i + 1) }}
key={dir} className="breadcrumb-button"
>
{dir || "/"}
</Button>}
{i === path.length - 1 && <p className="last-breadcrumb-button">{dir || "/"}</p>}
<Button
isDisabled={i === path.length - 1}
icon={i === 0 ? <HddIcon /> : null}
variant="link" onClick={() => { navigate(i + 1) }}
key={dir} className="breadcrumb-button"
>
{dir || "/"}
</Button>
{dir !== "" && <p key={i}>/</p>}
</React.Fragment>
);
Expand Down
24 changes: 14 additions & 10 deletions test/check-application
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ class TestNavigator(testlib.MachineCase):
select_entry = f"{selector} ul button:contains('{value}')"
b.click(select_entry)

def last_breadcrumb_sel(self):
return ".pf-v5-c-page__main-breadcrumb > div > button:last-of-type"

def delete_item(self, b, filetype, filename, expect_success=True):
b.click(f"[data-item='{filename}']")
b.click("#dropdown-menu")
Expand Down Expand Up @@ -161,14 +164,15 @@ class TestNavigator(testlib.MachineCase):

self.enter_navigator()

b.wait_text(".breadcrumb-button:nth-of-type(1)", "/")
hostname = m.execute("hostname").strip()
b.wait_text(".breadcrumb-button:nth-of-type(1)", hostname)
b.wait_text(".breadcrumb-button:nth-of-type(2)", "home")
b.wait_text(".last-breadcrumb-button", "admin")
b.wait_text(".breadcrumb-button:nth-of-type(3)", "admin")

# clicking on the home button should take us to the home directory
b.click(".breadcrumb-button:nth-of-type(2)")
b.wait_not_present(".breadcrumb-button:nth-of-type(2)")
b.wait_text(".last-breadcrumb-button", "home")
b.wait_visible(".breadcrumb-button:nth-of-type(2):disabled")
b.wait_text(".breadcrumb-button:nth-of-type(2)", "home")
b.wait_visible("[data-item='admin']")

# show folder info in sidebar
Expand All @@ -178,7 +182,7 @@ class TestNavigator(testlib.MachineCase):
# double-clicking on a directory should take us into it
b.mouse("[data-item='admin']", "dblclick")
b.wait_not_present("[data-item='admin']")
b.wait_text(".last-breadcrumb-button", "admin")
b.wait_text(".pf-v5-c-page__main-breadcrumb > div > button:last-of-type", "admin")

# navigating into a directory resets the sidebar
b.wait_in_text("#sidebar-card-header", "admin")
Expand All @@ -192,7 +196,7 @@ class TestNavigator(testlib.MachineCase):
b.mouse("[data-item='newdir2']", "dblclick")
b.wait_not_present("[data-item='newdir']")
b.click(".breadcrumb-button:nth-of-type(2)")
b.wait_text(".last-breadcrumb-button", "home")
b.wait_text(".pf-v5-c-page__main-breadcrumb > div > button:last-of-type", "home")
b.wait_visible("[data-item='admin']")
# navigate back
b.eval_js("window.history.back()")
Expand All @@ -208,16 +212,16 @@ class TestNavigator(testlib.MachineCase):
b.eval_js("window.history.forward()")
b.wait_in_text("#sidebar-card-header", "newdir")
b.wait_not_present("[data-item='admin']")
b.wait_text(".last-breadcrumb-button", "newdir")
b.wait_text(".pf-v5-c-page__main-breadcrumb > div > button:last-of-type", "newdir")
b.eval_js("window.history.forward()")
b.wait_in_text("#sidebar-card-header", "newdir2")
b.wait_not_present("[data-item='newdir']")
b.wait_text(".last-breadcrumb-button", "newdir2")
b.wait_text(".pf-v5-c-page__main-breadcrumb > div > button:last-of-type", "newdir2")
b.eval_js("window.history.forward()")
b.click("#navigator-card-body") # unselect
b.wait_in_text("#sidebar-card-header", "home")
b.wait_not_present("[data-item='newdir']")
b.wait_text(".last-breadcrumb-button", "home")
b.wait_text(".pf-v5-c-page__main-breadcrumb > div > button:last-of-type", "home")
b.wait_visible("[data-item='admin']")

def testSorting(self):
Expand Down Expand Up @@ -479,7 +483,7 @@ class TestNavigator(testlib.MachineCase):
b.set_input_text("#rename-item-input", "newdir2")
b.click("button.pf-m-primary")
b.wait_in_text("#sidebar-card-header", "newdir2")
b.wait_text(".last-breadcrumb-button", "newdir2")
b.wait_text(self.last_breadcrumb_sel(), "newdir2")

# Go back to home folder
b.click(".breadcrumb-button:nth-of-type(3)")
Expand Down

0 comments on commit af23853

Please sign in to comment.