feat(releases): action status show filter and client (#338)

* feat(releases): action status show client and filter

* feat(releases): add better tooltip

web/src/components/data-table/Cells.tsx

@@ -4,6 +4,7 @@ import { CheckIcon } from "@heroicons/react/solid";
 import { ClockIcon, BanIcon, ExclamationCircleIcon } from "@heroicons/react/outline";
 
 import { classNames, simplifyDate } from "../../utils";
+import { Tooltip } from "../tooltips/Tooltip";
 
 interface CellProps {
     value: string;
@@ -52,30 +53,42 @@ const StatusCellMap: Record<string, StatusCellMapEntry> = {
   }
 };
 
-const GetReleaseStatusString = (releaseAction: ReleaseActionStatus) => {
-  const items: Array<string> = [
-    `action: ${releaseAction.action}`,
-    `type: ${releaseAction.type}`,
-    `status: ${releaseAction.status}`,
-    `time: ${simplifyDate(releaseAction.timestamp)}`
-  ];
-  if (releaseAction.rejections.length)
-    items.push(`rejections: ${releaseAction.rejections}`);
-  return items.join(" | ");
-};
+// const GetReleaseStatusString = (releaseAction: ReleaseActionStatus) => {
+//   const items: Array<string> = [
+//     `action: ${releaseAction.action}`,
+//     `type: ${releaseAction.type}`,
+//     `status: ${releaseAction.status}`,
+//     `time: ${simplifyDate(releaseAction.timestamp)}`
+//   ];
+//   if (releaseAction.client != "")
+//     items.push(`client: ${releaseAction.client}`);
+//   if (releaseAction.filter != "")
+//     items.push(`filter: ${releaseAction.filter}`);
+//   if (releaseAction.rejections.length)
+//     items.push(`rejections: ${releaseAction.rejections}`);
+//   return items.join(" | ");
+// };
 
 export const ReleaseStatusCell = ({ value }: ReleaseStatusCellProps) => (
   <div className="flex text-sm font-medium text-gray-900 dark:text-gray-300">
     {value.map((v, idx) => (
       <div
         key={idx}
-        title={GetReleaseStatusString(v)}
         className={classNames(
           StatusCellMap[v.status].colors,
-          "mr-1 inline-flex items-center rounded text-xs font-semibold uppercase cursor-pointer"
+          "mr-1 inline-flex items-center rounded text-xs font-semibold cursor-pointer"
         )}
       >
-        {StatusCellMap[v.status].icon}
+        <Tooltip button={StatusCellMap[v.status].icon}>
+          <ol className="flex flex-col">
+            <li className="py-1">Status: {v.status}</li>
+            <li className="py-1">Action: {v.action}</li>
+            <li className="py-1">Type: {v.type}</li>
+            {v.client && <li className="py-1">Client: {v.client}</li>}
+            {v.filter && <li className="py-1">Filter: {v.filter}</li>}
+            <li className="py-1">Time: {simplifyDate(v.timestamp)}</li>
+          </ol>
+        </Tooltip>
       </div>
     ))}
   </div>

web/src/components/tooltips/Tooltip.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+export const Tooltip = ({ children, button } : {
+  message?: string, children: ReactNode, button: ReactNode
+}) => {
+  return (
+    <div className="relative flex flex-col items-center group">
+      {button}
+      <div className="absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex">
+        <span className="relative z-40 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">{children}</span>
+        <div className="w-3 h-3 -mt-2 rotate-45 bg-gray-600"></div>
+      </div>
+    </div>
+  );
+};

web/src/screens/releases/ReleaseTable.tsx

@@ -191,7 +191,7 @@ export const ReleaseTable = () => {
           ))
         )}
       </div>
-      <div className="overflow-auto bg-white shadow-lg dark:bg-gray-800 rounded-lg">
+      <div className="bg-white shadow-lg dark:bg-gray-800 rounded-lg">
         <table {...getTableProps()} className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead className="bg-gray-50 dark:bg-gray-800">
             {headerGroups.map((headerGroup) => {
@@ -269,7 +269,7 @@ export const ReleaseTable = () => {
           <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
             <div className="flex items-baseline gap-x-2">
               <span className="text-sm text-gray-700">
-                                Page <span className="font-medium">{pageIndex + 1}</span> of <span className="font-medium">{pageOptions.length}</span>
+                Page <span className="font-medium">{pageIndex + 1}</span> of <span className="font-medium">{pageOptions.length}</span>
               </span>
               <label>
                 <span className="sr-only bg-gray-700">Items Per Page</span>
@@ -282,7 +282,7 @@ export const ReleaseTable = () => {
                 >
                   {[5, 10, 20, 50].map(pageSize => (
                     <option key={pageSize} value={pageSize}>
-                                            Show {pageSize}
+                      Show {pageSize}
                     </option>
                   ))}
                 </select>

web/src/types/Release.d.ts

@@ -17,6 +17,8 @@ interface ReleaseActionStatus {
   status: string;
   action: string;
   type: string;
+  client: string;
+  filter: string;
   rejections: string[];
   timestamp: string
 }