Kanban board UI enhancement (#620)

* fix solution action * added required components * remove unnecessary code * add hidden btn * update github configurator * prettier update * fix flash error issue * more improvements * prettier update * refactor code * add comment * added state for when no configurations exists * fix pagination error * handle error * fix map error * fix amount issue * updated UI * decoupled state * added styling * added table view * updated UI for github * more style updates * added border to table * refactor code * cleaned UI * refactor code * added sorting mechanism * prettier update * reduce border size * remove table and few style updates * fix normalize error and suggestive UI changes * fix .map error * remove table view data
NEAR-DevHub · Jan 6, 2024 · 802e892 · 802e892
1 parent f10eef4
commit 802e892
Show file tree

Hide file tree

Showing 8 changed files with 454 additions and 373 deletions.
diff --git a/src/devhub/entity/addon/github/kanban_board.jsx b/src/devhub/entity/addon/github/kanban_board.jsx
@@ -72,23 +72,25 @@ const GithubKanbanBoard = ({
       : [];
 
     const issues = dataTypesIncluded.Issue
-      ? DataRequest?.paginated(
-          (pageNumber) =>
-            useCache(
-              () =>
-                asyncFetch(
-                  `https://api.github.com/repos/${repoURL
-                    .split("/")
-                    .slice(-2)
-                    .concat(["issues"])
-                    .join(
-                      "/"
-                    )}?state=${ticketStateFilter}&per_page=100&page=${pageNumber}`
-                ).then((res) => res?.body),
-              repoURL + pageNumber,
-              { subscribe: false }
-            ),
-          { startWith: 1 }
+      ? (
+          DataRequest?.paginated(
+            (pageNumber) =>
+              useCache(
+                () =>
+                  asyncFetch(
+                    `https://api.github.com/repos/${repoURL
+                      .split("/")
+                      .slice(-2)
+                      .concat(["issues"])
+                      .join(
+                        "/"
+                      )}?state=${ticketStateFilter}&per_page=100&page=${pageNumber}`
+                  ).then((res) => res?.body),
+                repoURL + pageNumber,
+                { subscribe: false }
+              ),
+            { startWith: 1 }
+          ) ?? []
         )?.map(withType("Issue"))
       : [];
 
@@ -103,7 +105,7 @@ const GithubKanbanBoard = ({
 
   return (
     <div>
-      <div className="d-flex flex-column align-items-center gap-2 py-4">
+      <div className="d-flex flex-column align-items-center gap-2 pb-4">
         <h5 className="h5 d-inline-flex gap-2 m-0">
           <span>{title}</span>
         </h5>
@@ -127,12 +129,17 @@ const GithubKanbanBoard = ({
           const tickets = state.ticketsByColumn[column.id] ?? [];
 
           return (
-            <div className="col-4" key={`column-${column.id}-view`}>
+            <div
+              className="col-3"
+              style={{ minWidth: "300px" }}
+              key={`column-${column.id}-view`}
+            >
               <div className="card rounded-4">
                 <div
+                  style={{ height: "75vh", overflow: "scroll" }}
                   className={[
                     "card-body d-flex flex-column gap-3 p-2",
-                    "border border-2 border-secondary rounded-4",
+                    "border border-1 rounded-4",
                   ].join(" ")}
                 >
                   <span className="d-flex flex-column py-1">

diff --git a/src/devhub/entity/addon/github/kanban_ticket.jsx b/src/devhub/entity/addon/github/kanban_ticket.jsx
@@ -93,7 +93,7 @@ const GithubKanbanTicket = ({
 
   const labelList = features.labels ? (
     <div className="d-flex flex-wrap gap-2 m-0">
-      {labels.map((label) => (
+      {(labels ?? []).map((label) => (
         <a href={label.url} key={label.id} title={label.description}>
           <span
             className="badge text-wrap"
@@ -107,9 +107,12 @@ const GithubKanbanTicket = ({
   ) : null;
 
   return (
-    <AttractableDiv className="card border-secondary">
+    <AttractableDiv className="card">
       {header}
-      <div className="card-body d-flex flex-column gap-3">
+      <div
+        className="card-body d-flex flex-column gap-3"
+        style={{ fontSize: 15 }}
+      >
         {titleArea}
         {labelList}
       </div>