Merge pull request #445 from bluewave-labs/develop

Develop
bluewave-labs · Dec 29, 2024 · b32fa47 · b32fa47
2 parents dcd5abb + 7dd4a4f
commit b32fa47
Show file tree

Hide file tree

Showing 39 changed files with 377 additions and 283 deletions.
diff --git a/backend/src/controllers/guide.controller.js b/backend/src/controllers/guide.controller.js
@@ -2,7 +2,9 @@ const bannerService = require("../service/banner.service");
 const guidelogService = require("../service/guidelog.service");
 const helperLinkService = require("../service/helperLink.service");
 const popupService = require("../service/popup.service");
+const hintService = require("../service/hint.service");
 const { internalServerError } = require("../utils/errors.helper");
+
 class GuideController {
     async getGuidesByUrl(req, res) {
         try {
@@ -11,12 +13,13 @@ class GuideController {
             if (!url || typeof url !== 'string') {
                 return res.status(400).json({ errors: [{ msg: "URL is missing or invalid" }] });
             }
-            const [banner, popup, helperLink] = await Promise.all([
+            const [banner, popup, hint, helperLink] = await Promise.all([
                 bannerService.getBannerByUrl(url),
                 popupService.getPopupByUrl(url),
+                hintService.getHintByUrl(url),
                 helperLinkService.getAllHelpersWithLinks(),
             ]);
-            res.status(200).json({ banner, popup, helperLink });
+            res.status(200).json({ banner, popup, hint, helperLink });
         } catch (error) {
             internalServerError(
                 "GET_GUIDES_BY_URL_ERROR",
@@ -36,22 +39,25 @@ class GuideController {
                 return res.status(400).json({ errors: [{ msg: "userId is missing or invalid" }] });
             }
 
-            const [completePopupLogs, completeBannerLogs, completeHelperLogs] = await Promise.all([
+            const [completePopupLogs, completeBannerLogs, completeHintLogs, completeHelperLogs] = await Promise.all([
                 guidelogService.getCompletePopupLogs(userId),
                 guidelogService.getCompleteBannerLogs(userId),
+                guidelogService.getCompleteHintLogs(userId),
                 guidelogService.getCompleteHelperLogs(userId),
             ]);
 
             const popupIds = completePopupLogs.map(log => log.guideId);
             const bannerIds = completeBannerLogs.map(log => log.guideId);
+            const hintIds = completeHintLogs.map(log => log.guideId);
             const helperLinkIds = completeHelperLogs.map(log => log.guideId);
 
-            const [banner, popup, helperLink] = await Promise.all([
-                bannerService.getIncompleteBannersByUrl(url, bannerIds),
+            const [popup, banner, hint, helperLink] = await Promise.all([
                 popupService.getIncompletePopupsByUrl(url, popupIds),
+                bannerService.getIncompleteBannersByUrl(url, bannerIds),
+                hintService.getIncompleteHintsByUrl(url, hintIds),
                 helperLinkService.getIncompleteHelpers(helperLinkIds),
             ]);
-            res.status(200).json({ banner, popup, helperLink });
+            res.status(200).json({popup, banner, hint, helperLink });
 
         } catch (error) {
             internalServerError(

diff --git a/backend/src/models/Hint.js b/backend/src/models/Hint.js
@@ -16,6 +16,11 @@ module.exports = (sequelize, DataTypes) => {
           isIn: [["no action", "open url", "open url in a new tab"]],
         },
       },
+      url: {
+        type: DataTypes.STRING,
+        allowNull: true,
+        defaultValue: "",
+      },
       actionButtonUrl: {
         type: DataTypes.STRING,
         allowNull: true,

diff --git a/backend/src/routes/hint.routes.js b/backend/src/routes/hint.routes.js
@@ -13,6 +13,6 @@ router.put("/edit_hint/:hintId", authenticateJWT, accessGuard(teamPermissions.hi
 router.get("/all_hints", authenticateJWT, hintController.getAllHints);
 router.get("/hints", authenticateJWT, hintController.getHints);
 router.get("/get_hint/:hintId", authenticateJWT, hintController.getHintById);
-// router.get("/get_hint_by_url", hintController.getHintByUrl);
+router.get("/get_hint_by_url", hintController.getHintByUrl);
 
 module.exports = router;
diff --git a/backend/src/server.js b/backend/src/server.js
@@ -44,7 +44,7 @@ sequelize
   .catch((err) => console.log("Error: " + err));
 
 sequelize
-  .sync({ force: false })
+  .sync({ alter: true })
   .then(() => console.log("Models synced with the database..."))
   .catch((err) => console.log("Error syncing models: " + err));
 

diff --git a/backend/src/service/guidelog.service.js b/backend/src/service/guidelog.service.js
@@ -51,6 +51,19 @@ class GuideLogService {
       throw new Error(`Failed to retrieve popup log for user ${userId}: ${err.message}`);
     }
   }
+  async getCompleteHintLogs(userId) {
+    try {
+      return await GuideLog.findAll({
+        where: {
+          userId: userId,
+          completed: true,
+          guideType: GuideType.HINT
+        },
+      });
+    } catch (err) {
+      throw new Error(`Failed to retrieve hint log for user ${userId}: ${err.message}`);
+    }
+  }
 
   async getCompleteHelperLogs(userId) {
     try {

diff --git a/backend/src/service/hint.service.js b/backend/src/service/hint.service.js
@@ -1,5 +1,6 @@
 const db = require("../models");
 const Hint = db.Hint;
+const { Op } = require("sequelize");
 
 class HintService {
   async getAllHints() {
@@ -77,6 +78,19 @@ class HintService {
       throw new Error("Error retrieving Hint by URL");
     }
   };
+
+  async getIncompleteHintsByUrl(url, ids) {
+      try {
+        return await Hint.findAll({
+          where: {
+            url,
+            id: { [Op.notIn]: ids }
+          }
+        });
+      } catch (error) {
+        throw new Error("Error retrieving hint by URL");
+      }
+    };
 }
 
 module.exports = new HintService();
diff --git a/backend/src/test/e2e/hint.test.mjs b/backend/src/test/e2e/hint.test.mjs
@@ -502,6 +502,7 @@ describe("E2e tests hint", () => {
           "createdBy",
           "creator",
           "header",
+          "url",
           "targetElement",
           "tooltipPlacement",
         ]);

diff --git a/backend/src/test/mocks/hint.mock.js b/backend/src/test/mocks/hint.mock.js
@@ -9,6 +9,7 @@ class HintBuilder {
       tooltipPlacement: "top",
       hintContent: "content",
       header: "header",
+      url: "",
       headerBackgroundColor: "#FFFFFF",
       headerColor: "#000000",
       textColor: "#000000",

diff --git a/backend/src/test/unit/controllers/popup.test.js b/backend/src/test/unit/controllers/popup.test.js
@@ -349,7 +349,6 @@ describe("Test popup controller", () => {
       await popupController.editPopup(req, res);
       const status = res.status.getCall(0).args[0];
       const body = res.json.getCall(0).args[0];
-      console.log(body)
       expect(status).to.be.equal(500);
       expect(body).to.be.deep.equal({
         error: "Internal Server Error",

diff --git a/frontend/src/assets/theme.jsx b/frontend/src/assets/theme.jsx
@@ -32,7 +32,7 @@ export const lightTheme = createTheme({
     MuiTabPanel: {
       styleOverrides: {
         root: {
-          padding: 0,
+          padding: '24px 0 0 24px',
         },
       },
     },
@@ -112,7 +112,7 @@ export const darkTheme = createTheme({
     MuiTabPanel: {
       styleOverrides: {
         root: {
-          padding: 0,
+          padding: '24px 0 0 24px',
         },
       },
     },

diff --git a/frontend/src/components/Header/Header.jsx b/frontend/src/components/Header/Header.jsx
@@ -16,7 +16,7 @@ const Header = () => {
 
     return (
         <div className="top-banner">
-            <div className="logo">BlueWave Onboard</div>
+            <div className="logo">GuideFox</div>
             <div className="user-info">
                 <Avatar src="/vendetta.png" alt="User" size="medium" />
                 <div className="user-details">

diff --git a/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
@@ -3,13 +3,16 @@ import DropdownList from "../../DropdownList/DropdownList";
 import CustomTextField from "../../TextFieldComponents/CustomTextField/CustomTextField";
 import "./HintLeftContent.css";
 
-const HintLeftContent = ({ actionButtonText, setActionButtonText, actionButtonUrl, setActionButtonUrl, action, setAction, targetElement, setTargetElement, tooltipPlacement, setTooltipPlacement }) => {
+const HintLeftContent = ({ actionButtonText, setActionButtonText, actionButtonUrl, setActionButtonUrl, action, setAction, targetElement, setTargetElement, tooltipPlacement, setTooltipPlacement, setUrl, url }) => {
   const handleActionButtonText = (event) => {
     setActionButtonText(event.target.value);
   };
   const handleActionButtonUrl = (event) => {
     setActionButtonUrl(event.target.value);
   };
+  const handleUrl = (event) => {
+    setUrl(event.target.value);
+  };
   const handleActionChange = (newAction) => {
     setAction(newAction);
   };
@@ -24,11 +27,19 @@ const HintLeftContent = ({ actionButtonText, setActionButtonText, actionButtonUr
 
   return (
     <div className="left-content-container">
+      <h2 className="hint-label" style={{ marginBottom: 0, marginTop: "16px" }}>
+        Url (can be relative)
+      </h2>
+      <CustomTextField
+        TextFieldWidth="241px"
+        value={url}
+        onChange={handleUrl}
+      />
       <h2 className="hint-label" style={{ marginTop: "16px" }}>
         Action
       </h2>
       <DropdownList
-        actions={["No action", "Open a URL", "Open a URL in a new tab"]}
+        actions={["No action", "Open URL", "Open URL in a new tab"]}
         onActionChange={handleActionChange}
         selectedActionString={action.toLowerCase()}
       />

diff --git a/frontend/src/components/Logo/Logo.jsx b/frontend/src/components/Logo/Logo.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './LogoStyles.module.css';
 
-const Logo = ({ isSidebar = false, logoText = 'BlueWave', highlightText = 'Onboard' }) => {
+const Logo = ({ isSidebar = false, logoText = 'Guide', highlightText = 'Fox' }) => {
     const containerClass = isSidebar ? styles.sidebar : styles.logoContainer;
 
     return (
         <div className={containerClass}>
-            <span className={styles.logoText}>{logoText}&nbsp;</span>
+            <span className={styles.logoText}>{logoText}</span>
             <span className={styles.logoTextPurple}>{highlightText}</span>
         </div>
     );

diff --git a/frontend/src/components/Logo/LogoStyles.css b/frontend/src/components/Logo/LogoStyles.css
diff --git a/frontend/src/components/Logo/LogoStyles.module.css b/frontend/src/components/Logo/LogoStyles.module.css
@@ -15,7 +15,7 @@
 
 .sidebar {
   display: flex;
-  justify-content: center;
+  margin-left: 3px;
   align-items: center;
   max-width: 200px;
   margin-top: 1rem;

diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -2,18 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Radio } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import './RadioButtonStyles.css';
+import styles from './RadioButtonStyles.module.css'; 
 
 const CustomRadioIcon = styled('span')({
-    borderRadius: '50%',
-    width: 16,
-    height: 16,
-    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
-  });
+  borderRadius: '50%',
+  width: 16,
+  height: 16,
+  boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+});
 
 const CustomRadioCheckedIcon = styled('span')({
-    borderRadius: '50%',
-    backgroundColor: 'var(--main-purple)',
+  borderRadius: '50%',
+  backgroundColor: 'var(--main-purple)',
   '&::before': {
     display: 'block',
     width: 16,
@@ -24,15 +24,15 @@ const CustomRadioCheckedIcon = styled('span')({
 });
 
 function RadioButton({ 
-    id, 
-    name, 
-    value, 
-    label, 
-    onChange, 
-    onClick, 
-    size = 'small', 
-    checked = false, 
-    enabled = true 
+  id, 
+  name, 
+  value, 
+  label, 
+  onChange, 
+  onClick, 
+  size = 'small', 
+  checked = false, 
+  enabled = true 
 }) {
 
   const handleChange = (event) => {
@@ -44,7 +44,7 @@ function RadioButton({
   };
 
   return (
-    <div className={`radio-button`}>
+    <div className={styles.radioButton}>
       <Radio
         id={id}
         name={name}
@@ -56,9 +56,9 @@ function RadioButton({
         icon={<CustomRadioIcon />}
         checked={checked}
         onClick={onClick}
-        sx={{padding:'0'}}
+        sx={{ padding: '0' }}
       />
-      {label && <label htmlFor={id}>{label}</label>}
+      {label && <label className={styles.label} htmlFor={id}>{label}</label>}
     </div>
   );
 }

diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.css b/frontend/src/components/RadioButton/RadioButtonStyles.css
diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.module.css b/frontend/src/components/RadioButton/RadioButtonStyles.module.css
@@ -0,0 +1,13 @@
+.radioButton {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    white-space: nowrap;
+    margin-bottom: 13px;
+}
+
+.label {
+    color: var(--main-text-color);
+    margin-left: 8px;
+    white-space: nowrap;
+}
diff --git a/frontend/src/components/RichTextEditor/RichTextEditor.jsx b/frontend/src/components/RichTextEditor/RichTextEditor.jsx
@@ -98,6 +98,7 @@ RichTextEditor.propTypes = {
   setHeader: PropTypes.func,
   setContent: PropTypes.func,
   content: PropTypes.string,
+  resetState: PropTypes.func,
 };
 
 export default RichTextEditor;