From a1736c623974b7c254fc18f103669f8ec20e2dc0 Mon Sep 17 00:00:00 2001 From: Rohit Kini Date: Wed, 17 Jul 2024 14:04:49 +0530 Subject: [PATCH] components till DocLink --- api/src/controllers/org.controller.ts | 2 +- .../projects.contentMapper.controller.ts | 10 +- api/src/controllers/projects.controller.ts | 8 +- api/src/middlewares/auth.middleware.ts | 4 +- api/src/middlewares/req-headers.middleware.ts | 2 +- .../unmatched-routes.middleware.ts | 2 +- api/src/models/types.ts | 2 +- api/src/routes/auth.routes.ts | 4 +- api/src/services/contentMapper.service.ts | 15 +- api/src/services/org.service.ts | 2 +- api/src/services/projects.service.ts | 18 +-- api/src/validators/cms.validator.ts | 2 +- ui/src/common/assets/icons.tsx | 72 ++++++++-- .../AccountPage/accountPage.interface.ts | 3 + ui/src/components/AccountPage/index.scss | 17 +++ ui/src/components/AccountPage/index.tsx | 6 + .../advanceProperties.interface.ts | 115 +++++++++++++++ .../components/AdvancePropertise/index.scss | 31 ++++- ui/src/components/AdvancePropertise/index.tsx | 27 +++- ui/src/components/Card/card.interface.ts | 3 + ui/src/components/Card/card.scss | 101 +++++++++++--- ui/src/components/Card/index.tsx | 18 ++- .../Common/AddStack/addStack.interface.ts | 131 +++++++++++++++++- .../components/Common/AddStack/addStack.scss | 17 +++ .../components/Common/AddStack/addStack.tsx | 34 +++-- .../components/Common/Card/card.interface.ts | 25 ++++ ui/src/components/Common/Card/card.scss | 79 +++++++++++ ui/src/components/Common/Card/card.tsx | 12 ++ .../Common/DeleteProjectModal/index.tsx | 15 +- ui/src/components/Common/DocLink/DocLink.tsx | 31 +++++ 30 files changed, 722 insertions(+), 86 deletions(-) diff --git a/api/src/controllers/org.controller.ts b/api/src/controllers/org.controller.ts index 8767f2b3b..ac01c6964 100644 --- a/api/src/controllers/org.controller.ts +++ b/api/src/controllers/org.controller.ts @@ -3,7 +3,7 @@ import { orgService } from "../services/org.service.js"; /** * Retrieves all stacks. - * + * * @param {Request} req - The request object. * @param {Response} res - The response object. * @returns {Promise} - A promise that resolves when the operation is complete. diff --git a/api/src/controllers/projects.contentMapper.controller.ts b/api/src/controllers/projects.contentMapper.controller.ts index d813ba0e0..0839935fe 100644 --- a/api/src/controllers/projects.contentMapper.controller.ts +++ b/api/src/controllers/projects.contentMapper.controller.ts @@ -2,7 +2,7 @@ import { Request, Response } from "express"; import { contentMapperService } from "../services/contentMapper.service.js"; /** * Handles the PUT request to update test data. - * + * * @param req - The request object. * @param res - The response object. * @returns A Promise that resolves to void. @@ -14,7 +14,7 @@ const putTestData = async (req: Request, res: Response): Promise => { /** * Retrieves the content types from the content mapper service and sends the response as JSON. - * + * * @param req - The Express request object. * @param res - The Express response object. * @returns A Promise that resolves to void. @@ -25,7 +25,7 @@ const getContentTypes = async (req: Request, res: Response): Promise => { }; /** * Retrieves the field mapping for a given request and sends the response as JSON. - * + * * @param req - The request object. * @param res - The response object. * @returns A Promise that resolves to void. @@ -64,7 +64,7 @@ const putContentTypeFields = async ( }; /** * Resets the content type to its initial mapping. - * + * * @param req - The request object. * @param res - The response object. * @returns A Promise that resolves to void. @@ -96,7 +96,7 @@ const removeContentMapper = async ( /** * Retrieves single content types. - * + * * @param req - The request object. * @param res - The response object. * @returns A Promise that resolves to void. diff --git a/api/src/controllers/projects.controller.ts b/api/src/controllers/projects.controller.ts index a0ecdb2a9..3e7be0316 100644 --- a/api/src/controllers/projects.controller.ts +++ b/api/src/controllers/projects.controller.ts @@ -3,7 +3,7 @@ import { projectService } from "../services/projects.service.js"; /** * Retrieves all projects. - * + * * @param req - The request object. * @param res - The response object. * @returns A promise that resolves to void. @@ -27,7 +27,7 @@ const getProject = async (req: Request, res: Response): Promise => { /** * Creates a new project. - * + * * @param req - The request object. * @param res - The response object. * @returns A Promise that resolves to void. @@ -74,7 +74,7 @@ const updateAffix = async (req: Request, res: Response) => { /** * Handles the affix confirmation request. - * + * * @param req - The request object. * @param res - The response object. * @returns A Promise that resolves to the response data. @@ -132,7 +132,7 @@ const updateCurrentStep = async (req: Request, res: Response) => { /** * Deletes a project. - * + * * @param req - The request object. * @param res - The response object. * @returns A Promise that resolves to void. diff --git a/api/src/middlewares/auth.middleware.ts b/api/src/middlewares/auth.middleware.ts index 784202455..1e1499d28 100644 --- a/api/src/middlewares/auth.middleware.ts +++ b/api/src/middlewares/auth.middleware.ts @@ -6,7 +6,7 @@ import { HTTP_CODES } from "../constants/index.js"; /** * Middleware function to authenticate the user. - * + * * @param req - The Express request object. * @param res - The Express response object. * @param next - The next middleware function. @@ -24,7 +24,7 @@ export const authenticateUser = ( .status(status) .json({ status, message: "Unauthorized - Token missing" }); - /* this middleware function verifies the provided JWT token, + /* this middleware function verifies the provided JWT token, handles any errors that may occur during verification, attaches the decoded token payload to the request object, and then passes control to the next middleware or request handler. diff --git a/api/src/middlewares/req-headers.middleware.ts b/api/src/middlewares/req-headers.middleware.ts index 4e461839b..1c08008ab 100644 --- a/api/src/middlewares/req-headers.middleware.ts +++ b/api/src/middlewares/req-headers.middleware.ts @@ -3,7 +3,7 @@ import { Request, Response, NextFunction } from "express"; /** * Middleware function to handle request headers. * Adds necessary headers for CORS support and handles OPTIONS requests. - * + * * @param req - The Express Request object. * @param res - The Express Response object. * @param next - The next middleware function. diff --git a/api/src/middlewares/unmatched-routes.middleware.ts b/api/src/middlewares/unmatched-routes.middleware.ts index da305825e..cc6db151f 100644 --- a/api/src/middlewares/unmatched-routes.middleware.ts +++ b/api/src/middlewares/unmatched-routes.middleware.ts @@ -3,7 +3,7 @@ import { HTTP_CODES, HTTP_TEXTS } from "../constants/index.js"; /** * Middleware function to handle unmatched routes. - * + * * @param req - The Express request object. * @param res - The Express response object. */ diff --git a/api/src/models/types.ts b/api/src/models/types.ts index 605c176ea..41ad999de 100644 --- a/api/src/models/types.ts +++ b/api/src/models/types.ts @@ -6,7 +6,7 @@ export interface User { * The email address of the user. */ email: string; - + /** * The password of the user. */ diff --git a/api/src/routes/auth.routes.ts b/api/src/routes/auth.routes.ts index 359b070c1..60b1755b9 100644 --- a/api/src/routes/auth.routes.ts +++ b/api/src/routes/auth.routes.ts @@ -10,7 +10,7 @@ const router = express.Router(); /** * Route for user login. - * + * * @route POST /user-session * @group Authentication * @param {object} req.body - The request body containing user credentials. @@ -26,7 +26,7 @@ router.post( /** * Route for requesting SMS token. - * + * * @route POST /request-token-sms * @group Authentication * @param {object} req.body - The request body containing user information. diff --git a/api/src/services/contentMapper.service.ts b/api/src/services/contentMapper.service.ts index 7ee2dfc87..c717dc310 100644 --- a/api/src/services/contentMapper.service.ts +++ b/api/src/services/contentMapper.service.ts @@ -47,11 +47,12 @@ const putTestData = async (req: Request) => { */ contentTypes.map((type: any, index: any) => { const fieldIds: string[] = []; - const fields = type?.fieldMapping?.map?.((field: any) => { - const id = field?.id || uuidv4(); - fieldIds.push(id); - return { id, isDeleted: true, ...field }; - }) ?? []; + const fields = + type?.fieldMapping?.map?.((field: any) => { + const id = field?.id || uuidv4(); + fieldIds.push(id); + return { id, isDeleted: true, ...field }; + }) ?? []; FieldMapperModel.update((data: any) => { data.field_mapper = [...(data?.field_mapper ?? []), ...fields]; }); @@ -433,7 +434,7 @@ const updateContentType = async (req: Request) => { }; /** * Resets the field mapping and content mapping for a specific content type in a project. - * + * * @param req - The request object containing the parameters and body. * @returns An object with a message indicating the success of the reset operation. * @throws {BadRequestError} If the project status or current step is not valid for resetting the content mapping. @@ -550,7 +551,7 @@ const resetToInitialMapping = async (req: Request) => { }; /** * Resets all the content types mapping for a specific project. - * + * * @param projectId - The ID of the project. * @returns The project details after resetting the content types mapping. * @throws {BadRequestError} If the content mapper or project is not found. diff --git a/api/src/services/org.service.ts b/api/src/services/org.service.ts index 29dcb21d5..1719ce781 100644 --- a/api/src/services/org.service.ts +++ b/api/src/services/org.service.ts @@ -316,7 +316,7 @@ const getStackStatus = async (req: Request) => { */ const getStackLocal = async (token_payload: any, data: any) => { const srcFun = "getStackLocal"; - return new Promise( async (resolve) => { + return new Promise(async (resolve) => { const authtoken = await getAuthtoken( token_payload?.region, token_payload?.user_id diff --git a/api/src/services/projects.service.ts b/api/src/services/projects.service.ts index 6cff959ba..7fd806bed 100644 --- a/api/src/services/projects.service.ts +++ b/api/src/services/projects.service.ts @@ -196,8 +196,11 @@ const updateProject = async (req: Request) => { ProjectModelLowdb.update((data: any) => { data.projects[projectIndex].name = updateData?.name; data.projects[projectIndex].description = updateData?.description; - if(data.projects[projectIndex].isNewStack === false && updateData?.isNewStack === true){ - data.projects[projectIndex].isNewStack = updateData?.isNewStack ; + if ( + data.projects[projectIndex].isNewStack === false && + updateData?.isNewStack === true + ) { + data.projects[projectIndex].isNewStack = updateData?.isNewStack; data.projects[projectIndex].newStackId = updateData?.newStackId; } data.projects[projectIndex].updated_by = user_id; @@ -243,7 +246,7 @@ const updateProject = async (req: Request) => { /** * Updates the legacy CMS for a project. - * + * * @param req - The request object containing the parameters and body. * @returns An object with the status and data of the update operation. * @throws BadRequestError if the project status is invalid. @@ -329,7 +332,7 @@ const updateLegacyCMS = async (req: Request) => { /** * Updates the affix of a project. - * + * * @param req - The request object containing the parameters and body. * @returns An object with the status and data properties. */ @@ -366,7 +369,7 @@ const updateAffix = async (req: Request) => { /** * Affixes the confirmation to a project in the database. - * + * * @param req - The request object containing the parameters and body. * @returns An object with the status and data properties. */ @@ -544,7 +547,7 @@ const fileformatConfirmation = async (req: Request) => { /** * Updates the destination stack for a project. - * + * * @param req - The request object containing the parameters and body. * @returns An object with the status and data of the update operation. * @throws BadRequestError if the project status is invalid or the destination stack is not found. @@ -855,7 +858,7 @@ const deleteProject = async (req: Request) => { /** * Reverts a project by setting its 'isDeleted' property to false. - * + * * @param req - The request object containing the parameters and body. * @returns An object with the status and data of the reverted project. * @throws {NotFoundError} If the project is not found. @@ -903,7 +906,6 @@ const revertProject = async (req: Request) => { } }; - export const projectService = { getAllProjects, getProject, diff --git a/api/src/validators/cms.validator.ts b/api/src/validators/cms.validator.ts index 7d391949e..024726b5e 100644 --- a/api/src/validators/cms.validator.ts +++ b/api/src/validators/cms.validator.ts @@ -3,7 +3,7 @@ import { VALIDATION_ERRORS } from "../constants/index.js"; /** * Validates the 'legacy_cms' field in the request body. - * + * * @returns {Object} The validation schema for 'legacy_cms' field. */ export default checkSchema({ diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx index 0b7f5d6c0..84ff957fa 100644 --- a/ui/src/common/assets/icons.tsx +++ b/ui/src/common/assets/icons.tsx @@ -1,3 +1,11 @@ +/** + * SVG component for the "NO_PROJECTS_SEARCH" icon. + * + * @remarks + * This SVG represents an icon used for indicating no search results in a project. + * + * @returns The SVG component. + */ export const NO_PROJECTS_SEARCH = ( ); +/** + * This file contains the definition of the NO_PROJECTS SVG icon. + * The icon represents a graphic illustration of a folder with no projects. + * It is used as a visual representation when there are no projects available. + */ export const NO_PROJECTS = ( ); +/** + * SVG icon component for a caret pointing right. + * + * @component + * @name CARET_RIGHT + */ export const CARET_RIGHT = ( ); +/** + * SVG icon component for the trash icon. + * @constant + */ export const TRASH = ( ); +/** + * SVG icon for search. + */ export const SEARCH_ICON = ( ); -export const LOG_OUT = ( - - - - +/** + * SVG icon for logging out. + */ +export const LOG_OUT = ( + + + + -); +); +/** + * SVG icon component for the magnify icon. + * + * @remarks + * This component renders an SVG icon for the magnify icon. + * + * @returns The SVG icon component. + */ export const MAGNIFY = ( - - - - + + + + ); +/** + * SVG icon component for DEMAGNIFY. + * + * @remarks + * This component renders an SVG icon for the DEMAGNIFY action. + * + * @returns The SVG icon component. + */ export const DEMAGNIFY = ( - - - - + + + ); diff --git a/ui/src/components/AccountPage/accountPage.interface.ts b/ui/src/components/AccountPage/accountPage.interface.ts index 761991296..a9e11bcc8 100644 --- a/ui/src/components/AccountPage/accountPage.interface.ts +++ b/ui/src/components/AccountPage/accountPage.interface.ts @@ -1,5 +1,8 @@ import { LoginType } from '../../pages/Login/login.interface'; +/** + * Represents an account object. + */ export interface AccountObj { children: React.ReactNode; data: LoginType; diff --git a/ui/src/components/AccountPage/index.scss b/ui/src/components/AccountPage/index.scss index 9af38e4f2..2de759609 100644 --- a/ui/src/components/AccountPage/index.scss +++ b/ui/src/components/AccountPage/index.scss @@ -1,5 +1,11 @@ @import '../../scss/variables'; +/** + * Styles for the AccountPage component. + * + * The AccountPage component is a container component that represents the account page of the application. + * It contains styles for the layout, logo, background image, action section, content, heading, and circles. + */ .AccountPage { align-items: stretch; display: flex; @@ -153,6 +159,17 @@ } } +/** + * Styles for the copyright text in the AccountPage component. + * + * CSS properties: + * - bottom: 1.5rem; + * - color: $color-font-base; + * - font-size: 0.75rem; + * - letter-spacing: 0.02em; + * - left: 2.5rem; + * - position: absolute; + */ .copyright_text { bottom: 1.5rem; color: $color-font-base; diff --git a/ui/src/components/AccountPage/index.tsx b/ui/src/components/AccountPage/index.tsx index 4b1316670..8809a70b8 100644 --- a/ui/src/components/AccountPage/index.tsx +++ b/ui/src/components/AccountPage/index.tsx @@ -4,6 +4,12 @@ import { AccountObj } from './accountPage.interface'; // Styles import './index.scss'; +/** + * Renders the AccountPage component. + * + * @param {AccountObj} props - The props object containing data for the component. + * @returns {JSX.Element} The rendered AccountPage component. + */ const AccountPage = (props: AccountObj): JSX.Element => { const { heading, copyrightText } = props.data; diff --git a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts index 6ce7ae7f6..3c5be0314 100644 --- a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts +++ b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts @@ -1,36 +1,151 @@ import { Advanced, FieldMapType } from '../ContentMapper/contentMapper.interface'; +/** + * Represents the properties of a schema. + */ export interface SchemaProps { + /** + * The type of the field. + */ fieldtype: string; + + /** + * The updated settings for the field. + */ value: UpdatedSettings; + + /** + * The ID of the row. + */ rowId: string; + + /** + * A function to update the field settings. + * @param rowId - The ID of the row. + * @param value - The advanced settings. + * @param checkBoxChanged - Indicates whether the checkbox has changed. + */ updateFieldSettings: (rowId: string, value: Advanced, checkBoxChanged: boolean) => void; + + /** + * Indicates whether the field is localized. + */ isLocalised: boolean; + + /** + * A function to close the modal. + */ closeModal: () => void; + + /** + * The data for the field map. + */ data: FieldMapType; + + /** + * The ID of the project. + */ projectId?: string; } +/** + * Represents the updated settings for a component. + */ export interface UpdatedSettings { + /** + * The minimum number of characters allowed. + */ MinChars?: string; + + /** + * The maximum number of characters allowed. + */ MaxChars?: number; + + /** + * The minimum range allowed. + */ MinRange?: number; + + /** + * The maximum range allowed. + */ MaxRange?: number; + + /** + * The minimum size allowed. + */ minSize?: string; + + /** + * The maximum size allowed. + */ maxSize?: number; + + /** + * The default value for the component. + */ DefaultValue?: string; + + /** + * The regular expression used for validation. + */ ValidationRegex?: string; + + /** + * The title of the component. + */ title?: string; + + /** + * The URL associated with the component. + */ url?: string; + + /** + * Indicates whether the component is mandatory. + */ Mandatory?: boolean; + + /** + * Indicates whether only images are allowed. + */ AllowImagesOnly?: boolean; + + /** + * Indicates whether the component is non-localizable. + */ NonLocalizable?: boolean; } +/** + * Represents the props for the AdvanceProperties component. + */ export interface Props { + /** + * The data for the component. + */ data: SchemaProps; + + /** + * The optional states for the component. + */ states?: StateType; + + /** + * The callback function for handling changes in the component. + * @param field - The field that was changed. + * @param event - The event object associated with the change. + * @param checkBoxChanged - Indicates whether the change was triggered by a checkbox. + */ handleChange?: (field: string, event: any, checkBoxChanged: boolean) => void; + + /** + * The callback function for handling toggles in the component. + * @param field - The field that was toggled. + * @param value - The new value of the toggle. + * @param checkBoxChanged - Indicates whether the toggle was triggered by a checkbox. + */ handleToggle?: (field: string, value: boolean, checkBoxChanged: boolean) => void; } diff --git a/ui/src/components/AdvancePropertise/index.scss b/ui/src/components/AdvancePropertise/index.scss index 212c06f8b..ab126ed6e 100644 --- a/ui/src/components/AdvancePropertise/index.scss +++ b/ui/src/components/AdvancePropertise/index.scss @@ -1,6 +1,15 @@ @import '../../scss/variables'; .options-class { + /** + * Styles for the AdvancePropertise component. + * + * This SCSS file contains styles for the AdvancePropertise component, which is used to define + * advanced properties for a UI component. The styles include flexbox properties for layout, + * margin, grid template columns, and gap. + * + * @module components/AdvancePropertise + */ display: flex; flex-direction: column; justify-content: space-between; @@ -8,14 +17,34 @@ margin-bottom: 20px; grid-template-columns: 1fr; gap: 20px; -} + } +/** + * Styles for the option label in the AdvancePropertise component. + * + * @class option-label + * @memberof components.AdvancePropertise + * @cssprop {margin-bottom} margin-bottom - The margin bottom value for the option label. + */ .option-label { margin-bottom: $px-10; } +/** + * Styles for the non-localizable-message class. + */ .non-localizable-message { margin-top: 0; margin-left: 30px; } +/** + * + * This SCSS file contains styles for the AdvancePropertise component. + * + * The styles define various classes for different elements within the component, + * such as radio fields, labels, info styles, options, notes, toggles, fields, + * separators, and select menus. + * + * The classes are used to apply specific styling to these elements in the component. + */ .modal-data { padding: 0.75rem; .radio-field { diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx index 373737a52..060d9f937 100644 --- a/ui/src/components/AdvancePropertise/index.tsx +++ b/ui/src/components/AdvancePropertise/index.tsx @@ -22,7 +22,13 @@ import { ContentType } from '../ContentMapper/contentMapper.interface'; // Styles import './index.scss'; +/** + * Component for displaying advanced properties. + * @param props - The schema properties. + * @returns The rendered component. + */ const AdvancePropertise = (props: SchemaProps) => { + // State for toggle states const [toggleStates, setToggleStates] = useState({ minChars: props?.value?.MinChars, maxChars: props?.value?.MaxChars, @@ -41,6 +47,7 @@ const AdvancePropertise = (props: SchemaProps) => { embedAssests: true }); + // State for content types const [contentTypes, setContentTypes] = useState([]); const [ctValue, setCTValue] = useState(null); @@ -48,13 +55,22 @@ const AdvancePropertise = (props: SchemaProps) => { fetchContentTypes(''); }, []) - // Fetch content types list + /** + * Fetches the content types list. + * @param searchText - The search text. + */ const fetchContentTypes = async (searchText: string) => { const { data } = await getContentTypes(props?.projectId ?? '', 0, 10, searchText || ''); //org id will always present setContentTypes(data?.contentTypes); }; + /** + * Handles the change event for input fields. + * @param field - The field name. + * @param event - The change event. + * @param checkBoxChanged - Indicates if the checkbox was changed. + */ const handleOnChange = (field: string, event: React.ChangeEvent, checkBoxChanged: boolean) => { setToggleStates((prevStates) => ({ ...prevStates, @@ -76,6 +92,12 @@ const AdvancePropertise = (props: SchemaProps) => { ); }; + /** + * Handles the toggle change event. + * @param field - The field name. + * @param value - The new value. + * @param checkBoxChanged - Indicates if the checkbox was changed. + */ const handleToggleChange = (field: string, value: boolean, checkBoxChanged: boolean) => { setToggleStates((prevStates) => ({ ...prevStates, @@ -97,13 +119,14 @@ const AdvancePropertise = (props: SchemaProps) => { ); }; + // Option for content types const option = Array.isArray(contentTypes) ? contentTypes.map((option) => ({ label: option?.otherCmsTitle, value: option?.otherCmsTitle })) : [{ label: contentTypes, value: contentTypes }]; return ( <> - +
{(props?.fieldtype === 'Single Line Textbox' || props?.fieldtype === 'Multi Line Textbox') && ( diff --git a/ui/src/components/Card/card.interface.ts b/ui/src/components/Card/card.interface.ts index 74c43df14..fe72a87b3 100644 --- a/ui/src/components/Card/card.interface.ts +++ b/ui/src/components/Card/card.interface.ts @@ -1,5 +1,8 @@ import { ProjectsObj } from '../../pages/Projects/projects.interface'; +/** + * Represents the project type. + */ export interface ProjectType { project?: ProjectsObj; } diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss index 8a3917eaa..019a9875f 100644 --- a/ui/src/components/Card/card.scss +++ b/ui/src/components/Card/card.scss @@ -1,5 +1,8 @@ @import '../../scss/variables'; +/** + * Styles for the ProjectCard component. + */ .ProjectCard { background: $color-brand-white-base; border-radius: 0.6rem; @@ -7,14 +10,26 @@ transition: box-shadow 0.3s ease; width: 20rem; } + +/** + * Styles for the wrapper of the ProjectCard component. + */ .ProjectCardWrapper { padding: 18px; } + +/** + * Styles for the heading of the ProjectCard component. + */ .ProjectCard__heading { display: flex; margin-bottom: $px-20; padding: 0; } + +/** + * Styles for the title of the ProjectCard component. + */ .ProjectCard__title { color: $color-font-base; display: -webkit-box; @@ -28,6 +43,10 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; } + +/** + * Styles for the footer of the ProjectCard component. + */ .ProjectCard__footer { display: flex; position: relative; @@ -39,27 +58,44 @@ padding: 0.9375rem 1.875rem; align-items: center; } + +/** + * Styles for the content of the ProjectCard component. + */ .ProjectCard__content { // margin: 0 1rem 2rem; padding: 0; text-align: center; } + +/** + * Styles for the status unit of the ProjectCard component. + */ .ProjectCard__Staus-unit { padding: 0 1em; } + +/** + * Styles for the unit of the ProjectCard component. + */ .ProjectCard__unit { border-left: 1px solid $color-brand-secondary-lightest; padding: 0 1em; } -.ProjectCard__unit:not(:last-child) { - border-right: 1px solid $color-base-gray-40; -} + +/** + * Styles for the stats of the ProjectCard component. + */ .ProjectCard__stats { display: flex; flex-wrap: nowrap; justify-content: center; padding-bottom: $px-10; } + +/** + * Styles for the stats category of the ProjectCard component. + */ .ProjectCard__stats-category { border: 1px solid $color-brand-secondary-lightest; border-radius: 8px; @@ -68,31 +104,56 @@ color: $color-font-base; padding: 4px 8px; text-transform: capitalize; - svg { - margin-right: 5px; - } - &.draft { - background-color: $color-base-white-10; - } - &.completed { - background-color: $color-brand-success-light; - } - &.failed { - background-color: $color-brand-fail-light; - } - &.pending { - background-color: $color-brand-attention-light; - } } + +/** + * Styles for the draft stats category of the ProjectCard component. + */ +.ProjectCard__stats-category.draft { + background-color: $color-base-white-10; +} + +/** + * Styles for the completed stats category of the ProjectCard component. + */ +.ProjectCard__stats-category.completed { + background-color: $color-brand-success-light; +} + +/** + * Styles for the failed stats category of the ProjectCard component. + */ +.ProjectCard__stats-category.failed { + background-color: $color-brand-fail-light; +} + +/** + * Styles for the pending stats category of the ProjectCard component. + */ +.ProjectCard__stats-category.pending { + background-color: $color-brand-attention-light; +} + +/** + * Styles for the stats title of the ProjectCard component. + */ .ProjectCard__stats-Title { color: $color-stepper-title; display: block; font-size: $size-font-small; margin-bottom: $space-4; } + +/** + * Styles for the validation color of the ProjectCard component. + */ .validation-color { color: $color-brand-warning-medium; } + +/** + * Styles for the CMS of the ProjectCard component. + */ .ProjectCard__cms { border: 1px solid $color-brand-secondary-lightest; border-radius: 8px; @@ -101,6 +162,10 @@ padding: 4px 8px; text-transform: capitalize; } + +/** + * Styles for the modified date of the ProjectCard component. + */ .ProjectCard__modified-date { color: $color-stepper-title; display: block; diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx index 44bc169f1..ffd010899 100644 --- a/ui/src/components/Card/index.tsx +++ b/ui/src/components/Card/index.tsx @@ -12,16 +12,26 @@ import { getProject } from '../../services/api/project.service'; import './card.scss'; import { RootState } from '../../store'; +/** + * Renders a card component for a project in a list. + * @param project - The project object containing project details. + */ const CardList = ({ project }: ProjectType) => { const navigate = useNavigate(); - const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation); + const selectedOrganisation = useSelector((state: RootState) => state?.authentication?.selectedOrganisation); const [projectDetails, setprojectDetails] = useState(''); + /** + * Handles the click event when a project card is clicked. + * Navigates to the project migration steps page. + * @param id - The ID of the project. + */ const onClickProject = (id: string) => { if (isEmptyString(id)) return; navigate(`/projects/${id}/migration/steps/1`); }; + const iconMapping: { [key: string]: string } = { '0': 'Information', '1': 'Warning', @@ -31,6 +41,7 @@ const CardList = ({ project }: ProjectType) => { '5': 'CheckCircleDark', '6': 'Close', }; + const statusClassMapping: { [key: string]: string } = { '0': 'draft', '1': 'pending', @@ -40,6 +51,7 @@ const CardList = ({ project }: ProjectType) => { '5': 'completed', '6': 'failed', }; + const status = project?.status ?? '0'; const statusClass = statusClassMapping[status] || ''; const icon = iconMapping[status] || ''; @@ -56,7 +68,7 @@ const CardList = ({ project }: ProjectType) => { }; fetchProject(); }, [selectedOrganisation?.value, project?.id]); - + return (
onClickProject(project?.id || '')}> @@ -66,7 +78,7 @@ const CardList = ({ project }: ProjectType) => {
{project?.name &&

{project?.name}

}
- +
diff --git a/ui/src/components/Common/AddStack/addStack.interface.ts b/ui/src/components/Common/AddStack/addStack.interface.ts index da16ddc96..944c38fab 100644 --- a/ui/src/components/Common/AddStack/addStack.interface.ts +++ b/ui/src/components/Common/AddStack/addStack.interface.ts @@ -1,70 +1,199 @@ import { IDropDown } from '../../../context/app/app.interface'; +/** + * Represents the data structure for adding a stack in CMS. + */ export interface AddStackCMSData { + /** + * The primary call-to-action for the stack. + */ primary_cta: PrimaryCta; + + /** + * The secondary call-to-action for the stack. + */ secondary_cta: SecondaryCta; + + /** + * The description of the stack. + */ stack_description: string; + + /** + * The placeholder text for the stack description. + */ stack_description_placeholder: string; + + /** + * The localized description of the stack. + */ stack_locale_description: string; + + /** + * The locales supported by the stack. + */ stack_locales: string; + + /** + * The name of the stack. + */ stack_name: string; + + /** + * The placeholder text for the stack name. + */ stack_name_placeholder: string; + + /** + * The title of the stack. + */ title: string; } +/** + * Represents the primary call-to-action button for adding a stack. + */ export interface PrimaryCta { title: string; } +/** + * Represents the Secondary CTA interface. + */ export interface SecondaryCta { title: string; } +/** + * Interface representing the default data for AddStackCMSData. + */ export const defaultAddStackCMSData: AddStackCMSData = { + /** + * The title of the primary call-to-action button. + */ primary_cta: { title: '' }, + /** + * The title of the secondary call-to-action button. + */ secondary_cta: { title: '' }, + /** + * The description of the stack. + */ stack_description: '', + /** + * The placeholder for the stack description input field. + */ stack_description_placeholder: '', + /** + * The localized description of the stack. + */ stack_locale_description: '', + /** + * The locales supported by the stack. + */ stack_locales: '', + /** + * The name of the stack. + */ stack_name: '', + /** + * The placeholder for the stack name input field. + */ stack_name_placeholder: '', + /** + * The title of the stack. + */ title: '' }; +/** + * Represents the props for the AddStack component. + */ export interface AddStackProps { + /** + * The default values for the stack. + */ defaultValues: Stack; + + /** + * The locales for the dropdown. + */ locales: IDropDown[]; - onSubmit: (value: Stack) => {}; + + /** + * The function to be called when the form is submitted. + * @param value - The submitted stack value. + */ + onSubmit: (value: Stack) => void; + + /** + * The selected organisation. + */ selectedOrganisation: string; + + /** + * The function to close the modal. + */ closeModal: () => void; } +/** + * Represents a stack. + */ export interface Stack { + /** + * The name of the stack. + */ name: string; + + /** + * The description of the stack. + */ description: string; + + /** + * The locale of the stack. + */ locale: string; } +/** + * Represents the data structure for a stack. + */ export interface StackData { name: string; description: string; locale: Locale; } +/** + * Represents a locale. + */ interface Locale { value: string; } +/** + * Represents the response object returned by the server. + */ export interface Response { data: Data; } +/** + * Represents the data structure for the 'Data' interface. + */ interface Data { locales: LocaleType; } +/** + * Represents a type that defines a mapping of string keys to string values. + */ interface LocaleType { [key: string]: string; } +/** + * Represents the errors that can occur when adding a stack. + */ export interface Errors { name: string; locale: string; diff --git a/ui/src/components/Common/AddStack/addStack.scss b/ui/src/components/Common/AddStack/addStack.scss index 5a6647c80..d768305c2 100644 --- a/ui/src/components/Common/AddStack/addStack.scss +++ b/ui/src/components/Common/AddStack/addStack.scss @@ -1,11 +1,28 @@ +/** + * Styles for the ReactModal__add-stack class. + */ .ReactModal__add-stack { + /** + * Styles for the textarea inside the Description-field class. + * Disables the resizing of the textarea. + */ .Description-field > textarea { resize: none; } + + /** + * Styles for the single-value inside the Select__single-value class. + * Overrides the width to 200px. + */ .Select__single-value { width: 200px !important; } } + +/** + * Styles for the ReactModal__Overlay, ReactModal__Content, and ReactModal__Content__body.selectWrapperBody classes. + * Sets the overflow property to visible. + */ .ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody { overflow: visible; } diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx index a8dc2ef24..9a6605c50 100644 --- a/ui/src/components/Common/AddStack/addStack.tsx +++ b/ui/src/components/Common/AddStack/addStack.tsx @@ -37,11 +37,22 @@ export interface Stack { locale: string; } +/** + * Renders the AddStack component. + * @param props - The component props. + * @returns The JSX element representing the AddStack component. + */ const AddStack = (props: any): JSX.Element => { + // State variables const [isProcessing, setIsProcessing] = useState(false); const [isLoading, setIsLoading] = useState(true); const [allLocales, setAllLocales] = useState([]); const [addStackCMSData, setAddStackCMSData] = useState(defaultAddStackCMSData); + + /** + * Handles the form submission. + * @param formData - The form data. + */ const onSubmit = async (formData: any) => { setIsProcessing(true); const resp = await props?.onSubmit({ @@ -63,10 +74,10 @@ const AddStack = (props: any): JSX.Element => { }; useEffect(() => { - //check if offline CMS data field is set to true, if then read data from cms data file. + // Check if offline CMS data field is set to true, if then read data from cms data file. getCMSDataFromFile(CS_ENTRIES?.ADD_STACK) .then((data: AddStackCMSData) => { - //Check for null + // Check for null if (!data) { setAddStackCMSData(defaultAddStackCMSData); setIsLoading(false); @@ -81,7 +92,7 @@ const AddStack = (props: any): JSX.Element => { setIsLoading(false); }); - //fetch all locales + // Fetch all locales getAllLocales(props?.selectedOrganisation) .then((response: any) => { const rawMappedLocalesMapped = @@ -100,7 +111,6 @@ const AddStack = (props: any): JSX.Element => { .catch((err: any) => { console.error(err); }); - //org id will always be there window.addEventListener('popstate', props?.closeModal); @@ -121,7 +131,7 @@ const AddStack = (props: any): JSX.Element => { { + validate={(values: any) => { const errors: any = {}; if (!values?.name || values?.name?.trim().length < 1) { errors.name = 'Stack name required'; @@ -213,13 +223,13 @@ const AddStack = (props: any): JSX.Element => { error={(meta?.error || meta?.submitError) && meta?.touched} /> {meta?.error && meta?.touched && ( - - {meta?.error} - - )} + + {meta?.error} + + )}
); diff --git a/ui/src/components/Common/Card/card.interface.ts b/ui/src/components/Common/Card/card.interface.ts index c48478488..db2068ec0 100644 --- a/ui/src/components/Common/Card/card.interface.ts +++ b/ui/src/components/Common/Card/card.interface.ts @@ -1,11 +1,36 @@ +/** + * Represents the interface for a card type. + */ export interface ICardType { + /** + * The title of the card. + */ title: string; + + /** + * The group name of the card. + */ group_name?: string; + + /** + * The description of the card. + */ description?: string; + + /** + * The CMS ID of the card. + */ cms_id?: string; + + /** + * The file format ID of the card. + */ fileformat_id?: string; } +/** + * Represents the default card type. + */ export const defaultCardType: ICardType = { title: '', group_name: '', diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss index 6d90f2822..8b85919de 100644 --- a/ui/src/components/Common/Card/card.scss +++ b/ui/src/components/Common/Card/card.scss @@ -1,5 +1,11 @@ @import '../../../scss/variables'; +/** + * Styles for the service list container. + * + * @class service_list + * @memberof components.Common.Card + */ .service_list { text-align: center; display: flex; @@ -9,10 +15,18 @@ margin-bottom: 10px; } +/** + * Styles for the trigger_list class. + * This class sets the minimum width of 120px for the element. + */ .trigger_list { min-width: 120px !important; } +/** + * Styles for the connector list in the card component. + * Overrides the default styles of the tippy-box-light class. + */ .connector_list .tippy-box-light { max-width: $px-360 !important; padding: $px-15 !important; @@ -21,6 +35,9 @@ font-weight: $font-weight-regular; } +/** + * Styles for the connector list, action list, and trigger list components. + */ .connector_list, .action_list, .trigger_list { @@ -35,19 +52,61 @@ gap: 12px; } +/** + * Styles for the automation connectors help text within the connector list. + * + * Selectors: + * - .connector_list: The parent container for the connector list. + * - .tippy-box-light: The tooltip box with light theme. + * - #automationConnectorsHelpText: The help text element with the ID "automationConnectorsHelpText". + * + * CSS Properties: + * - cursor: Sets the cursor type to default. + * - color: Sets the text color to the base gray-20 color variable. + */ .connector_list .tippy-box-light #automationConnectorsHelpText { cursor: default; color: $color-base-gray-20; } +/** + * Applies a box shadow effect to the .connector_list element when hovered. + * + * @hover + * @cssproperty box-shadow - The box shadow effect to apply. + * @cssvalue 0 3px $px-5 $px-2 rgb(215 215 215) - The specific box shadow values. + */ .connector_list:hover { box-shadow: 0 3px $px-5 $px-2 rgb(215 215 215); } +/** + * Styles for the service icon in the card component. + * + * @class service_icon + * @memberof components.Common.Card + * + * @cssprop {padding} padding - The padding of the service icon. + */ .service_icon { padding: $space-20 0; } +/** + * Styles for the service title in the card component. + * + * @class .service_title + * @memberof components.Common.Card + * + * @cssprop {padding} padding - The padding of the service title. + * @cssprop {min-height} min-height - The minimum height of the service title. + * @cssprop {max-height} max-height - The maximum height of the service title. + * @cssprop {overflow-y} overflow-y - The overflow behavior for the service title. + * @cssprop {font-weight} font-weight - The font weight of the service title. + * @cssprop {font-size} font-size - The font size of the service title. + * @cssprop {border-radius} border-radius - The border radius of the service title. + * @cssprop {background} background - The background color of the service title. + */ .service_title { padding: $px-5 $px-5; min-height: $px-40; @@ -59,6 +118,19 @@ background: $color-base-white-10; } +/** + * Styles for the header of the full-screen page layout. + * + * @class .PageLayout--full-screen .PageLayout__head + * @memberof components.Common.Card + * + * @cssprop {position} position - The position of the header. + * @cssprop {border} border-bottom - The bottom border of the header. + * @cssprop {box-shadow} box-shadow - The shadow of the header. + * @cssprop {border} border - The border of the header. + * @cssprop {margin} margin-top - The top margin of the header. + * @cssprop {z-index} z-index - The stacking order of the header. + */ .PageLayout--full-screen .PageLayout__head { position: relative; border-bottom: 1px solid rgb(226, 235, 248); @@ -67,6 +139,13 @@ margin-top: 3.5rem; z-index: 8; } +/** + * CSS class for a centered card title. + * Adds a margin of 10px to the title. + */ +.centered-card-title { + margin: 10px; +} .centered-card-title{ margin: 10px; } diff --git a/ui/src/components/Common/Card/card.tsx b/ui/src/components/Common/Card/card.tsx index fc0a9b7e1..2d2d081fe 100644 --- a/ui/src/components/Common/Card/card.tsx +++ b/ui/src/components/Common/Card/card.tsx @@ -5,6 +5,9 @@ import { addDomainInPath } from '../../../utilities/functions'; import './card.scss'; +/** + * Props for the Card component. + */ type CardProps = { data: any; idField?: string; @@ -13,6 +16,15 @@ type CardProps = { cardType?: string; }; +/** + * Renders a card component. + * + * @param data - The data object for the card. + * @param selectedCard - The currently selected card. + * @param onCardClick - The callback function to handle card click event. + * @param cardType - The type of the card. + * @param idField - The field name for the card's ID. Defaults to 'id'. + */ const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: CardProps) => { const imgStyle = { width: cardType === 'legacyCMS' ? '60px' : '46px', diff --git a/ui/src/components/Common/DeleteProjectModal/index.tsx b/ui/src/components/Common/DeleteProjectModal/index.tsx index d5abbf786..b175dfadb 100644 --- a/ui/src/components/Common/DeleteProjectModal/index.tsx +++ b/ui/src/components/Common/DeleteProjectModal/index.tsx @@ -15,6 +15,12 @@ import { deleteProject } from '../../../services/api/project.service'; // Interfaces import { SettingsModalProps } from '../../../components/Modal/modal.interface'; +/** + * Renders a modal component for deleting a project. + * + * @param {SettingsModalProps} props - The component props. + * @returns {JSX.Element} The rendered DeleteProjectModal component. + */ const DeleteProjectModal = (props: SettingsModalProps) => { const { closeModal, @@ -24,7 +30,13 @@ const DeleteProjectModal = (props: SettingsModalProps) => { selectedOrg } = props; - const handleDeleteProject = async (closeModal: () => void) => { + /** + * Handles the deletion of the project. + * + * @param {() => void} closeModal - A function to close the modal. + * @returns {Promise} A promise that resolves when the project is deleted. + */ + const handleDeleteProject = async (closeModal: () => void): Promise => { const response = await deleteProject(selectedOrg?.value || '', projectId ?? '',); if (response?.status === 200) { @@ -44,6 +56,7 @@ const DeleteProjectModal = (props: SettingsModalProps) => { }, 1200) } } + return ( <> ) => void; } +/** + * Renders a component that displays a link and a checkbox. + * + * @component + * @example + * // Usage: + * { + * console.log('Checkbox changed:', e.target.checked); + * }} + * /> + * + * @param {Object} props - The component props. + * @param {Object} props.cta - The link details. + * @param {string} props.cta.href - The URL of the link. + * @param {string} props.cta.title - The title of the link. + * @param {boolean} props.isCheckedBoxChecked - Indicates whether the checkbox is checked. + * @param {boolean} props.isDisable - Indicates whether the component is disabled. + * @param {string} props.label - The label for the checkbox. + * @param {boolean} props.isLabelFullWidth - Indicates whether the label should take full width. + * @param {function} props.onChange - The event handler for the checkbox change event. + * @returns {JSX.Element} The rendered component. + */ const DocLink = ({ cta, isCheckedBoxChecked,