From acc32f2c5d05e2e0a632f39d636f925e976c7ba5 Mon Sep 17 00:00:00 2001
From: dnswrsrx <dennissaw12@gmail.com>
Date: Tue, 29 Aug 2023 12:27:50 -0700
Subject: [PATCH] Move allowed and blocked instance tables to the column right
 of linked instance table (#2071)

* Move allowed and blocked instance tables into column right of linked

Conserve some vertical space. And I assume linked instance list will
usually belonger than allowed and blocked, combined or not.

* Use tabs to organise instances by status

As per suggestions from the initial PR. Using the suggested Tab
component was implemented.

* Provide a header when there are no instances found

Will be weird if there are no instances linked on this instances page
otherwise.

* Wrap tabs and table in a col-sm-8 div (within a row div)

To restrict the width of the table especially on wider screens
---
 src/shared/components/home/instances.tsx | 53 +++++++++++-------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx
index 0d6748a7..e27c40bb 100644
--- a/src/shared/components/home/instances.tsx
+++ b/src/shared/components/home/instances.tsx
@@ -6,12 +6,14 @@ import {
   GetSiteResponse,
   Instance,
 } from "lemmy-js-client";
+import classNames from "classnames";
 import { relTags } from "../../config";
 import { InitialFetchRequest } from "../../interfaces";
 import { FirstLoadService, I18NextService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
+import Tabs from "../common/tabs";
 
 type InstancesData = RouteDataResponse<{
   federatedInstancesResponse: GetFederatedInstancesResponse;
@@ -85,37 +87,30 @@ export class Instances extends Component<any, InstancesState> {
       case "success": {
         const instances = this.state.instancesRes.data.federated_instances;
         return instances ? (
-          <>
-            <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
-            <div className="row">
-              <div className="col-md-6">
-                <h2 className="h5 mb-3">
-                  {I18NextService.i18n.t("linked_instances")}
-                </h2>
-                {this.itemList(instances.linked)}
-              </div>
+          <div className="row">
+            <div className="col-lg-8">
+              <Tabs
+                tabs={["linked", "allowed", "blocked"]
+                  .filter(status => instances[status].length)
+                  .map(status => ({
+                    key: status,
+                    label: I18NextService.i18n.t(`${status}_instances`),
+                    getNode: isSelected => (
+                      <div
+                        role="tabpanel"
+                        className={classNames("tab-pane show", {
+                          active: isSelected,
+                        })}
+                      >
+                        {this.itemList(instances[status])}
+                      </div>
+                    ),
+                  }))}
+              />
             </div>
-            <div className="row">
-              {instances.allowed && instances.allowed.length > 0 && (
-                <div className="col-md-6">
-                  <h2 className="h5 mb-3">
-                    {I18NextService.i18n.t("allowed_instances")}
-                  </h2>
-                  {this.itemList(instances.allowed)}
-                </div>
-              )}
-              {instances.blocked && instances.blocked.length > 0 && (
-                <div className="col-md-6">
-                  <h2 className="h5 mb-3">
-                    {I18NextService.i18n.t("blocked_instances")}
-                  </h2>
-                  {this.itemList(instances.blocked)}
-                </div>
-              )}
-            </div>
-          </>
+          </div>
         ) : (
-          <></>
+          <h5>No linked instance</h5>
         );
       }
     }