Skip to content

Commit f56fdf1

Browse files
kshmidt-digmakshmidt-digma
authored
Hide Environments section in Web, show observability warning only in Local envs (#1359)
* Hide Environments section in Web, show observability warning only in Local envs * Show observability warning message even if there is no recent activity
1 parent 8da7ae2 commit f56fdf1

File tree

9 files changed

+163
-102
lines changed

9 files changed

+163
-102
lines changed

‎src/components/Admin/Environments/index.tsx‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
setEnvironmentToDelete,
2323
setIsSidebarOpen
2424
} from "../../../redux/slices/environmentsSlice";
25-
import { useConfigSelector } from "../../../store/config/useConfigSelector";
2625
import { FeatureFlag } from "../../../types";
2726
import { sortEnvironments } from "../../common/IssuesReport/utils";
2827
import { Pagination } from "../../common/v3/Pagination";
@@ -38,7 +37,6 @@ const columnHelper = createColumnHelper<Environment>();
3837
export const Environments = () => {
3938
const containerRef = useRef<HTMLDivElement>(null);
4039
const { data: about } = useGetAboutQuery();
41-
const { isSandboxModeEnabled } = useConfigSelector();
4240
const isCreateEnvironmentSidebarOpen = useAdminSelector(
4341
(state) => state.environmentsSlice.isSidebarOpen
4442
);
@@ -65,7 +63,7 @@ export const Environments = () => {
6563
columnHelper.accessor("name", {
6664
header: "Name",
6765
meta: {
68-
width: "100%",
66+
width: isEnvironmentLastActiveTimestampEnabled ? "70%" : "90%",
6967
minWidth: 60
7068
},
7169
cell: (info) => {
@@ -105,22 +103,18 @@ export const Environments = () => {
105103
return <s.EnvironmentType>{value}</s.EnvironmentType>;
106104
}
107105
}),
108-
...(isSandboxModeEnabled
109-
? []
110-
: [
111-
columnHelper.accessor((row) => row, {
112-
header: "Actions",
113-
meta: {
114-
width: "10%",
115-
minWidth: 60,
116-
textAlign: "right"
117-
},
118-
cell: (info) => {
119-
const value = info.getValue();
120-
return <ActionsMenuButton environment={value} />;
121-
}
122-
})
123-
])
106+
columnHelper.accessor((row) => row, {
107+
header: "Actions",
108+
meta: {
109+
width: "10%",
110+
minWidth: 60,
111+
textAlign: "right"
112+
},
113+
cell: (info) => {
114+
const value = info.getValue();
115+
return <ActionsMenuButton environment={value} />;
116+
}
117+
})
124118
];
125119

126120
const table = useReactTable({

‎src/components/Admin/Environments/styles.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ export const TableHeaderCell = styled.div`
4545
4646
&:last-child {
4747
padding-right: 18px;
48-
text-align: right;
4948
}
5049
`;
5150

‎src/components/Admin/NavSidebar/NavMenu/index.tsx‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,57 @@
1+
import { useMemo } from "react";
2+
import { useConfigSelector } from "../../../../store/config/useConfigSelector";
13
import { GlobeIcon } from "../../../common/icons/16px/GlobeIcon";
24
import { HomeIcon } from "../../../common/icons/16px/HomeIcon";
35
import { MeterHighIcon } from "../../../common/icons/16px/MeterHighIcon";
46
import { NavMenuItem } from "./NavMenuItem";
57
import type { NavigationItem } from "./NavMenuItem/types";
68
import * as s from "./styles";
79

8-
const navigationItems: NavigationItem[] = [
9-
{
10-
id: "home",
11-
name: "Home",
12-
route: "/home",
13-
icon: <HomeIcon size={16} color={"currentColor"} />
14-
},
15-
{
16-
id: "environments",
17-
name: "Environments",
18-
route: "/environments",
19-
icon: <GlobeIcon size={16} color={"currentColor"} />
20-
},
21-
{
22-
id: "reports",
23-
name: "Reports",
24-
route: "/reports",
25-
icon: <MeterHighIcon size={16} color={"currentColor"} />,
26-
items: [
10+
export const NavMenu = () => {
11+
const { isSandboxModeEnabled } = useConfigSelector();
12+
13+
const navigationItems: NavigationItem[] = useMemo(
14+
() => [
15+
{
16+
id: "home",
17+
name: "Home",
18+
route: "/home",
19+
icon: <HomeIcon size={16} color={"currentColor"} />
20+
},
21+
...(isSandboxModeEnabled
22+
? []
23+
: [
24+
{
25+
id: "environments",
26+
name: "Environments",
27+
route: "/environments",
28+
icon: <GlobeIcon size={16} color={"currentColor"} />
29+
}
30+
]),
2731
{
28-
id: "codeIssues",
29-
name: "Code issues",
30-
route: "/reports/code-issues"
32+
id: "reports",
33+
name: "Reports",
34+
route: "/reports",
35+
icon: <MeterHighIcon size={16} color={"currentColor"} />,
36+
items: [
37+
{
38+
id: "codeIssues",
39+
name: "Code issues",
40+
route: "/reports/code-issues"
41+
}
42+
]
3143
}
32-
]
33-
}
34-
];
44+
],
45+
[isSandboxModeEnabled]
46+
);
3547

36-
export const NavMenu = () => (
37-
<nav>
38-
<s.NavigationList>
39-
{navigationItems.map((x) => (
40-
<NavMenuItem key={x.id} item={x} />
41-
))}
42-
</s.NavigationList>
43-
</nav>
44-
);
48+
return (
49+
<nav>
50+
<s.NavigationList>
51+
{navigationItems.map((x) => (
52+
<NavMenuItem key={x.id} item={x} />
53+
))}
54+
</s.NavigationList>
55+
</nav>
56+
);
57+
};

‎src/components/RecentActivity/RecentActivityToolbar/index.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useContext } from "react";
2+
import { ConfigContext } from "../../common/App/ConfigContext";
3+
import { ListIcon } from "../../common/icons/ListIcon";
4+
import { TableIcon } from "../../common/icons/TableIcon";
5+
import { ObservabilityStatusBadge } from "../ObservabilityStatusBadge";
6+
import { Toggle } from "../Toggle";
7+
import type { ViewModeOption } from "../types";
8+
import * as s from "./styles";
9+
import type { RecentActivityToolbarProps } from "./types";
10+
11+
const viewModeOptions: ViewModeOption[] = [
12+
{
13+
value: "table",
14+
icon: TableIcon
15+
},
16+
{
17+
value: "list",
18+
icon: ListIcon
19+
}
20+
];
21+
22+
export const RecentActivityHeader = ({
23+
showToolbar: showViewModeSelector,
24+
viewMode,
25+
onViewModeChange,
26+
environment,
27+
className
28+
}: RecentActivityToolbarProps) => {
29+
const { isObservabilityEnabled } = useContext(ConfigContext);
30+
31+
return (
32+
<s.Container className={className}>
33+
{showViewModeSelector && (
34+
<s.Toolbar>
35+
<span>Recent Activity</span>
36+
<Toggle
37+
value={viewMode}
38+
options={viewModeOptions}
39+
onChange={onViewModeChange}
40+
/>
41+
</s.Toolbar>
42+
)}
43+
{!isObservabilityEnabled && environment?.type === "Private" && (
44+
<ObservabilityStatusBadge />
45+
)}
46+
</s.Container>
47+
);
48+
};

‎src/components/RecentActivity/RecentActivityToolbar/styles.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from "styled-components";
2+
3+
export const Container = styled.div`
4+
display: flex;
5+
flex-direction: column;
6+
gap: 8px;
7+
padding: 16px 12px 20px;
8+
`;
9+
10+
export const Toolbar = styled.div`
11+
display: flex;
12+
justify-content: space-between;
13+
font-weight: 500;
14+
font-size: 14px;
15+
color: ${({ theme }) => theme.colors.recentActivity.header.text};
16+
`;

‎src/components/RecentActivity/RecentActivityToolbar/types.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { Environment } from "../../../redux/services/types";
2+
import type { ViewMode } from "../EnvironmentPanel/types";
3+
4+
export interface RecentActivityToolbarProps {
5+
showToolbar?: boolean;
6+
viewMode: ViewMode;
7+
onViewModeChange: (viewMode: ViewMode) => void;
8+
environment?: Environment;
9+
className?: string;
10+
}

‎src/components/RecentActivity/index.tsx‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ import type { Scope } from "../common/App/types";
2222
import { Overlay } from "../common/Overlay";
2323
import { RegistrationDialog } from "../common/RegistrationDialog";
2424
import type { RegistrationFormValues } from "../common/RegistrationDialog/types";
25-
import { ListIcon } from "../common/icons/ListIcon";
26-
import { TableIcon } from "../common/icons/TableIcon";
2725
import { ConfirmationDialog } from "./ConfirmationDialog";
2826
import { CreateEnvironmentFinishScreenContent } from "./CreateEnvironmentFinishScreenContent";
2927
import { CreateEnvironmentWizard } from "./CreateEnvironmentWizard";
@@ -34,36 +32,23 @@ import { getEnvironmentTabId } from "./EnvironmentPanel/EnvironmentTab/getEnviro
3432
import type { ViewMode } from "./EnvironmentPanel/types";
3533
import { LiveView } from "./LiveView";
3634
import { NoData } from "./NoData";
37-
import { ObservabilityStatusBadge } from "./ObservabilityStatusBadge";
3835
import { MAX_DISTANCE, RecentActivityTable } from "./RecentActivityTable";
39-
import { Toggle } from "./Toggle";
36+
import { RecentActivityHeader } from "./RecentActivityToolbar";
4037
import { WelcomeScreen } from "./WelcomeScreen";
4138
import { actions } from "./actions";
4239
import * as s from "./styles";
4340
import { trackingEvents } from "./tracking";
4441
import type {
4542
EnvironmentClearDataTimeStamps,
4643
EnvironmentInstructionsVisibility,
47-
ExtendedEnvironment,
48-
ViewModeOption
44+
ExtendedEnvironment
4945
} from "./types";
5046
import { useDigmathonProgressData } from "./useDigmathonProgressData";
5147
import { useLiveData } from "./useLiveData";
5248
import { useRecentActivityData } from "./useRecentActivityData";
5349

5450
export const RECENT_ACTIVITY_CONTAINER_ID = "recent-activity";
5551

56-
const viewModeOptions: ViewModeOption[] = [
57-
{
58-
value: "table",
59-
icon: TableIcon
60-
},
61-
{
62-
value: "list",
63-
icon: ListIcon
64-
}
65-
];
66-
6752
const changeSelectedEnvironment = (
6853
scope: Scope | undefined,
6954
environments: Environment[] | undefined,
@@ -488,6 +473,13 @@ export const RecentActivity = () => {
488473
<s.NoDataRecentActivityContainerBackground>
489474
<s.NoDataRecentActivityContainerBackgroundGradient />
490475
</s.NoDataRecentActivityContainerBackground>
476+
{selectedEnvironment && (
477+
<s.NoDataRecentActivityHeader
478+
viewMode={viewMode}
479+
onViewModeChange={handleViewModeChange}
480+
environment={selectedEnvironment}
481+
/>
482+
)}
491483
<s.NoDataContainer>
492484
<NoData />
493485
</s.NoDataContainer>
@@ -499,17 +491,12 @@ export const RecentActivity = () => {
499491

500492
return (
501493
<>
502-
<s.RecentActivityToolbarContainer>
503-
<s.RecentActivityToolbar>
504-
<span>Recent Activity</span>
505-
<Toggle
506-
value={viewMode}
507-
options={viewModeOptions}
508-
onChange={handleViewModeChange}
509-
/>
510-
</s.RecentActivityToolbar>
511-
{!config.isObservabilityEnabled && <ObservabilityStatusBadge />}
512-
</s.RecentActivityToolbarContainer>
494+
<RecentActivityHeader
495+
showToolbar={true}
496+
viewMode={viewMode}
497+
onViewModeChange={handleViewModeChange}
498+
environment={selectedEnvironment}
499+
/>
513500
<RecentActivityTable
514501
viewMode={viewMode}
515502
data={environmentActivities[selectedEnvironment.id]}
@@ -572,7 +559,7 @@ export const RecentActivity = () => {
572559
) : (
573560
<Allotment defaultSizes={[70, 30]}>
574561
<s.RecentActivityContainer id={RECENT_ACTIVITY_CONTAINER_ID}>
575-
<s.RecentActivityHeader ref={observe}>
562+
<s.EnvironmentPanelContainer ref={observe}>
576563
<EnvironmentPanel
577564
environments={environments}
578565
selectedEnvironment={selectedEnvironment}
@@ -585,7 +572,7 @@ export const RecentActivity = () => {
585572
}
586573
onEnvironmentClearData={handleEnvironmentClearData}
587574
/>
588-
</s.RecentActivityHeader>
575+
</s.EnvironmentPanelContainer>
589576
<s.RecentActivityContentContainer>
590577
{renderContent()}
591578
</s.RecentActivityContentContainer>

‎src/components/RecentActivity/styles.ts‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import styled from "styled-components";
22
import { Spinner as CommonSpinner } from "../common/v3/Spinner";
3+
import { RecentActivityHeader } from "./RecentActivityToolbar";
34

45
const RECENT_ACTIVITY_NO_DATA_PADDING_TOP = 39; // in pixels
56
const RECENT_ACTIVITY_MIN_WIDTH = 550; // in pixels
@@ -39,7 +40,7 @@ export const RecentActivityContainer = styled.div`
3940
box-sizing: border-box;
4041
`;
4142

42-
export const RecentActivityHeader = styled.div`
43+
export const EnvironmentPanelContainer = styled.div`
4344
box-sizing: border-box;
4445
z-index: 1;
4546
position: sticky;
@@ -51,19 +52,8 @@ export const RecentActivityHeader = styled.div`
5152
height: 44px;
5253
`;
5354

54-
export const RecentActivityToolbarContainer = styled.div`
55-
display: flex;
56-
flex-direction: column;
57-
gap: 8px;
58-
padding: 16px 12px 20px;
59-
`;
60-
61-
export const RecentActivityToolbar = styled.div`
62-
display: flex;
63-
justify-content: space-between;
64-
font-weight: 500;
65-
font-size: 14px;
66-
color: ${({ theme }) => theme.colors.recentActivity.header.text};
55+
export const NoDataRecentActivityHeader = styled(RecentActivityHeader)`
56+
position: relative;
6757
`;
6858

6959
export const RecentActivityContentContainer = styled.div`

‎src/containers/Admin/router.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,14 @@ export const routes: RouteObject[] = [
3131
}
3232
]
3333
},
34-
{
35-
path: "environments",
36-
element: <Environments />
37-
},
34+
...(window.isSandboxModeEnabled === true
35+
? []
36+
: [
37+
{
38+
path: "environments",
39+
element: <Environments />
40+
}
41+
]),
3842
{
3943
path: "*",
4044
element: <Navigate to={"/"} replace={true} />

0 commit comments

Comments
 (0)