Merge pull request #240 from chingu-x/dev

v1.0.0-alpha.3

CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.0.0-alpha.3] - 2024-09-05
+
+### Added
+- Added 404 page https://github.com/chingu-x/chingu-dashboard/issues/205
+
+### Changed
+- Updated top nav and side bar colors along with some other styling changes https://github.com/chingu-x/chingu-dashboard/issues/197
+
+### Fixed
+- Fixed active states in the sidebar https://github.com/chingu-x/chingu-dashboard/issues/198
+- Fixed spacing issues in the calendar title with longer months wrapping to a newline https://github.com/chingu-x/chingu-dashboard/issues/201
+- Fixed spacing issues in resources page https://github.com/chingu-x/chingu-dashboard/issues/206
+- Fixed overflow issue with features description in the list https://github.com/chingu-x/chingu-dashboard/issues/222
+- Fixed an issue with selecting team members in checkboxes https://github.com/chingu-x/chingu-dashboard/issues/230
+
 ## [1.0.0-alpha.2] - 2024-08-28
 
 ### Added

src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
 import Badge from "@/components/badge/Badge";
 import { useAppDispatch } from "@/store/hooks";
@@ -21,7 +21,6 @@ function ResourceItem({
   userAvatarUrl,
 }: ResourceItemProps) {
   const dispatch = useAppDispatch();
-  const [widgetHovered, setWidgetHovered] = useState<boolean>(false);
 
   const openViewModal = (event: React.MouseEvent) => {
     event.stopPropagation();
@@ -40,17 +39,15 @@ function ResourceItem({
   };
 
   return (
-    <div
+    <button
+      type="button"
+      aria-label="open resource details"
       key={title}
-      className="mb-4 flex h-[79px] w-full cursor-pointer items-center justify-between rounded-lg bg-base-200 p-4 hover:shadow-md"
+      className="group mb-4 flex w-full cursor-pointer items-center justify-between gap-x-4 rounded-lg bg-base-200 hover:shadow-md"
       onClick={openViewModal}
-      onMouseEnter={() => setWidgetHovered(true)}
-      onMouseLeave={() => setWidgetHovered(false)}
     >
-      <div className="flex max-w-[400px] flex-col">
-        <p className="mb-1 w-[300px] truncate text-base font-semibold max-[1469px]:w-full max-[1200px]:w-56">
-          {title}
-        </p>
+      <div className="flex flex-col p-4">
+        <p className="mb-1 text-left text-base font-semibold">{title}</p>
         <div className="flex">
           <p className="mr-2 text-base font-medium">Shared by</p>
           <Badge
@@ -61,12 +58,8 @@ function ResourceItem({
           />
         </div>
       </div>
-      <ArrowTopRightOnSquareIcon
-        className={`mr-3 h-6 w-6 text-base-300 ${
-          widgetHovered ? "stroke-base-300" : ""
-        }`}
-      />
-    </div>
+      <ArrowTopRightOnSquareIcon className="m-7 h-6 w-6 shrink-0 text-base-300 group-hover:stroke-base-300" />
+    </button>
   );
 }
 

src/app/(main)/my-voyage/[teamId]/features/components/Card.test.tsx

@@ -0,0 +1,107 @@
+import { render } from "@testing-library/react";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+import React from "react";
+import Card from "./Card";
+import { type Feature, features } from "./fixtures/Features";
+import { rootReducer } from "@/store/store";
+import { useUser } from "@/store/hooks";
+
+jest.mock("./EditPopover", () => <div>mock child component</div>);
+jest.mock("@/store/hooks", () => ({
+  useUser: jest.fn(),
+}));
+jest.mock("@hello-pangea/dnd", () => ({
+  DragDropContext: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  Droppable: ({
+    children,
+  }: {
+    children: (provided: {
+      droppableProps: Record<string, unknown>;
+      innerRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+  }) => (
+    <div>
+      {children({
+        droppableProps: {},
+        innerRef: React.createRef<HTMLDivElement>(),
+      })}
+    </div>
+  ),
+  Draggable: ({
+    children,
+  }: {
+    children: (provided: {
+      draggableProps: Record<string, unknown>;
+      dragHandleProps: Record<string, unknown>;
+      innerRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+  }) => (
+    <div>
+      {children({
+        draggableProps: {},
+        dragHandleProps: {},
+        innerRef: React.createRef<HTMLDivElement>(),
+      })}
+    </div>
+  ),
+}));
+
+// "current user" id is 25b7b76c-1567-4910-9d50-e78819daccf1
+const renderWithStore = (feature: Feature, userId: string) => {
+  const store = configureStore({
+    reducer: rootReducer,
+  });
+
+  (useUser as jest.Mock).mockReturnValue({ id: userId });
+
+  return render(
+    <Provider store={store}>
+      <Card index={1} feature={feature} setEditMode={jest.fn()} />
+    </Provider>,
+  );
+};
+
+describe("Feature Card component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders edit button if current user's id matches id of user who added feature", () => {
+    const card = renderWithStore(
+      features[0],
+      "25b7b76c-1567-4910-9d50-e78819daccf1",
+    );
+
+    const cardAction = card.getByRole("button", { name: /feature menu/i });
+    const avatar = card.queryByRole("img", { name: /avatar/i });
+
+    expect(cardAction).toBeInTheDocument();
+    expect(avatar).not.toBeInTheDocument();
+  });
+
+  it("renders avatar if current user's id doesn't match id of user who added feature", () => {
+    const card = renderWithStore(
+      features[0],
+      "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
+    );
+
+    const cardAction = card.queryByRole("button", { name: /feature menu/i });
+    const avatar = card.getByRole("img", { name: /avatar/i });
+
+    expect(cardAction).not.toBeInTheDocument();
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it("wraps long word to new line", () => {
+    const card = renderWithStore(
+      features[0],
+      "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
+    );
+
+    const description = card.getByText(features[0].description);
+    expect(description.closest("span")).toHaveClass("break-all");
+  });
+});

src/app/(main)/my-voyage/[teamId]/features/components/Card.tsx

@@ -67,7 +67,9 @@ export default function Card({ feature, index, setEditMode }: CardProps) {
             )}
             <div className="flex items-center justify-between">
               <div className="flex flex-col gap-y-1">
-                <span className="text-base font-semibold">{description}</span>
+                <span className="break-all text-base font-semibold">
+                  {description}
+                </span>
                 <span className="text-[10px] text-neutral-focus">{`Added by ${
                   isCurrentUser ? "you" : firstName + " " + lastName
                 }`}</span>