Skip to content

Commit e338789

Browse files
jaags-devDeepak-Kesavan
jaags-dev
and
Deepak-Kesavan
authored
Fix/org selection new design (#154)
* Implemented new design for org selection * fixed UI related issues * code clean up * fixed empty catch --------- Signed-off-by: jagadeeswaran-zipstack <jagadeeswaran@zipstack.com> Co-authored-by: Deepak K <89829542+Deepak-Kesavan@users.noreply.github.com>
1 parent 07c3272 commit e338789

13 files changed

Lines changed: 853 additions & 102 deletions

File tree

‎frontend/src/assets/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ import { ReactComponent as SquareBg } from "./square-bg.svg";
2727
import { ReactComponent as TrialDoc } from "./trial-doc.svg";
2828
import { ReactComponent as TextExtractorIcon } from "./text-extractor.svg";
2929
import { ReactComponent as OcrIcon } from "./ocr.svg";
30+
import { ReactComponent as OrgAvatar } from "./org-selection-avatar.svg";
31+
import { ReactComponent as OrgSelection } from "./org-selection.svg";
32+
import { ReactComponent as RedGradCircle } from "./red-grad-circle.svg";
33+
import { ReactComponent as YellowGradCircle } from "./yellow-grad-circle.svg";
3034
import { ReactComponent as ExportToolIcon } from "./export-tool.svg";
3135

3236
export {
@@ -59,5 +63,9 @@ export {
5963
TrialDoc,
6064
TextExtractorIcon,
6165
OcrIcon,
66+
OrgAvatar,
67+
OrgSelection,
68+
RedGradCircle,
69+
YellowGradCircle,
6270
ExportToolIcon,
6371
};

‎frontend/src/assets/org-selection-avatar.svg‎

Lines changed: 45 additions & 0 deletions
Loading

‎frontend/src/assets/org-selection.svg‎

Lines changed: 526 additions & 0 deletions
Loading

‎frontend/src/assets/red-grad-circle.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎frontend/src/assets/yellow-grad-circle.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎frontend/src/components/agency/actions/Actions.jsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { EtlTaskDeploy } from "../../pipelines-or-deployments/etl-task-deploy/Et
2626
import { SocketMessages } from "../../helpers/socket-messages/SocketMessages";
2727
import FileUpload from "../file-upload/FileUpload.jsx";
2828
import "./Actions.css";
29+
import { useExceptionHandler } from "../../../hooks/useExceptionHandler.jsx";
2930

3031
function Actions({ statusBarMsg, initializeWfComp, stepLoader }) {
3132
const [logId, setLogId] = useState("");
@@ -43,6 +44,7 @@ function Actions({ statusBarMsg, initializeWfComp, stepLoader }) {
4344
const [openAddETLModal, setOpenAddETLModal] = useState(false);
4445
const [deploymentName, setDeploymentName] = useState("");
4546
const [deploymentType, setDeploymentType] = useState("");
47+
const handleException = useExceptionHandler();
4648
const {
4749
details,
4850
isLoading,
@@ -182,14 +184,7 @@ function Actions({ statusBarMsg, initializeWfComp, stepLoader }) {
182184
handleWfExecutionApi(body)
183185
.then(() => {})
184186
.catch((err) => {
185-
const errorDetail =
186-
err?.response?.data?.errors?.length > 0
187-
? err.response.data.errors[0].detail
188-
: "Something went wrong";
189-
setAlertDetails({
190-
type: "error",
191-
content: errorDetail,
192-
});
187+
setAlertDetails(handleException(err));
193188
});
194189
}
195190
};
@@ -233,7 +228,7 @@ function Actions({ statusBarMsg, initializeWfComp, stepLoader }) {
233228
return axiosPrivate(requestOptions)
234229
.then((res) => res)
235230
.catch((err) => {
236-
throw err;
231+
setAlertDetails(handleException(err));
237232
});
238233
};
239234

@@ -470,8 +465,8 @@ function Actions({ statusBarMsg, initializeWfComp, stepLoader }) {
470465
</Tooltip>
471466
<Tooltip title="Deploy as Task Pipeline">
472467
<Button
473-
disabled={isIncompleteWorkflow() || !canAddTaskPipeline}
474468
onClick={() => createDeployment("TASK")}
469+
disabled={isIncompleteWorkflow() || !canAddTaskPipeline}
475470
>
476471
<ApiOutlined />
477472
</Button>

‎frontend/src/components/agency/ds-settings-card/DsSettingsCard.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.ds-set-card-col3 {
2+
z-index: 10;
3+
}
4+
5+
.ds-set-card-col2 {
6+
z-index: 20;
7+
}

‎frontend/src/components/agency/ds-settings-card/DsSettingsCard.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { useWorkflowStore } from "../../../store/workflow-store";
2626
import SpaceWrapper from "../../widgets/space-wrapper/SpaceWrapper";
2727
import { ConfigureConnectorModal } from "../configure-connector-modal/ConfigureConnectorModal";
2828
import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
29+
import "./DsSettingsCard.css";
2930

3031
const tooltip = {
3132
input: "Data Source Settings",

‎frontend/src/components/agency/tool-info-card/ToolInfoCard.css‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
/* Styles for ToolInfoCard */
22

33
.toolinfo-card {
4-
margin-bottom: 5px;
5-
padding: 10px;
6-
padding-bottom: 0px;
7-
border-color: #DFDFDF;
4+
margin-bottom: 5px;
5+
padding: 10px;
6+
padding-bottom: 0px;
7+
border-color: #dfdfdf;
88
}
99

1010
.toolinfo-card .ant-card-body {
11-
padding: 2px;
11+
padding: 2px;
1212
}
1313

1414
.tool-info-typo-sec {
15-
font-size: 12px;
15+
font-size: 12px;
1616
}
1717

1818
.tool-info-header {
19-
padding-left: 8px;
19+
padding-left: 8px;
2020
}
2121

2222
.tool-info-title {
23-
display: grid;
24-
grid-template-columns: auto 1fr;
23+
display: grid;
24+
grid-template-columns: auto 1fr;
25+
text-transform: capitalize;
2526
}
2627

2728
.tool-info-add-btn {
28-
display: grid;
29-
grid-auto-flow: column;
30-
justify-self: end;
31-
}
29+
display: grid;
30+
grid-auto-flow: column;
31+
justify-self: end;
32+
}

‎frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate.js";
1111
import useLogout from "../../../hooks/useLogout.js";
1212
import "../../../layouts/page-layout/PageLayout.css";
1313
import { useSessionStore } from "../../../store/session-store.js";
14-
import { useAlertStore } from "../../../store/alert-store";
15-
import { ConfirmModal } from "../../widgets/confirm-modal/ConfirmModal.jsx";
1614
import "./TopNavBar.css";
15+
import { useAlertStore } from "../../../store/alert-store.js";
16+
import { ConfirmModal } from "../../widgets/confirm-modal/ConfirmModal.jsx";
1717
import axios from "axios";
18+
import { useExceptionHandler } from "../../../hooks/useExceptionHandler.jsx";
1819

1920
let TrialDaysInfo;
2021
try {
@@ -33,8 +34,9 @@ function TopNavBar() {
3334
const onBoardUrl = baseUrl + `/${orgName}/onboard`;
3435
const logout = useLogout();
3536
const axiosPrivate = useAxiosPrivate();
36-
const [showOnboardBanner, setShowOnboardBanner] = useState(false);
3737
const { setAlertDetails } = useAlertStore();
38+
const handleException = useExceptionHandler();
39+
const [showOnboardBanner, setShowOnboardBanner] = useState(false);
3840

3941
useEffect(() => {
4042
getAdapters();
@@ -50,60 +52,58 @@ function TopNavBar() {
5052
.then((res) => {
5153
const data = res?.data;
5254
const adapterTypes = [
53-
...new Set(data?.map((obj) => obj.adapter_type.toLowerCase())),
55+
...new Set(data?.map((obj) => obj?.adapter_type.toLowerCase())),
5456
];
5557
if (!onboardCompleted(adapterTypes)) {
5658
setShowOnboardBanner(true);
5759
}
5860
})
59-
.catch((err) => {})
60-
.finally(() => {});
61+
.catch((err) => {
62+
setAlertDetails(handleException(err));
63+
});
6164
};
6265

6366
const cascadeOptions = allOrganization.map((org) => {
6467
return {
65-
key: org.id,
68+
key: org?.id,
6669
label:
67-
org.id === sessionDetails?.orgId ? (
70+
org?.id === sessionDetails?.orgId ? (
6871
<div
6972
onClick={() =>
7073
setAlertDetails({
7174
type: "error",
72-
content: `You are already in ${org.display_name}`,
75+
content: `You are already in ${org?.display_name}`,
7376
})
7477
}
7578
>
76-
{org.display_name}
79+
{org?.display_name}
7780
</div>
7881
) : (
7982
<ConfirmModal
80-
handleConfirm={() => handleContinue(org.id)}
81-
content={`Want to switch to ${org.display_name} `}
83+
handleConfirm={() => handleContinue(org?.id)}
84+
content={`Want to switch to ${org?.display_name} `}
8285
>
83-
<div>{org.display_name}</div>
86+
<div>{org?.display_name}</div>
8487
</ConfirmModal>
8588
),
8689
};
8790
});
8891

8992
const handleContinue = async (selectedOrg) => {
9093
const requestOptions = {
91-
method: "GET",
92-
url: "/api/v1/organization",
94+
method: "POST",
95+
url: `/api/v1/organization/${selectedOrg}/set`,
96+
headers: {
97+
"X-CSRFToken": sessionDetails?.csrfToken,
98+
},
9399
};
94-
const csrfToken = ("; " + document.cookie)
95-
.split(`; csrftoken=`)
96-
.pop()
97-
.split(";")[0];
98-
99-
requestOptions.url = `/api/v1/organization/${selectedOrg}/set`;
100-
requestOptions.headers = {
101-
"X-CSRFToken": csrfToken,
102-
};
103-
requestOptions.method = "POST";
104-
105-
await axios(requestOptions);
106-
window.location.reload();
100+
await axios(requestOptions)
101+
.then(() => {
102+
window.location.reload();
103+
})
104+
.catch((err) => {
105+
setAlertDetails(handleException(err));
106+
});
107107
};
108108

109109
// Dropdown items
@@ -148,11 +148,11 @@ function TopNavBar() {
148148

149149
// Function to get the initials from the user name
150150
const getInitials = (name) => {
151-
const names = name.split(" ");
151+
const names = name?.split(" ");
152152
const initials = names
153-
.map((n) => n.charAt(0))
154-
.join("")
155-
.toUpperCase();
153+
?.map((n) => n.charAt(0))
154+
?.join("")
155+
?.toUpperCase();
156156
return initials;
157157
};
158158

0 commit comments

Comments
 (0)