TableNoData

productiveops · Dec 24, 2023 · 4e63f54 · 4e63f54
1 parent 3ea9730
commit 4e63f54
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 75 deletions.
diff --git a/web/src/app/compose-library/compose-library-items.tsx b/web/src/app/compose-library/compose-library-items.tsx
@@ -16,6 +16,7 @@ import { useNavigate } from "react-router-dom"
 import { Button } from "@/components/ui/button"
 import useComposeLibraryItemList from "@/hooks/useComposeLibraryItemList"
 import { CLASSES_CLICKABLE_TABLE_ROW } from "@/lib/utils"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function ComposeLibraryItems() {
   const navigate = useNavigate()
@@ -54,11 +55,7 @@ export default function ComposeLibraryItems() {
           </TableHeader>
           <TableBody>
             {composeLibraryItems?.totalRows === 0 && (
-              <TableRow>
-                <TableCell colSpan={3} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
+              <TableNoData colSpan={3} />
             )}
             {composeLibraryItems?.items &&
               composeLibraryItems?.items.map((item) => (

diff --git a/web/src/app/compose/compose/containers.tsx b/web/src/app/compose/compose/containers.tsx
@@ -29,6 +29,7 @@ import useNodeHead from "@/hooks/useNodeHead"
 import useNodeComposeItem from "@/hooks/useNodeComposeItem"
 import { ArrowUpRight } from "lucide-react"
 import EditContainerBaseUrlDialog from "@/app/nodes/dialogs/edit-containerbaseurl-dialog"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function ComposeContainers() {
   const { nodeId, composeProjectId } = useParams()
@@ -127,13 +128,7 @@ function ContainersTable({
         </TableRow>
       </TableHeader>
       <TableBody>
-        {!composeContainers?.items && (
-          <TableRow>
-            <TableCell colSpan={5} className="text-center">
-              No data to display
-            </TableCell>
-          </TableRow>
-        )}
+        {!composeContainers?.items && <TableNoData colSpan={5} />}
         {composeContainers?.items &&
           composeContainers?.items.map((item) => (
             <TableRow key={item.name}>

diff --git a/web/src/app/compose/node-compose.tsx b/web/src/app/compose/node-compose.tsx
@@ -25,6 +25,7 @@ import AddNodeComposeProjectDialog from "./dialogs/add-node-compose-project"
 import { ArrowUpRight } from "lucide-react"
 import { CLASSES_CLICKABLE_TABLE_ROW } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function NodeCompose() {
   const { nodeId } = useParams()
@@ -75,13 +76,7 @@ export default function NodeCompose() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {nodeComposeItems?.totalRows === 0 && (
-              <TableRow>
-                <TableCell colSpan={5} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {nodeComposeItems?.totalRows === 0 && <TableNoData colSpan={5} />}
             {nodeComposeItems?.items &&
               nodeComposeItems?.items.map((item) => (
                 <TableRow

diff --git a/web/src/app/containers/containers.tsx b/web/src/app/containers/containers.tsx
@@ -33,6 +33,7 @@ import { ArrowUpRight } from "lucide-react"
 import EditContainerBaseUrlDialog from "../nodes/dialogs/edit-containerbaseurl-dialog"
 import { CLASSES_CLICKABLE_TABLE_ROW } from "@/lib/utils"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Containers() {
   const { nodeId } = useParams()
@@ -203,13 +204,7 @@ export default function Containers() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {containers?.items?.length === 0 && (
-              <TableRow>
-                <TableCell colSpan={5} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {containers?.items?.length === 0 && <TableNoData colSpan={5} />}
             {containers?.items &&
               containers?.items.map((item) => (
                 <TableRow

diff --git a/web/src/app/credentials/credentials.tsx b/web/src/app/credentials/credentials.tsx
@@ -22,6 +22,7 @@ import EditGithubPATDetailsDialog from "./dialogs/edit-github-pat-details-dialog
 import { CLASSES_CLICKABLE_TABLE_ROW } from "@/lib/utils"
 import EditGithubPATSecretDialog from "./dialogs/edit-github-pat-secret-dialog"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Credentials() {
   const { isLoading, credentials } = useCredentials()
@@ -88,13 +89,7 @@ export default function Credentials() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {credentials?.totalRows === 0 && (
-              <TableRow>
-                <TableCell colSpan={3} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {credentials?.totalRows === 0 && <TableNoData colSpan={3} />}
             {credentials?.items &&
               credentials?.items.map((item) => (
                 <TableRow

diff --git a/web/src/app/environments/environments.tsx b/web/src/app/environments/environments.tsx
@@ -20,6 +20,7 @@ import DeleteEnvironmentDialog from "./dialogs/delete-environment-dialog"
 import EditEnvironmentDialog from "./dialogs/edit-environment-dialog"
 import { CLASSES_CLICKABLE_TABLE_ROW } from "@/lib/utils"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Environments() {
   const { isLoading, environments } = useEnvironments()
@@ -75,13 +76,7 @@ export default function Environments() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {environments?.totalRows === 0 && (
-              <TableRow>
-                <TableCell colSpan={2} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {environments?.totalRows === 0 && <TableNoData colSpan={2} />}
             {environments?.items &&
               environments?.items.map((item) => (
                 <TableRow

diff --git a/web/src/app/images/images.tsx b/web/src/app/images/images.tsx
@@ -26,6 +26,7 @@ import MainContent from "@/components/widgets/main-content"
 import { useParams } from "react-router-dom"
 import useNodeHead from "@/hooks/useNodeHead"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Images() {
   const { nodeId } = useParams()
@@ -76,13 +77,7 @@ export default function Images() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {images?.items?.length === 0 && (
-              <TableRow>
-                <TableCell colSpan={5} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {images?.items?.length === 0 && <TableNoData colSpan={5} />}
             {images?.items &&
               images?.items.map((item) => (
                 <TableRow key={item.id}>

diff --git a/web/src/app/networks/networks.tsx b/web/src/app/networks/networks.tsx
@@ -25,6 +25,7 @@ import MainContent from "@/components/widgets/main-content"
 import { useParams } from "react-router-dom"
 import useNodeHead from "@/hooks/useNodeHead"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Networks() {
   const { nodeId } = useParams()
@@ -76,13 +77,7 @@ export default function Networks() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {networks?.items?.length === 0 && (
-              <TableRow>
-                <TableCell colSpan={5} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {networks?.items?.length === 0 && <TableNoData colSpan={5} />}
             {networks?.items &&
               networks?.items.map((item) => (
                 <TableRow key={item.id}>

diff --git a/web/src/app/nodes/nodes.tsx b/web/src/app/nodes/nodes.tsx
@@ -29,6 +29,7 @@ import { useNavigate } from "react-router-dom"
 import useNodes from "@/hooks/useNodes"
 import { useState } from "react"
 import useSetting from "@/hooks/useSetting"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Nodes() {
   const navigate = useNavigate()
@@ -101,13 +102,7 @@ export default function Nodes() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {nodes?.totalRows === 0 && (
-              <TableRow>
-                <TableCell colSpan={4} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {nodes?.totalRows === 0 && <TableNoData colSpan={4} />}
             {nodes?.items &&
               nodes?.items.map((item) => (
                 <TableRow

diff --git a/web/src/app/variables/variables.tsx b/web/src/app/variables/variables.tsx
@@ -23,6 +23,7 @@ import EditVariableDialog from "./dialogs/edit-variable-dialog"
 import EditVariableValueDialog from "./dialogs/edit-variable-value-dialog"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
 import TableButtonEdit from "@/components/widgets/table-button-edit"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Variables() {
   const { isLoading: mapIsLoading, environmentsMap } = useEnvironmentsMap()
@@ -100,13 +101,7 @@ export default function Variables() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {variables?.totalRows === 0 && (
-              <TableRow>
-                <TableCell colSpan={4} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {variables?.totalRows === 0 && <TableNoData colSpan={4} />}
             {variables?.items &&
               variables?.items.map((item) => (
                 <TableRow key={item.name}>

diff --git a/web/src/app/volumes/volumes.tsx b/web/src/app/volumes/volumes.tsx
@@ -25,6 +25,7 @@ import PruneVolumesDialog from "./dialogs/prune-volumes-dialog"
 import { useParams } from "react-router-dom"
 import useNodeHead from "@/hooks/useNodeHead"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
+import { TableNoData } from "@/components/widgets/table-no-data"
 
 export default function Volumes() {
   const { nodeId } = useParams()
@@ -74,13 +75,7 @@ export default function Volumes() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {volumes?.items?.length === 0 && (
-              <TableRow>
-                <TableCell colSpan={3} className="text-center">
-                  No data to display
-                </TableCell>
-              </TableRow>
-            )}
+            {volumes?.items?.length === 0 && <TableNoData colSpan={3} />}
             {volumes?.items &&
               volumes?.items.map((item) => (
                 <TableRow key={item.name}>

diff --git a/web/src/components/widgets/table-no-data.tsx b/web/src/components/widgets/table-no-data.tsx
@@ -0,0 +1,11 @@
+import { TableCell, TableRow } from "../ui/table"
+
+export function TableNoData({ colSpan }: { colSpan: number }) {
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} className="text-center">
+        No data to display
+      </TableCell>
+    </TableRow>
+  )
+}