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

Show app config navbar for Embedded Cluster #5084

Closed
wants to merge 6 commits into from
Closed

Show app config navbar for Embedded Cluster #5084

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dca8107
remove isEC check for app config navbar
miaawong Jan 7, 2025
d83e979
add initial app install check for app config navbar
miaawong Jan 7, 2025
7c1c4cc
f
miaawong Jan 7, 2025
d35b420
Merge branch 'main' into miawong/fix-app-config-navbar
laverya Jan 8, 2025
465ce1e
Merge branch 'main' into miawong/fix-app-config-navbar
laverya Jan 8, 2025
932376b
fix logic
miaawong Jan 10, 2025
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
140 changes: 72 additions & 68 deletions web/src/features/AppConfig/components/AppConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -783,61 +783,65 @@ class AppConfig extends Component<Props, State> {
</div>
<div className="flex flex1 tw-mb-10 tw-mt-8 tw-flex tw-flex-col tw-gap-4 card-bg">
<div className="tw-flex tw-justify-center" style={{ gap: "20px" }}>
{!this.props.isEmbeddedCluster && (
<div
id="configSidebarWrapper"
className="config-sidebar-wrapper card-bg clickable"
>
{configGroups?.map((group, i) => {
if (
group.title === "" ||
group.title.length === 0 ||
group.hidden ||
group.when === "false"
) {
return;
}
return (
<div
key={`${i}-${group.name}-${group.title}`}
className={`side-nav-group ${
this.state.activeGroups.includes(group.name) ||
group.hasError
? "group-open"
: ""
}`}
id={`config-group-nav-${group.name}`}
>
<div
className="flex alignItems--center"
onClick={() => this.toggleActiveGroups(group.name)}
>
<div className="u-lineHeight--normal group-title u-fontSize--normal">
{group.title}
</div>
{/* adding the arrow-down classes, will rotate the icon when clicked */}
<Icon
icon="down-arrow"
className="darkGray-color clickable flex-auto u-marginLeft--5 arrow-down"
size={12}
style={{}}
color={""}
disableFill={false}
removeInlineStyle={false}
/>
</div>
{group.items ? (
<div className="side-nav-items">
{group.items
?.filter((item) => item.type !== "label")
?.map((item, j) => {
const hash = this.props.location.hash.slice(1);
if (item.hidden || item.when === "false") {
return;
}
return (
<a
className={`u-fontSize--normal u-lineHeight--normal
{/* show the config sidebar only if the app is not initially installed or if it is inital install and the cluster is not EC*/}
{!Utilities.isInitialAppInstall(app) ||
(Utilities.isInitialAppInstall(app) &&
!this.props.isEmbeddedCluster && (
<div
id="configSidebarWrapper"
className="config-sidebar-wrapper card-bg clickable"
>
{configGroups?.map((group, i) => {
if (
group.title === "" ||
group.title.length === 0 ||
group.hidden ||
group.when === "false"
) {
return;
}
return (
<div
key={`${i}-${group.name}-${group.title}`}
className={`side-nav-group ${
this.state.activeGroups.includes(group.name) ||
group.hasError
? "group-open"
: ""
}`}
id={`config-group-nav-${group.name}`}
>
<div
className="flex alignItems--center"
onClick={() => this.toggleActiveGroups(group.name)}
>
<div className="u-lineHeight--normal group-title u-fontSize--normal">
{group.title}
</div>
{/* adding the arrow-down classes, will rotate the icon when clicked */}
<Icon
icon="down-arrow"
className="darkGray-color clickable flex-auto u-marginLeft--5 arrow-down"
size={12}
style={{}}
color={""}
disableFill={false}
removeInlineStyle={false}
/>
</div>
{group.items ? (
<div className="side-nav-items">
{group.items
?.filter((item) => item.type !== "label")
?.map((item, j) => {
const hash =
this.props.location.hash.slice(1);
if (item.hidden || item.when === "false") {
return;
}
return (
<a
className={`u-fontSize--normal u-lineHeight--normal
${
item.validationError || item.error
? "has-error"
Expand All @@ -848,20 +852,20 @@ class AppConfig extends Component<Props, State> {
? "active-item"
: ""
}`}
href={`#${item.name}-group`}
key={`${j}-${item.name}-${item.title}`}
>
{item.title}
</a>
);
})}
href={`#${item.name}-group`}
key={`${j}-${item.name}-${item.title}`}
>
{item.title}
</a>
);
})}
</div>
) : null}
</div>
) : null}
</div>
);
})}
</div>
)}
);
})}
</div>
))}
<div className="ConfigArea--wrapper !tw-pt-0">
<ConfigInfo
app={app}
Expand Down
Loading