Merge pull request #1126 from givepraise/fix/report-bugs

Fix/report bugs
givepraise · Aug 2, 2023 · a3878aa · a3878aa
2 parents adfa412 + b3ce4ce
commit a3878aa
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 23 deletions.
diff --git a/packages/frontend/src/pages/Analytics/AnalyticsPage.tsx b/packages/frontend/src/pages/Analytics/AnalyticsPage.tsx
@@ -37,7 +37,7 @@ const Graphs = (): JSX.Element | null => {
 
   return (
     <DuckDb startDate={date1Str} endDate={date3Str}>
-      <div className="h-full gap-5 columns-1 md:columns-2 xl:columns-3">
+      <div className="gap-5 columns-1 md:columns-2 xl:columns-3">
         <TopPraise date1={date1Str} date2={date2Str} date3={date3Str} />
         <PraiseOverTime date1={date1Str} date2={date2Str} date3={date3Str} />
         <TopPraiseGivers date1={date1Str} date2={date2Str} date3={date3Str} />

diff --git a/packages/frontend/src/pages/Analytics/components/TopPraise.tsx b/packages/frontend/src/pages/Analytics/components/TopPraise.tsx
@@ -125,7 +125,7 @@ const TopPraise = ({
     <Graph.Frame className="px-0">
       <Graph.Header className="px-5">Highest scored praise</Graph.Header>
       <div className="@container">
-        <ul className="px-5 text-xs  md:px-0">
+        <ul className="px-5 text-xs md:px-0">
           {data.map((praise) => (
             <PraiseRow praise={praise} key={praise._id}>
               <Praise praise={praise} key={praise._id} bigGiverAvatar={false} />
@@ -136,7 +136,7 @@ const TopPraise = ({
       <div className="px-5">
         See{' '}
         <Link
-          to={`/reports/run?report=top-praise&startDate=${date2}&endDate=${date3}`}
+          to={`/reports/run?manifestUrl=https%3A%2F%2Fraw.githubusercontent.com%2Fgivepraise%2Freports%2Fmain%2Freports%2Ftop-praise%2Fmanifest.json&startDate=${date2}&endDate=${date3}`}
         >
           full report
         </Link>

diff --git a/packages/frontend/src/pages/Analytics/components/TopPraiseGivers.tsx b/packages/frontend/src/pages/Analytics/components/TopPraiseGivers.tsx
@@ -70,11 +70,17 @@ const TopPraiseGivers = ({
       {
         Header: 'Username',
         accessor: 'username',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Cell: (data: any) => (
+          <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+            {data.value ? data.value : data.row.original.useraccountname}
+          </div>
+        ),
       },
       {
         Header: 'Score',
         accessor: 'score',
-        className: 'text-right',
+        className: 'text-right w-12',
         Cell: ({ value }: { value: number }) => (
           <span className="opacity-70">
             {new Intl.NumberFormat().format(Math.round(value))}
@@ -94,7 +100,7 @@ const TopPraiseGivers = ({
   return (
     <Graph.Frame>
       <Graph.Header>Top praise givers</Graph.Header>
-      <table {...getTableProps()} className="w-full">
+      <table {...getTableProps()} className="w-full overflow-auto table-fixed">
         <tbody {...getTableBodyProps()}>
           {rows.map((row) => {
             prepareRow(row);

diff --git a/packages/frontend/src/pages/Analytics/components/TopPraiseReceivers.tsx b/packages/frontend/src/pages/Analytics/components/TopPraiseReceivers.tsx
@@ -73,13 +73,16 @@ const TopPraiseReceivers = ({
         Header: 'Username',
         accessor: 'username',
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Cell: (data: any) =>
-          data.value ? data.value : data.row.original.useraccountname,
+        Cell: (data: any) => (
+          <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+            {data.value ? data.value : data.row.original.useraccountname}
+          </div>
+        ),
       },
       {
         Header: 'Score',
         accessor: 'score',
-        className: 'text-right',
+        className: 'text-right w-12',
         Cell: ({ value }: { value: number }) => (
           <span className="opacity-70">
             {new Intl.NumberFormat().format(Math.round(value))}
@@ -99,7 +102,7 @@ const TopPraiseReceivers = ({
   return (
     <Graph.Frame>
       <Graph.Header>Top praise receivers</Graph.Header>
-      <table {...getTableProps()} className="w-full">
+      <table {...getTableProps()} className="w-full overflow-auto table-fixed">
         <tbody {...getTableBodyProps()}>
           {rows.map((row) => {
             prepareRow(row);

diff --git a/packages/frontend/src/pages/Reports/ReportsRunPage.tsx b/packages/frontend/src/pages/Reports/ReportsRunPage.tsx
@@ -48,9 +48,13 @@ const ReportsRunPage = (): JSX.Element | null => {
 
   if (!response?.rows) return <LoadScreen />;
 
-  const json = JSON.stringify(response.rows);
-  const parser = new Parser();
-  const csv = parser.parse(response.rows);
+  let json = '';
+  let csv = '';
+  if (response.rows.length > 0) {
+    json = JSON.stringify(response.rows);
+    const parser = new Parser();
+    csv = parser.parse(response.rows);
+  }
 
   return (
     <Page variant="full">

diff --git a/packages/frontend/src/pages/Reports/components/CopyToClipboard.tsx b/packages/frontend/src/pages/Reports/components/CopyToClipboard.tsx
@@ -12,7 +12,7 @@ const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ text }) => {
   const handleCopy = (): void => {
     const copy = async (): Promise<void> => {
       try {
-        await navigator.clipboard.writeText(JSON.stringify(text));
+        await navigator.clipboard.writeText(text);
         toast.success('Copied to clipboard');
       } catch (err) {
         console.error('Failed to copy text: ', err);

diff --git a/packages/frontend/src/pages/Reports/components/RevealMore.tsx b/packages/frontend/src/pages/Reports/components/RevealMore.tsx
@@ -20,14 +20,7 @@ const RevealMore: React.FC<RevealMoreProps> = ({ content }) => {
       <div
         className={`${isExpanded ? 'h-auto' : 'max-h-[200px]'} overflow-hidden`}
       >
-        <code>
-          {rows.map((row) => (
-            <>
-              {row}
-              <br />
-            </>
-          ))}
-        </code>
+        <pre>{rows.map((row) => `${row}\n`)}</pre>
       </div>
       {rows.length > 10 && (
         <Button onClick={toggleExpand} className="mt-5">

diff --git a/packages/frontend/src/pages/Reports/components/presentations/ReportsTable.tsx b/packages/frontend/src/pages/Reports/components/presentations/ReportsTable.tsx
@@ -14,7 +14,7 @@ export const ReportsTable = ({ data }: ReportsTableProps): JSX.Element => {
       Object.keys(data[0]).map((key) => ({
         Header: key,
         accessor: key,
-        className: 'pl-5 text-left',
+        className: 'px-5 text-left',
       })),
     [data]
   );
@@ -41,7 +41,7 @@ export const ReportsTable = ({ data }: ReportsTableProps): JSX.Element => {
             const { key, ...restHeaderGroupProps } =
               headerGroup.getHeaderGroupProps();
             return (
-              <tr className="px-5" key={key} {...restHeaderGroupProps}>
+              <tr key={key} {...restHeaderGroupProps}>
                 {headerGroup.headers.map((column) => {
                   const { key, ...restColumn } = column.getHeaderProps();
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any