Skip to content

Commit 919d69f

Browse files
devanshjainmsdevanshjainms
committed
feat: Enhance ReportsPanel with new styles and update report URL generation
1 parent 19691d3 commit 919d69f

4 files changed

Lines changed: 124 additions & 112 deletions

File tree

‎client/src/api/reportsApi.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
import { apiClient } from "./client";
1010
import { API_ENDPOINTS } from "./endpoints";
11+
import { APP_CONFIG } from "../constants";
1112

1213
export interface ReportInfo {
1314
name: string;
@@ -37,6 +38,8 @@ export const reportsApi = {
3738
* Get URL for a specific report file
3839
*/
3940
getReportUrl: (workspaceId: string, filePath: string): string => {
40-
return API_ENDPOINTS.WORKSPACE_REPORT_FILE(workspaceId, filePath);
41+
const endpoint = API_ENDPOINTS.WORKSPACE_REPORT_FILE(workspaceId, filePath);
42+
// For iframe src, we need the full URL with base path
43+
return `${APP_CONFIG.API_BASE_URL}${endpoint}`;
4144
},
4245
};

‎client/src/components/Reports/ReportsPanel.tsx‎

Lines changed: 1 addition & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -11,124 +11,14 @@ import {
1111
Text,
1212
Button,
1313
Spinner,
14-
makeStyles,
1514
tokens,
1615
} from "@fluentui/react-components";
1716
import {
1817
ArrowSyncRegular,
1918
DocumentRegular,
2019
} from "@fluentui/react-icons";
2120
import { reportsApi, ReportInfo } from "../../api/reportsApi";
22-
import { APP_STRINGS } from "../../constants";
23-
24-
const useStyles = makeStyles({
25-
container: {
26-
display: "flex",
27-
flexDirection: "column",
28-
height: "100%",
29-
backgroundColor: tokens.colorNeutralBackground1,
30-
},
31-
header: {
32-
display: "flex",
33-
alignItems: "center",
34-
justifyContent: "space-between",
35-
padding: "16px 24px",
36-
borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
37-
},
38-
title: {
39-
fontSize: tokens.fontSizeBase500,
40-
fontWeight: tokens.fontWeightSemibold,
41-
},
42-
headerActions: {
43-
display: "flex",
44-
gap: "8px",
45-
alignItems: "center",
46-
},
47-
content: {
48-
flex: 1,
49-
display: "flex",
50-
overflow: "hidden",
51-
},
52-
sidebar: {
53-
width: "300px",
54-
borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
55-
display: "flex",
56-
flexDirection: "column",
57-
backgroundColor: tokens.colorNeutralBackground2,
58-
},
59-
sidebarHeader: {
60-
padding: "12px 16px",
61-
borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
62-
},
63-
reportList: {
64-
flex: 1,
65-
overflowY: "auto",
66-
padding: "8px",
67-
},
68-
reportItem: {
69-
padding: "12px",
70-
marginBottom: "4px",
71-
borderRadius: tokens.borderRadiusMedium,
72-
cursor: "pointer",
73-
display: "flex",
74-
alignItems: "center",
75-
gap: "8px",
76-
transition: "background-color 0.2s",
77-
":hover": {
78-
backgroundColor: tokens.colorNeutralBackground3Hover,
79-
},
80-
},
81-
reportItemActive: {
82-
backgroundColor: tokens.colorBrandBackground2,
83-
":hover": {
84-
backgroundColor: tokens.colorBrandBackground2Hover,
85-
},
86-
},
87-
reportIcon: {
88-
fontSize: "20px",
89-
color: tokens.colorBrandForeground1,
90-
},
91-
reportName: {
92-
flex: 1,
93-
fontSize: tokens.fontSizeBase300,
94-
wordBreak: "break-word",
95-
},
96-
viewer: {
97-
flex: 1,
98-
display: "flex",
99-
flexDirection: "column",
100-
position: "relative",
101-
},
102-
iframe: {
103-
flex: 1,
104-
border: "none",
105-
backgroundColor: tokens.colorNeutralBackground1,
106-
},
107-
emptyState: {
108-
flex: 1,
109-
display: "flex",
110-
flexDirection: "column",
111-
alignItems: "center",
112-
justifyContent: "center",
113-
gap: "16px",
114-
padding: "48px",
115-
textAlign: "center",
116-
},
117-
emptyStateIcon: {
118-
fontSize: "48px",
119-
color: tokens.colorNeutralForeground3,
120-
},
121-
emptyStateText: {
122-
fontSize: tokens.fontSizeBase400,
123-
color: tokens.colorNeutralForeground2,
124-
},
125-
loadingContainer: {
126-
flex: 1,
127-
display: "flex",
128-
alignItems: "center",
129-
justifyContent: "center",
130-
},
131-
});
21+
import { useReportsPanelStyles as useStyles } from "../../styles";
13222

13323
interface ReportsPanelProps {
13424
workspaceId?: string;

‎client/src/styles/ReportsPanel.styles.ts‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
/**
5+
* ReportsPanel Styles
6+
* Fluent UI makeStyles for the ReportsPanel component.
7+
*/
8+
9+
import { makeStyles, tokens } from "@fluentui/react-components";
10+
11+
export const useStyles = makeStyles({
12+
container: {
13+
display: "flex",
14+
flexDirection: "column",
15+
height: "100%",
16+
backgroundColor: tokens.colorNeutralBackground1,
17+
},
18+
header: {
19+
display: "flex",
20+
alignItems: "center",
21+
justifyContent: "space-between",
22+
padding: "16px 24px",
23+
borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
24+
},
25+
title: {
26+
fontSize: tokens.fontSizeBase500,
27+
fontWeight: tokens.fontWeightSemibold,
28+
},
29+
headerActions: {
30+
display: "flex",
31+
gap: "8px",
32+
alignItems: "center",
33+
},
34+
content: {
35+
flex: 1,
36+
display: "flex",
37+
overflow: "hidden",
38+
},
39+
sidebar: {
40+
width: "300px",
41+
borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
42+
display: "flex",
43+
flexDirection: "column",
44+
backgroundColor: tokens.colorNeutralBackground2,
45+
},
46+
sidebarHeader: {
47+
padding: "12px 16px",
48+
borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
49+
},
50+
reportList: {
51+
flex: 1,
52+
overflowY: "auto",
53+
padding: "8px",
54+
},
55+
reportItem: {
56+
padding: "12px",
57+
marginBottom: "4px",
58+
borderRadius: tokens.borderRadiusMedium,
59+
cursor: "pointer",
60+
display: "flex",
61+
alignItems: "center",
62+
gap: "8px",
63+
transition: "background-color 0.2s",
64+
":hover": {
65+
backgroundColor: tokens.colorNeutralBackground3Hover,
66+
},
67+
},
68+
reportItemActive: {
69+
backgroundColor: tokens.colorBrandBackground2,
70+
":hover": {
71+
backgroundColor: tokens.colorBrandBackground2Hover,
72+
},
73+
},
74+
reportIcon: {
75+
fontSize: "20px",
76+
color: tokens.colorBrandForeground1,
77+
},
78+
reportName: {
79+
flex: 1,
80+
fontSize: tokens.fontSizeBase300,
81+
wordBreak: "break-word",
82+
},
83+
viewer: {
84+
flex: 1,
85+
display: "flex",
86+
flexDirection: "column",
87+
position: "relative",
88+
},
89+
iframe: {
90+
flex: 1,
91+
border: "none",
92+
backgroundColor: tokens.colorNeutralBackground1,
93+
},
94+
emptyState: {
95+
flex: 1,
96+
display: "flex",
97+
flexDirection: "column",
98+
alignItems: "center",
99+
justifyContent: "center",
100+
gap: "16px",
101+
padding: "48px",
102+
textAlign: "center",
103+
},
104+
emptyStateIcon: {
105+
fontSize: "48px",
106+
color: tokens.colorNeutralForeground3,
107+
},
108+
emptyStateText: {
109+
fontSize: tokens.fontSizeBase400,
110+
color: tokens.colorNeutralForeground2,
111+
},
112+
loadingContainer: {
113+
flex: 1,
114+
display: "flex",
115+
alignItems: "center",
116+
justifyContent: "center",
117+
},
118+
});

‎client/src/styles/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@ export { useStyles as useConversationSectionStyles } from "./ConversationSection
1919
export { useStyles as useWorkspaceSectionStyles } from "./WorkspaceSection.styles";
2020
export { useStyles as useJobSectionStyles } from "./JobSection.styles";
2121
export { useStyles as useWorkspaceFileViewerStyles } from "./WorkspaceFileViewer.styles";
22+
export { useStyles as useReportsPanelStyles } from "./ReportsPanel.styles";
2223

0 commit comments

Comments
 (0)