Skip to content

Commit

Permalink
ORV2-2297: Special Authorization Page with LOA View and Management (#…
Browse files Browse the repository at this point in the history
…1512)

Co-authored-by: gchauhan-aot <[email protected]>
Co-authored-by: praju-aot <[email protected]>
Co-authored-by: Praveen Raju <[email protected]>
  • Loading branch information
4 people authored Jul 25, 2024
1 parent 015b837 commit 1b2c830
Show file tree
Hide file tree
Showing 83 changed files with 3,821 additions and 226 deletions.
32 changes: 32 additions & 0 deletions frontend/src/common/apiManager/httpRequestHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,22 @@ export const httpPOSTRequest = (url: string, data: any) => {
});
};

/**
* An HTTP POST Request with file upload.
* @param url The URL of the resource.
* @param data The request payload containing file to upload.
* @returns A Promise<Response> with the response from the API.
*/
export const httpPOSTRequestWithFile = (url: string, data: FormData) => {
return axios.post(url, data, {
headers: {
"Content-Type": `multipart/form-data`,
Authorization: getAccessToken(),
"X-Correlation-ID": getCorrelationId(),
},
});
};

/**
* A generic HTTP PUT Request
* @param url The URL of the resource.
Expand All @@ -202,6 +218,22 @@ export const httpPUTRequest = (url: string, data: any) => {
});
};

/**
* An HTTP PUT Request with file upload.
* @param url The URL of the resource.
* @param data The request payload containing file to upload.
* @returns A Promise<Response> with the response from the API.
*/
export const httpPUTRequestWithFile = (url: string, data: FormData) => {
return axios.put(url, data, {
headers: {
"Content-Type": `multipart/form-data`,
Authorization: getAccessToken(),
"X-Correlation-ID": getCorrelationId(),
},
});
};

/**
* HTTP Delete Request
* @param url The URL containing the resource id to be deleted.
Expand Down
36 changes: 21 additions & 15 deletions frontend/src/common/components/dashboard/Dashboard.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
@import "../../../themes/orbcStyles";

.tabpanel-container {
padding: 0 8.551vw;
overflow: hidden;
background-color: white;
min-height: calc(100vh - 306px);
height: 100%;
}

.layout-box {
padding: 0 8.551vw;
}
Expand Down Expand Up @@ -61,22 +53,36 @@
}

@media screen and (max-width: 768px) {
.tabpanel-container {
padding: 0 5.5rem;
}

.layout-box {
padding: 0 5.5rem;
}
}

@media (width < 420px) {
.tabpanel-container {
.layout-box {
padding: 0 1rem;
}
}

.layout-box {
padding: 0 1rem;
@mixin page-tabpanel-container-style($page-tabpanel-container) {
#{$page-tabpanel-container} {
padding: 0 8.551vw;
overflow: hidden;
background-color: white;
min-height: calc(100vh - 306px);
height: 100%;
}

@media screen and (max-width: 768px) {
#{$page-tabpanel-container} {
padding: 0 5.5rem;
}
}

@media (width < 420px) {
#{$page-tabpanel-container} {
padding: 0 1rem;
}
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@use "./Dashboard";

@include Dashboard.page-tabpanel-container-style(".dashboard-tab-panels");
19 changes: 19 additions & 0 deletions frontend/src/common/components/dashboard/DashboardTabPanels.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import "./DashboardTabPanels.scss";
import { TabPanels } from "../tabs/TabPanels";
import { TabComponentProps } from "../tabs/types/TabComponentProps";

export const DashboardTabPanels = ({
value,
componentList,
}: {
value: number;
componentList: TabComponentProps[];
}) => {
return (
<TabPanels
value={value}
componentList={componentList}
containerClassName="dashboard-tab-panels"
/>
);
};
7 changes: 3 additions & 4 deletions frontend/src/common/components/dashboard/TabLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { useState } from "react";

import "./Dashboard.scss";
import { TabComponentProps } from "./components/tab/types/TabComponentProps";
import { TabPanels } from "./components/tab/TabPanels";
import { TabComponentProps } from "../tabs/types/TabComponentProps";
import { TabBanner } from "./components/banner/TabBanner";
import { DashboardTabPanels } from "./DashboardTabPanels";

interface TabLayoutProps {
bannerText: string;
Expand Down Expand Up @@ -51,7 +50,7 @@ export const TabLayout = React.memo(
onTabChange={handleChange}
/>

<TabPanels value={selectedTab} componentList={componentList} />
<DashboardTabPanels value={selectedTab} componentList={componentList} />
</>
);
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Box } from "@mui/material";

import "./TabBanner.scss";
import { TabsList } from "../tab/TabsList";
import { TabComponentProps } from "../tab/types/TabComponentProps";
import { TabsList } from "../../../tabs/TabsList";
import { TabComponentProps } from "../../../tabs/types/TabComponentProps";

export const TabBanner = ({
bannerText,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
@import "../../../themes/orbcStyles";

.delete-confirmation-dialog {
& &__title {
& &__container {
min-width: 683px;
}

& &__header {
background-color: $bc-background-light-grey;
color: $bc-red;
font-size: 1.5rem;
Expand All @@ -16,6 +20,10 @@
color: $bc-messages-red-background;
}

& &__title {
margin-left: 1rem;
}

& &__content {
border-bottom: none;
}
Expand All @@ -28,7 +36,7 @@
padding: 0 1.5rem 1.5rem 1.5rem;
}

.delete-confirmation-btn {
& &__btn {
font-size: 1rem;

&--cancel {
Expand All @@ -55,3 +63,11 @@
}
}
}

@media (width < 768px) {
.delete-confirmation-dialog {
& &__container {
min-width: auto;
}
}
}
134 changes: 62 additions & 72 deletions frontend/src/common/components/dialog/DeleteConfirmationDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,88 +1,78 @@
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Typography from "@mui/material/Typography";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
import {
Button,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Typography,
} from "@mui/material";

import "./DeleteConfirmationDialog.scss";
import { Nullable } from "../../types/common";

/**
* A stateless confirmation dialog box for Delete Operations.
* Confirmation dialog box for delete operations.
*/
export const DeleteConfirmationDialog = ({
isOpen,
onClickDelete,
onClickCancel,
caption,
showDialog,
onDelete,
onCancel,
itemToDelete,
confirmationMsg = "Are you sure you want to delete this? This action cannot be undone.",
}: {
/**
* Boolean to control the open and close state of Dialog box.
*/
isOpen: boolean;
/**
* A callback function on clicking delete button.
* @returns void
*/
onClickDelete: () => void;

/**
* A callback function on clicking cancel button.
* @returns void
*/
onClickCancel: () => void;
/**
* A caption string showing on title of the Dialog box.
* @returns string
*/
caption: string;
showDialog: boolean;
onDelete: () => void;
onCancel: () => void;
itemToDelete: string;
confirmationMsg?: Nullable<string>;
}) => {
const title = caption;

return (
<div>
<Dialog
className="delete-confirmation-dialog"
onClose={onClickCancel}
aria-labelledby="confirmation-dialog-title"
open={isOpen}
>
<DialogTitle className="delete-confirmation-dialog__title">
<span className="delete-confirmation-dialog__icon">
<FontAwesomeIcon icon={faTrashCan} />
</span>{" "}
&nbsp;
<strong>Delete {title}(s)? </strong>
</DialogTitle>
<Dialog
className="delete-confirmation-dialog"
onClose={onCancel}
aria-labelledby="confirmation-dialog-title"
open={showDialog}
classes={{
paper: "delete-confirmation-dialog__container",
}}
>
<DialogTitle className="delete-confirmation-dialog__header">
<span className="delete-confirmation-dialog__icon">
<FontAwesomeIcon icon={faTrashCan} />
</span>

<span className="delete-confirmation-dialog__title">
Delete {itemToDelete}(s)?
</span>
</DialogTitle>

<DialogContent className="delete-confirmation-dialog__content" dividers>
<Typography className="delete-confirmation-dialog__msg" gutterBottom>
Are you sure you want to delete this? This action cannot be undone.
</Typography>
</DialogContent>
<DialogContent className="delete-confirmation-dialog__content" dividers>
<Typography className="delete-confirmation-dialog__msg" gutterBottom>
{confirmationMsg}
</Typography>
</DialogContent>

<DialogActions className="delete-confirmation-dialog__actions">
<Button
className="delete-confirmation-btn delete-confirmation-btn--cancel"
variant="contained"
color="secondary"
onClick={onClickCancel}
>
Cancel
</Button>
<DialogActions className="delete-confirmation-dialog__actions">
<Button
className="delete-confirmation-dialog__btn delete-confirmation-dialog__btn--cancel"
variant="contained"
color="secondary"
onClick={onCancel}
>
Cancel
</Button>

<Button
className="delete-confirmation-btn delete-confirmation-btn--delete"
variant="contained"
color="error"
onClick={onClickDelete}
>
Delete
</Button>
</DialogActions>
</Dialog>
</div>
<Button
className="delete-confirmation-dialog__btn delete-confirmation-dialog__btn--delete"
variant="contained"
color="error"
onClick={onDelete}
>
Delete
</Button>
</DialogActions>
</Dialog>
);
};
12 changes: 4 additions & 8 deletions frontend/src/common/components/form/CustomFormComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,9 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
formState: { errors },
} = useFormContext();

/**
* Function to check the rules object for either required or required: { value: true}
* @returns true/false depending on field rule object
*/
const isRequired = () => {
if (rules.required === true) return true;
if ((rules.required as any).value === true) return true;
const showOptionalLabel = () => {
if (rules.required === false) return true;
if ((rules.required as any)?.value === false) return true;
return false;
};

Expand Down Expand Up @@ -188,7 +184,7 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
sx={{ fontWeight: "bold", marginBottom: "8px" }}
>
{label}
{!isRequired() && (
{showOptionalLabel() && (
<span style={{ fontWeight: "normal" }}> (optional)</span>
)}
{customHelperText && (
Expand Down
Loading

0 comments on commit 1b2c830

Please sign in to comment.