feat: switch to flat tabs for permission view in modals

Update src/components/Connections/ConnectionFormModal.tsx

Co-authored-by: Moshe Immerman <moshe@flanksource.com>

Author: mainawycliffe

src/components/Connections/ConnectionFormModal.tsx

@@ -1,4 +1,4 @@
-import { Tab, Tabs } from "@flanksource-ui/ui/Tabs/Tabs";
+import FlatTabs from "@flanksource-ui/ui/Tabs/FlatTabs";
 import React, { useEffect, useState } from "react";
 import { Icon } from "../../ui/Icons/Icon";
 import { Modal } from "../../ui/Modal";
@@ -128,44 +128,46 @@ export default function ConnectionFormModal({
     >
       {type ? (
         formValue?.id ? (
-          <Tabs
+          <FlatTabs
             activeTab={activeTab}
-            onSelectTab={(label) => setActiveTab(label)}
-          >
-            <Tab
-              label="Edit Connection"
-              value={"form"}
-              className="flex flex-1 flex-col"
-            >
-              <ConnectionForm
-                handleBack={() => setConnectionType(undefined)}
-                connectionType={type}
-                onConnectionSubmit={onConnectionSubmit}
-                onConnectionDelete={onConnectionDelete}
-                formValue={formValue}
-                className={className}
-                isSubmitting={isSubmitting}
-                isDeleting={isDeleting}
-              />
-            </Tab>
-
-            <Tab
-              label="Permissions"
-              value={"permissions"}
-              className="flex flex-1 flex-col"
-            >
-              <PermissionsView
-                hideResourceColumn
-                permissionRequest={{
-                  connectionId: formValue.id
-                }}
-                showAddPermission
-                newPermissionData={{
-                  connection_id: formValue.id
-                }}
-              />
-            </Tab>
-          </Tabs>
+            setActiveTab={(label) => setActiveTab(label)}
+            tabs={[
+              {
+                label: "Edit",
+                key: "form",
+                current: activeTab === "form",
+                content: (
+                  <ConnectionForm
+                    handleBack={() => setConnectionType(undefined)}
+                    connectionType={type}
+                    onConnectionSubmit={onConnectionSubmit}
+                    onConnectionDelete={onConnectionDelete}
+                    formValue={formValue}
+                    className={className}
+                    isSubmitting={isSubmitting}
+                    isDeleting={isDeleting}
+                  />
+                )
+              },
+              {
+                label: "Permissions",
+                key: "permissions",
+                current: activeTab === "permissions",
+                content: (
+                  <PermissionsView
+                    hideResourceColumn
+                    permissionRequest={{
+                      connectionId: formValue.id
+                    }}
+                    showAddPermission
+                    newPermissionData={{
+                      connection_id: formValue.id
+                    }}
+                  />
+                )
+              }
+            ]}
+          />
         ) : (
           <ConnectionForm
             handleBack={() => setConnectionType(undefined)}

src/components/Playbooks/Settings/PlaybookSpecFormModal.tsx

@@ -1,7 +1,7 @@
 import { PlaybookSpec } from "@flanksource-ui/api/types/playbooks";
 import PermissionsView from "@flanksource-ui/components/Permissions/PermissionsView";
 import { Modal } from "@flanksource-ui/ui/Modal";
-import { Tab, Tabs } from "@flanksource-ui/ui/Tabs/Tabs";
+import FlatTabs from "@flanksource-ui/ui/Tabs/FlatTabs";
 import { useState } from "react";
 import PlaybookSpecModalTitle from "../PlaybookSpecModalTitle";
 import PlaybookSpecsForm from "./PlaybookSpecsForm";
@@ -37,35 +37,41 @@ export default function PlaybookSpecFormModal({
       helpLink="playbooks"
     >
       {playbook?.id ? (
-        <Tabs
+        <FlatTabs
           activeTab={activeTab}
-          onSelectTab={(label) => setActiveTab(label)}
-        >
-          <Tab label="Edit" value={"form"} className="flex flex-1 flex-col">
-            <PlaybookSpecsForm
-              onClose={onClose}
-              {...props}
-              playbook={playbook}
-            />
-          </Tab>
-
-          <Tab
-            label="Permissions"
-            value={"permissions"}
-            className="flex flex-1 flex-col"
-          >
-            <PermissionsView
-              hideResourceColumn
-              permissionRequest={{
-                playbookId: playbook.id
-              }}
-              showAddPermission
-              newPermissionData={{
-                playbook_id: playbook.id
-              }}
-            />
-          </Tab>
-        </Tabs>
+          setActiveTab={(label) => setActiveTab(label)}
+          tabs={[
+            {
+              label: "Edit Playbook Spec",
+              key: "form",
+              current: activeTab === "form",
+              content: (
+                <PlaybookSpecsForm
+                  onClose={onClose}
+                  {...props}
+                  playbook={playbook}
+                />
+              )
+            },
+            {
+              label: "Permissions",
+              key: "permissions",
+              current: activeTab === "permissions",
+              content: (
+                <PermissionsView
+                  hideResourceColumn
+                  permissionRequest={{
+                    playbookId: playbook.id
+                  }}
+                  showAddPermission
+                  newPermissionData={{
+                    playbook_id: playbook.id
+                  }}
+                />
+              )
+            }
+          ]}
+        />
       ) : (
         <PlaybookSpecsForm onClose={onClose} {...props} />
       )}

src/ui/Tabs/FlatTabs.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { useState } from "react";
+import FlatTabs from "./FlatTabs";
+
+export default {
+  title: "ui/FlatTabs",
+  component: FlatTabs
+} satisfies Meta<typeof FlatTabs>;
+
+const Template: StoryFn<typeof FlatTabs> = () => {
+  const [activeTab, setActiveTab] = useState<"tab1" | "tab2">("tab1");
+
+  return (
+    <FlatTabs
+      tabs={[
+        {
+          label: "Tab 1",
+          key: "tab1",
+          current: activeTab === "tab1",
+          content: <div>Tab 1 content</div>
+        },
+        {
+          label: "Tab 2",
+          key: "tab2",
+          current: activeTab === "tab2",
+          content: <div>Tab 2 content</div>
+        }
+      ]}
+      activeTab={activeTab}
+      setActiveTab={(t) => setActiveTab(t)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

src/ui/Tabs/FlatTabs.tsx

@@ -0,0 +1,61 @@
+import clsx from "clsx";
+
+type FlatTabsProps<T extends string> = {
+  tabs: {
+    label: string;
+    key: T;
+    current: boolean;
+    content: React.ReactNode;
+  }[];
+  activeTab: string;
+  setActiveTab: (tab: T) => void;
+};
+
+export default function FlatTabs<T extends string>({
+  tabs,
+  activeTab,
+  setActiveTab
+}: FlatTabsProps<T>) {
+  return (
+    <div className="flex flex-1 flex-col">
+      <div className="sm:hidden">
+        <label htmlFor="tabs" className="sr-only">
+          Select a tab
+        </label>
+        {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
+        <select
+          id="tabs"
+          name="tabs"
+          defaultValue={activeTab}
+          className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+        >
+          {tabs.map((tab) => (
+            <option key={tab.label}>{tab.label}</option>
+          ))}
+        </select>
+      </div>
+      <div className="hidden flex-1 flex-col sm:flex">
+        <div className="border-b border-gray-200">
+          <nav aria-label="Tabs" className="-mb-px flex space-x-8">
+            {tabs.map((tab) => (
+              <button
+                key={tab.label}
+                onClick={() => setActiveTab(tab.key)}
+                aria-current={tab.current ? "page" : undefined}
+                className={clsx(
+                  tab.current
+                    ? "border-indigo-500 text-indigo-600"
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                  "group inline-flex items-center border-b-2 px-2 py-4 text-sm font-medium"
+                )}
+              >
+                <span>{tab.label}</span>
+              </button>
+            ))}
+          </nav>
+        </div>
+        {tabs.find((tab) => tab.current)?.content}
+      </div>
+    </div>
+  );
+}