Skip to content

Commit

Permalink
hide navbar options on initial embedded install (#4469)
Browse files Browse the repository at this point in the history 
* hide navbar options on initial embedded install

* unit tests for isInitialAppInstall utility

* fix test

* address initial feedback

* not an initial install if more than one pending version
  • Loading branch information
Craig O'Donnell authored Feb 27, 2024
1 parent 58f48c0 commit d3b1426
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 52 deletions.
115 changes: 63 additions & 52 deletions web/src/components/shared/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,11 @@ export class NavBar extends PureComponent<Props, State> {
licenseType = "";
}

let isInitialEmbeddedInstall = false;
if (isEmbeddedClusterEnabled && appsList.length > 0) {
isInitialEmbeddedInstall = Utilities.isInitialAppInstall(appsList[0]);
}

const isClusterScope =
this.props.location?.pathname.includes("/clusterscope");
return (
Expand Down Expand Up @@ -200,79 +205,85 @@ export class NavBar extends PureComponent<Props, State> {
</Link>
</div>
</div>
{Utilities.isLoggedIn() && appsList?.length > 0 && (
<div className="flex flex-auto left-items">
<div
className={classNames("NavItem u-position--relative flex", {
"is-active": selectedTab === "dashboard",
})}
>
<span
onClick={this.redirectToDashboard}
className="flex flex1 u-cursor--pointer text u-fontSize--normal u-fontWeight--medium flex-column justifyContent--center"
>
Application
</span>
</div>
{isGitOpsSupported && (
{Utilities.isLoggedIn() &&
appsList?.length > 0 &&
!isInitialEmbeddedInstall && (
<div className="flex flex-auto left-items">
<div
className={classNames("NavItem u-position--relative flex", {
"is-active": selectedTab === "gitops",
"is-active": selectedTab === "dashboard",
})}
>
<span
onClick={this.handleGoToGitOps}
onClick={this.redirectToDashboard}
className="flex flex1 u-cursor--pointer text u-fontSize--normal u-fontWeight--medium flex-column justifyContent--center"
>
GitOps
Application
</span>
</div>
)}
{(isKurlEnabled || isEmbeddedClusterEnabled) &&
location.pathname !== `${selectedApp?.slug}/cluster/manage` && (
{isGitOpsSupported && (
<div
className={classNames("NavItem u-position--relative flex", {
"is-active": selectedTab === "cluster_management",
"is-active": selectedTab === "gitops",
})}
>
<span
onClick={this.handleGoToClusterManagement}
onClick={this.handleGoToGitOps}
className="flex flex1 u-cursor--pointer text u-fontSize--normal u-fontWeight--medium flex-column justifyContent--center"
>
Cluster Management
GitOps
</span>
</div>
)}
{isSnapshotsSupported && (
<div
className={classNames("NavItem u-position--relative flex", {
"is-active": selectedTab === "snapshots",
})}
>
<span
onClick={this.handleGoToSnapshots}
className="flex flex1 u-cursor--pointer alignItems--center text u-fontSize--normal u-fontWeight--medium flex"
{(isKurlEnabled || isEmbeddedClusterEnabled) &&
location.pathname !==
`${selectedApp?.slug}/cluster/manage` && (
<div
className={classNames(
"NavItem u-position--relative flex",
{
"is-active": selectedTab === "cluster_management",
}
)}
>
<span
onClick={this.handleGoToClusterManagement}
className="flex flex1 u-cursor--pointer text u-fontSize--normal u-fontWeight--medium flex-column justifyContent--center"
>
Cluster Management
</span>
</div>
)}
{isSnapshotsSupported && (
<div
className={classNames("NavItem u-position--relative flex", {
"is-active": selectedTab === "snapshots",
})}
>
Snapshots
</span>
</div>
)}
{isIdentityServiceSupported && isKurlEnabled && (
<div
className={classNames("NavItem u-position--relative flex", {
"is-active": selectedTab === "access",
})}
>
<span
onClick={this.handleGoToAccess}
className="flex flex1 u-cursor--pointer alignItems--center text u-fontSize--normal u-fontWeight--medium flex"
<span
onClick={this.handleGoToSnapshots}
className="flex flex1 u-cursor--pointer alignItems--center text u-fontSize--normal u-fontWeight--medium flex"
>
Snapshots
</span>
</div>
)}
{isIdentityServiceSupported && isKurlEnabled && (
<div
className={classNames("NavItem u-position--relative flex", {
"is-active": selectedTab === "access",
})}
>
Access
</span>
</div>
)}
</div>
)}
<span
onClick={this.handleGoToAccess}
className="flex flex1 u-cursor--pointer alignItems--center text u-fontSize--normal u-fontWeight--medium flex"
>
Access
</span>
</div>
)}
</div>
)}
</div>
{Utilities.isLoggedIn() && (
<>
Expand Down
34 changes: 34 additions & 0 deletions web/src/utilities/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,40 @@ export const Utilities = {
}
},

isInitialAppInstall(app) {
if (!app) {
return true;
}

if (app.downstream?.currentVersion) {
// a version has already been deployed
return false;
}

if (!app.downstream?.pendingVersions?.length) {
// there's no version that's been deployed or is pending, so it's an initial install
return true;
}

if (app.downstream.pendingVersions.length > 1) {
// there's more than one pending version, so it's not an initial install
return false;
}

const firstPendingVersion = app.downstream.pendingVersions[0];
if (
firstPendingVersion.status === "pending_cluster_management" ||
firstPendingVersion.status === "pending_config" ||
firstPendingVersion.status === "pending_preflight" ||
firstPendingVersion.status === "pending_download"
) {
// the first pending version is still in the process of being installed
return true;
}

return false;
},

clusterState(state) {
switch (state) {
case "Waiting":
Expand Down
117 changes: 117 additions & 0 deletions web/src/utilities/utilities.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,121 @@ describe("Utilities", () => {
expect(Utilities.shouldShowClusterUpgradeModal(apps)).toBe(true);
});
});

describe("isInitialAppInstall", () => {
it("should return true if app is null", () => {
expect(Utilities.isInitialAppInstall(null)).toBe(true);
});

it("should return false if there is a current version", () => {
const app = {
downstream: {
currentVersion: {
status: "deployed",
},
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(false);
});

it("should return true if there is no pending versions", () => {
let app = {
downstream: {
pendingVersions: [],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(true);

app = {
downstream: {},
};
expect(Utilities.isInitialAppInstall(app)).toBe(true);
});

it("should return false if there is more than one pending version", () => {
const app = {
downstream: {
pendingVersions: [
{
status: "pending_config",
},
{
status: "pending_config",
},
],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(false);
});

it("should return true if first pending version has status `pending_cluster_management`, `pending_config`, `pending_preflight`, or `pending_download`", () => {
let app = {
downstream: {
pendingVersions: [
{
status: "pending_cluster_management",
},
],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(true);

app = {
downstream: {
pendingVersions: [
{
status: "pending_config",
},
],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(true);

app = {
downstream: {
pendingVersions: [
{
status: "pending_preflight",
},
],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(true);

app = {
downstream: {
pendingVersions: [
{
status: "pending_download",
},
],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(true);
});

it("should return false if first pending version does not have status `pending_cluster_management`, `pending_config`, `pending_preflight`, or `pending_download`", () => {
let app = {
downstream: {
pendingVersions: [
{
status: "pending",
},
],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(false);

app = {
downstream: {
pendingVersions: [
{
status: "unknown",
},
],
},
};
expect(Utilities.isInitialAppInstall(app)).toBe(false);
});
});
});

0 comments on commit d3b1426

Please sign in to comment.