Merge pull request #319 from Trendyol/summary-add

feat: jira summary add

Author: armagandalkiran

gurubu-client/src/app/components/room/grooming-board/grooming-board-live-chart.tsx

@@ -6,10 +6,11 @@ import { calculateVotesOptimized } from "@/shared/helpers/calculateVotesCount";
 import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 import { GroomingMode } from "@/shared/enums";
 import { useTheme } from "@/contexts/ThemeContext";
+import classNames from "classnames";
 
 const GroomingBoardLiveChart = () => {
   const chartRef = useRef<ReactECharts>(null);
-  const { groomingInfo } = useGroomingRoom();
+  const { groomingInfo, jiraSidebarExpanded } = useGroomingRoom();
   const { currentTheme } = useTheme();
 
   const calculatedVotes = calculateVotesOptimized(
@@ -94,7 +95,7 @@ const GroomingBoardLiveChart = () => {
   }
 
   return (
-    <div className="grooming-board-live-chart">
+    <div className={classNames("grooming-board-live-chart", {"jira-sidebar-expanded": jiraSidebarExpanded})}>
       <ReactECharts
         ref={chartRef}
         option={getOption()}

gurubu-client/src/app/components/room/grooming-board/grooming-board.tsx

@@ -3,6 +3,7 @@ import VotingStick from "./voting-stick";
 import MetricAverages from "./metric-averages";
 import GroomingBoardErrorPopup from "./grooming-board-error-popup";
 import GroomingBoardResult from "./grooming-board-result";
+import IssueSummary from "./issue-summary";
 import GroomingBoardLogs from "./grooming-board-logs";
 import GroomingBoardActions from "./grooming-board-actions";
 import Loading from "../loading";
@@ -48,6 +49,8 @@ const GroomingBoard = ({
     setShowErrorPopup,
     editVoteClicked,
     setEditVoteClicked,
+    jiraSidebarExpanded,
+    setJiraSidebarExpanded,
   } = useGroomingRoom();
 
   const { showLoader } = useLoader();
@@ -61,6 +64,10 @@ const GroomingBoard = ({
   const isScoreGrooming = groomingInfo.mode === GroomingMode.ScoreGrooming;
   const isPlanningPoker = groomingInfo.mode === GroomingMode.PlanningPoker;
 
+  const selectedIssueIndex = groomingInfo.issues?.findIndex(
+    (issue) => issue.selected
+  );
+
   useEffect(() => {
     const handleInitialize = (data: GroomingInfo) => {
       if (data?.participants[lobby.userID]) {
@@ -147,14 +154,17 @@ const GroomingBoard = ({
   }
 
   return (
-    <div className="grooming-board">
+    <div className={classNames("grooming-board", {jiraSidebarExpanded: jiraSidebarExpanded})}>
       {showLoader && <Loading />}
       <section
         className={classNames("grooming-board__playground", {
           "story-point-mode": isPlanningPoker,
         })}
       >
         {!editVoteClicked && isScoreGrooming && <GroomingBoardResult />}
+        {isPlanningPoker && (
+          <IssueSummary issueSummary={groomingInfo.issues?.[selectedIssueIndex]?.summary} />
+        )}
         {showVotingStick && isScoreGrooming && (
           <div className="grooming-board__voting-sticks">
             {groomingInfo.metrics?.map((metric) => (
@@ -178,7 +188,13 @@ const GroomingBoard = ({
             ))}
           </div>
         )}
-        <GroomingBoardLiveChart />
+        {!jiraSidebarExpanded && <GroomingBoardLiveChart />}
+        {jiraSidebarExpanded && (
+          <div className="grooming-board__logs-chart">
+            <GroomingBoardLogs roomId={roomId} />
+            <GroomingBoardLiveChart />
+          </div>
+        )}
         {!editVoteClicked && <MetricAverages />}
         {groomingInfo.isResultShown && isScoreGrooming && (
           <div className="grooming-board__toggle-button-wrapper">

gurubu-client/src/app/components/room/grooming-board/issue-summary.tsx

@@ -0,0 +1,29 @@
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
+
+interface IssueSummaryProps {
+  issueSummary?: string;
+}
+
+const IssueSummary = ({ issueSummary }: IssueSummaryProps) => {
+  const { jiraSidebarExpanded, setJiraSidebarExpanded } = useGroomingRoom();
+
+  if (!issueSummary) {
+    return null;
+  }
+
+  return (
+    <div className="grooming-board__issue-summary" onClick={() => setJiraSidebarExpanded(!jiraSidebarExpanded)}>
+      <div className="grooming-board__issue-summary-header">
+        <h3 className="grooming-board__issue-summary-title">Current Issue</h3>
+        <button
+          className="grooming-board__show-details-button"
+        >
+          {jiraSidebarExpanded ? 'Hide Details' : 'Show Details'}
+        </button>
+      </div>
+      <p className="grooming-board__issue-summary-text">{issueSummary}</p>
+    </div>
+  );
+};
+
+export default IssueSummary;

gurubu-client/src/app/components/room/grooming-footer/grooming-footer.tsx

@@ -1,11 +1,16 @@
+"use client";
 import React from "react";
 import { IconBrandGithub } from "@tabler/icons-react";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 import Feedback from "./feedback";
+import classNames from "classnames";
 
 const GroomingFooter = () => {
   const currentDate = new Date().getFullYear();
+  const { jiraSidebarExpanded } = useGroomingRoom();
+
   return (
-    <footer className="grooming-footer">
+    <footer className={classNames("grooming-footer", {"jira-sidebar-expanded": jiraSidebarExpanded})}>
       <div className="grooming-footer__content">
         <div className="grooming-footer__content-copyright">
           © 2023 - {currentDate} GuruBu

gurubu-client/src/app/components/room/grooming-navbar/grooming-navbar.tsx

@@ -10,6 +10,7 @@ import { Modal } from "@/components/common/modal";
 import { ImportJiraIssuesForm } from "@/components/room/grooming-navbar/import-jira-issues";
 import { GroomingMode } from "@/shared/enums";
 import { AnnouncementTooltip } from "./announcement-tooltip";
+import classNames from "classnames";
 
 interface Props {
   showNickNameForm: boolean;
@@ -31,7 +32,7 @@ const GroomingNavbar = ({ showNickNameForm, roomId }: Props) => {
     setModalOpen(false);
   };
 
-  const { groomingInfo, roomStatus, userInfo } = useGroomingRoom();
+  const { groomingInfo, roomStatus, userInfo, jiraSidebarExpanded } = useGroomingRoom();
   const [isGroomingLinkCopied, setIsGroomingLinkCopied] = useState(false);
 
   if (roomStatus !== ROOM_STATUS.FOUND || showNickNameForm) {
@@ -63,7 +64,7 @@ const GroomingNavbar = ({ showNickNameForm, roomId }: Props) => {
 
   return (
     <nav className="grooming-navbar">
-      <div className="grooming-navbar__content">
+      <div className={classNames("grooming-navbar__content", { "jira-sidebar-expanded": jiraSidebarExpanded })}>
         <Logo />
         <div className="grooming-navbar__content-right">
           <div className="grooming-navbar__content-actions">

gurubu-client/src/app/components/room/jira-sidebar/index.tsx

@@ -2,25 +2,19 @@ import React, { useEffect, useState } from "react";
 import Sidebar from "@/components/common/sidebar";
 import classNames from "classnames";
 import GroomingBoardJiraTable from "../grooming-board/grooming-board-jira-table";
-import GroomingBoardResultV2 from "../grooming-board/grooming-board-result-v2";
 import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 import { IconPlayerTrackNext, IconPlayerTrackPrev } from "@tabler/icons-react";
-import { GroomingMode } from "@/shared/enums";
 
 interface Props {
   roomId: string;
 }
 
 const JiraSidebar = ({ roomId }: Props) => {
-  const [jiraSidebarExpanded, setJiraSidebarExpanded] = useState(false);
-  const { groomingInfo, userInfo } = useGroomingRoom();
+  const { groomingInfo, jiraSidebarExpanded, setJiraSidebarExpanded } = useGroomingRoom();
 
   const isJiraSidebarExist =
     groomingInfo.issues && groomingInfo.issues.length > 0;
 
-  const voteText =
-    'You can click "Set Vote" if you want to set this average estimation:';
-
   const onClose = () => {
     setJiraSidebarExpanded(false);
   };

gurubu-client/src/app/contexts/GroomingRoomContext.tsx

@@ -20,6 +20,8 @@ interface GroomingContextValues {
   setEditVoteClicked: Function;
   currentJiraIssueIndex: number;
   setCurrentJiraIssueIndex: (value: number) => void;
+  jiraSidebarExpanded: boolean;
+  setJiraSidebarExpanded: (value: boolean) => void;
 }
 
 const GroomingRoomContext = createContext({} as GroomingContextValues);
@@ -37,6 +39,7 @@ export function GroomingRoomProvider({ children, roomId }: GroomingRoomProviderP
   const [showErrorPopup, setShowErrorPopup] = useState(false);
   const [editVoteClicked, setEditVoteClicked] = useState(false);
   const [currentJiraIssueIndex, setCurrentJiraIssueIndex] = useState(0);
+  const [jiraSidebarExpanded, setJiraSidebarExpanded] = useState(false);
 
   useEffect(() => {
     const nickname = localStorage.getItem("nickname");
@@ -69,7 +72,9 @@ export function GroomingRoomProvider({ children, roomId }: GroomingRoomProviderP
       editVoteClicked,
       setEditVoteClicked,
       currentJiraIssueIndex,
-      setCurrentJiraIssueIndex
+      setCurrentJiraIssueIndex,
+      jiraSidebarExpanded,
+      setJiraSidebarExpanded
     }),
     [
       roomStatus,
@@ -87,7 +92,9 @@ export function GroomingRoomProvider({ children, roomId }: GroomingRoomProviderP
       editVoteClicked,
       setEditVoteClicked,
       currentJiraIssueIndex,
-      setCurrentJiraIssueIndex
+      setCurrentJiraIssueIndex,
+      jiraSidebarExpanded,
+      setJiraSidebarExpanded
     ]
   );
   return <GroomingRoomContext.Provider value={values}>{children}</GroomingRoomContext.Provider>;

gurubu-client/src/app/styles/room/grooming-board/grooming-board-live-chart.scss

@@ -1,5 +1,6 @@
 .grooming-board-live-chart {
   margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid #eaecf0;
+  &.jira-sidebar-expanded{
+    width: 300px;
+  }
 }

gurubu-client/src/app/styles/room/grooming-board/grooming-board.scss

@@ -10,6 +10,10 @@
     padding: 12px;
     flex-direction: column;
   }
+  &.jiraSidebarExpanded{
+    padding-inline: 0;
+    margin-inline: 16px;
+  }
   &__playground {
     width: 60%;
     display: flex;
@@ -22,6 +26,12 @@
       }
     }
   }
+  &__logs-chart{
+    display: flex;
+    gap: 16px;
+    overflow-y: auto;
+    overflow-anchor: none;
+  }
   &__toggle-button-wrapper {
     width: 100%;
     height: 50px;
@@ -134,6 +144,7 @@
     border: 1px solid $gray-20;
     padding: 0 12px 12px 12px;
     max-height: max-content;
+    width: 300px;
   }
   &__metrics {
     display: flex;

gurubu-client/src/app/styles/room/grooming-board/issue-summary.scss

@@ -0,0 +1,50 @@
+.grooming-board {
+  &__issue-summary {
+    background-color: #f9f5ff;
+    border-radius: $radius-large;
+    padding: 16px 24px;
+    margin-bottom: 24px;
+    box-shadow: $shadow-sm;
+    cursor: pointer;
+  }
+
+  &__issue-summary-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  &__show-details-button {
+    background-color: $primary-700;
+    color: #ffffff;
+    border: none;
+    padding: 8px 16px;
+    border-radius: $radius-medium;
+    font-size: $font-size-paragraph-3;
+    font-weight: $medium;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: $primary-600;
+    }
+  }
+
+  &__issue-summary-title {
+    color: $gray-600;
+    font-size: $font-size-paragraph-3;
+    font-weight: $medium;
+  }
+
+  &__issue-summary-text {
+    color: $gray-900;
+    font-size: $font-size-paragraph-2;
+    line-height: $line-height-paragraph-2;
+    font-weight: $semibold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}

gurubu-client/src/app/styles/room/grooming-board/voting-stick-v2.scss

@@ -12,8 +12,8 @@
   &__vote-cards {
     display: flex;
     align-items: center;
-    justify-content: space-around;
     border-radius: $radius-large;
+    gap: 8px;
     width: 100%;
     @media (max-width: 850px) {
       flex-wrap: wrap;

gurubu-client/src/app/styles/room/grooming-footer/grooming-footer.scss

@@ -6,6 +6,16 @@
   justify-content: center;
   border-top: 1px solid #eaecf0;
   position: relative;
+  background-color: #ffffff;
+  margin-top: 10px;
+  &.jira-sidebar-expanded{
+    margin-inline: 0;
+    justify-content: start;
+    .grooming-footer__content{
+      padding-inline: 0;
+      margin-left: 16px;
+    }
+  }
   &__content {
     padding: 12px 48px 12px 48px;
     @media (max-width: 850px) {

gurubu-client/src/app/styles/room/grooming-navbar/grooming-navbar.scss

@@ -9,6 +9,10 @@
     width: 80%;
     margin: 0 auto;
     padding: $space-xlarge $space-xxxlarge;
+    &.jira-sidebar-expanded{
+      margin-inline: 16px;
+      padding-inline: 0;
+    }
     @media (max-width: 850px) {
       padding: $space-xlarge 12px;
       margin: 0 12px;

gurubu-client/src/app/styles/room/style.scss

@@ -16,6 +16,7 @@
 @import "./grooming-board/voting-stick-v2.scss";
 @import "./grooming-board/nickname-form.scss";
 @import "./grooming-board/grooming-board.scss";
+@import "./grooming-board/issue-summary.scss";
 @import "./grooming-board/connecting-info.scss";
 @import "./grooming-board/metric-averages.scss";
 @import "./grooming-board/grooming-board-participants.scss";