view without data

Author: Laurie T. Malau

components/dashboard/src/teams/TeamUsage.tsx

@@ -163,30 +163,34 @@ function TeamUsage() {
                                 </ItemField>
                                 <ItemField className="my-auto" />
                             </Item>
-                            {currentPaginatedResults.map((usage) => (
-                                <div
-                                    key={usage.instanceId}
-                                    className="flex p-3 grid grid-cols-5 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
-                                >
-                                    <div className="my-auto">
-                                        <span>{getType(usage.workspaceType)}</span>
-                                    </div>
-                                    <div className="my-auto">
-                                        <span className="text-gray-400">{usage.workspaceClass}</span>
-                                    </div>
-                                    <div className="my-auto">
-                                        <span className="text-gray-700">{getMinutes(usage)}</span>
-                                    </div>
-                                    <div className="my-auto">
-                                        <span className="text-gray-700">{usage.credits.toFixed(1)}</span>
-                                    </div>
-                                    <div className="my-auto">
-                                        <span className="text-gray-400">
-                                            {moment(new Date(usage.startTime).toDateString()).fromNow()}
-                                        </span>
+                            {currentPaginatedResults.length === 0 && (
+                                <div>No sessions found. Have you started any workspaces?</div>
+                            )}
+                            {currentPaginatedResults &&
+                                currentPaginatedResults.map((usage) => (
+                                    <div
+                                        key={usage.instanceId}
+                                        className="flex p-3 grid grid-cols-5 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
+                                    >
+                                        <div className="my-auto">
+                                            <span>{getType(usage.workspaceType)}</span>
+                                        </div>
+                                        <div className="my-auto">
+                                            <span className="text-gray-400">{usage.workspaceClass}</span>
+                                        </div>
+                                        <div className="my-auto">
+                                            <span className="text-gray-700">{getMinutes(usage)}</span>
+                                        </div>
+                                        <div className="my-auto">
+                                            <span className="text-gray-700">{usage.credits.toFixed(1)}</span>
+                                        </div>
+                                        <div className="my-auto">
+                                            <span className="text-gray-400">
+                                                {moment(new Date(usage.startTime).toDateString()).fromNow()}
+                                            </span>
+                                        </div>
                                     </div>
-                                </div>
-                            ))}
+                                ))}
                         </ItemsList>
                         {billedUsage.length > resultsPerPage && (
                             <Pagination