aaron5670 · aaron5670 · Jun 19, 2024 · Jun 19, 2024
diff --git a/src/components/DynamicConfigs.tsx b/src/components/DynamicConfigs.tsx
@@ -22,12 +22,12 @@ import {useLocalStorage} from "@uidotdev/usehooks";
 import {ExternalLinkIcon} from "~components/icons/ExternalLinkIcon";
 import BottomContent from "~components/tables/BottomContent";
 import TopContent from "~components/tables/TopContent";
+import {useDynamicConfigs} from "~hooks/useDynamicConfigs";
 import {useStore} from "~store/useStore";
 import React, {useCallback, useMemo, useState} from "react";
 
 import {dynamicConfigColumns} from "./data";
 import {VerticalDotsIcon} from "./icons/VerticalDotsIcon";
-import {useDynamicConfigs} from "~hooks/useDynamicConfigs";
 
 export default function DynamicConfigs() {
   const {dynamicConfigs, isLoading} = useDynamicConfigs();
@@ -180,22 +180,29 @@ export default function DynamicConfigs() {
 
   return (
     <Table
+      aria-label="Table with all Statsig Dynamic Configs"
       bottomContent={<BottomContent
         hasSearchFilter={hasSearchFilter}
         page={page}
         setPage={setPage}
         total={pages}
       />}
+      bottomContentPlacement="outside"
       classNames={{
         base: ["base-class"],
         emptyWrapper: ["empty-wrapper-class"],
         th: ["bg-transparent", "text-default-500"],
         tr: ["hover:bg-default-50", "cursor-pointer"],
         wrapper: ["max-h-[382px]", "max-w-3xl", "min-h-[242px]"],
       }}
+      fullWidth
+      isCompact
+      isHeaderSticky
+      onSortChange={setSortDescriptor}
+      removeWrapper
+      selectionMode="none"
+      sortDescriptor={sortDescriptor}
       topContent={<TopContent
-        type="dynamicConfigs"
-        total={dynamicConfigs.length}
         filterValue={filterValue}
         hasSearchFilter={hasSearchFilter}
         onRowsPerPageChange={onRowsPerPageChange}
@@ -205,17 +212,10 @@ export default function DynamicConfigs() {
         setStatusFilter={setStatusFilter}
         setVisibleColumns={setVisibleColumns}
         statusFilter={statusFilter}
+        total={dynamicConfigs.length}
+        type="dynamicConfigs"
         visibleColumns={visibleColumns}
       />}
-      aria-label="Table with all Statsig Dynamic Configs"
-      bottomContentPlacement="outside"
-      fullWidth
-      isCompact
-      isHeaderSticky
-      onSortChange={setSortDescriptor}
-      removeWrapper
-      selectionMode="none"
-      sortDescriptor={sortDescriptor}
       topContentPlacement="outside"
     >
       <TableHeader columns={headerColumns}>

diff --git a/src/components/Experiments.tsx b/src/components/Experiments.tsx
@@ -198,22 +198,29 @@ export default function Experiments() {
 
   return (
     <Table
+      aria-label="Table with all Statsig experiments"
       bottomContent={<BottomContent
         hasSearchFilter={hasSearchFilter}
         page={page}
         setPage={setPage}
         total={pages}
       />}
+      bottomContentPlacement="outside"
       classNames={{
         base: ["base-class"],
         emptyWrapper: ["empty-wrapper-class"],
         th: ["bg-transparent", "text-default-500"],
         tr: ["hover:bg-default-50", "cursor-pointer"],
         wrapper: ["max-h-[382px]", "max-w-3xl", "min-h-[242px]"],
       }}
+      fullWidth
+      isCompact
+      isHeaderSticky
+      onSortChange={setSortDescriptor}
+      removeWrapper
+      selectionMode="none"
+      sortDescriptor={sortDescriptor}
       topContent={<TopContent
-        type="experiments"
-        total={experiments.length}
         filterValue={filterValue}
         hasSearchFilter={hasSearchFilter}
         onRowsPerPageChange={onRowsPerPageChange}
@@ -223,17 +230,10 @@ export default function Experiments() {
         setStatusFilter={setStatusFilter}
         setVisibleColumns={setVisibleColumns}
         statusFilter={statusFilter}
+        total={experiments.length}
+        type="experiments"
         visibleColumns={visibleColumns}
       />}
-      aria-label="Table with all Statsig experiments"
-      bottomContentPlacement="outside"
-      fullWidth
-      isCompact
-      isHeaderSticky
-      onSortChange={setSortDescriptor}
-      removeWrapper
-      selectionMode="none"
-      sortDescriptor={sortDescriptor}
       topContentPlacement="outside"
     >
       <TableHeader columns={headerColumns}>

diff --git a/src/components/data.js b/src/components/data.js
@@ -21,8 +21,3 @@ export const experimentStatusOptions = [
     {name: "Abandoned", uid: "abandoned"},
     {name: "Setup", uid: "setup"},
 ];
-
-export const dynamicConfigStatusOptions = [
-    {name: "Enabled", uid: 'true'},
-    {name: "Disabled", uid: 'false'},
-];
diff --git a/src/components/modals/manage-experiment/ManageExperimentModal.tsx b/src/components/modals/manage-experiment/ManageExperimentModal.tsx
@@ -40,10 +40,10 @@ const ManageExperimentModal = () => {
       <ModalContent>
         <ModalBody className="p-3 gap-0">
           <Tabs
+            aria-label="Experiment tabs"
             classNames={{
               panel: "pb-0",
             }}
-            aria-label="Experiment tabs"
             fullWidth
             onSelectionChange={(value: string) => setSelected(value)}
             selectedKey={selected}

diff --git a/src/components/sheets/DynamicConfigSheet.tsx b/src/components/sheets/DynamicConfigSheet.tsx
@@ -1,10 +1,10 @@
 import {Button, ScrollShadow, Spinner} from "@nextui-org/react";
 import {ExternalLinkIcon} from "~components/icons/ExternalLinkIcon";
+import {useDynamicConfig} from "~hooks/useDynamicConfig";
 import {useStore} from "~store/useStore";
-import React, {lazy, Suspense} from 'react';
-import Sheet from 'react-modal-sheet';
+import React, {Suspense, lazy} from 'react';
+import {Sheet} from 'react-modal-sheet';
 import {Tooltip} from "react-tooltip";
-import {useDynamicConfig} from "~hooks/useDynamicConfig";
 // import ReactJson from "@vahagn13/react-json-view";
 
 const ReactJson = lazy(() => import('@vahagn13/react-json-view'));
@@ -15,7 +15,7 @@ const DynamicConfigSheet = () => {
     isItemSheetOpen,
     setItemSheetOpen,
   } = useStore((state) => state);
-  const {dynamicConfig, isLoading, error} = useDynamicConfig(currentItemId);
+  const {dynamicConfig, error, isLoading} = useDynamicConfig(currentItemId);
 
   const handleCloseSheet = () => {
     setItemSheetOpen(false);
@@ -113,17 +113,17 @@ const DynamicConfigSheet = () => {
                       </p>
                       <Suspense fallback={<Spinner size="lg"/>}>
                         <ReactJson
-                            src={dynamicConfig.defaultValue}
-                            name={false}
-                            theme="bright:inverted"
-                            iconStyle="triangle"
-                            enableClipboard={false}
-                            onEdit={false}
-                            onDelete={false}
-                            onAdd={false}
                             displayDataTypes={false}
                             displayObjectSize={true}
+                            enableClipboard={false}
+                            iconStyle="triangle"
                             indentWidth={4}
+                            name={false}
+                            onAdd={false}
+                            onDelete={false}
+                            onEdit={false}
+                            src={dynamicConfig.defaultValue}
+                            theme="bright:inverted"
                         />
                       </Suspense>
                     </ScrollShadow>

diff --git a/src/components/sheets/ExperimentSheet.tsx b/src/components/sheets/ExperimentSheet.tsx
@@ -8,7 +8,7 @@ import {useOverrides} from "~hooks/useOverrides";
 import {useStore} from "~store/useStore";
 import React from 'react';
 import {AiOutlineSetting} from "react-icons/ai";
-import Sheet from 'react-modal-sheet';
+import {Sheet} from 'react-modal-sheet';
 import {Tooltip} from "react-tooltip";
 
 const ExperimentSheet = () => {

diff --git a/src/components/sheets/SettingsSheet.tsx b/src/components/sheets/SettingsSheet.tsx
@@ -2,7 +2,7 @@ import {Button, Input, Radio, RadioGroup} from "@nextui-org/react";
 import {useLocalStorage} from "@uidotdev/usehooks";
 import {useStore} from "~store/useStore";
 import React, {useState} from 'react';
-import Sheet from 'react-modal-sheet';
+import {Sheet} from 'react-modal-sheet';
 
 const SettingsSheet = () => {
   const {isSettingsSheetOpen, setSettingsSheetOpen} = useStore((state) => state);

diff --git a/src/components/tables/OverridesTable.tsx b/src/components/tables/OverridesTable.tsx
@@ -46,6 +46,7 @@ export default function OverridesTable() {
           <div className="flex items-center">
             <Tooltip color="danger" content="Delete override">
               <p
+                className="text-lg text-danger cursor-pointer active:opacity-50"
                 onClick={() => trigger({experimentId: currentExperimentId, override}, {
                   optimisticData: current => {
                     const userIDOverrides = current?.data?.userIDOverrides || [];
@@ -62,7 +63,6 @@ export default function OverridesTable() {
                     };
                   },
                 })}
-                className="text-lg text-danger cursor-pointer active:opacity-50"
               >
                 <DeleteIcon/>
               </p>

diff --git a/src/components/tables/TopContent.tsx b/src/components/tables/TopContent.tsx
@@ -14,8 +14,6 @@ function capitalize(string: string) {
 }
 
 const TopContent = ({
-                      type,
-                      total,
                       filterValue,
                       hasSearchFilter,
                       onRowsPerPageChange,
@@ -25,17 +23,19 @@ const TopContent = ({
                       setStatusFilter,
                       setVisibleColumns,
                       statusFilter,
+                      total,
+                      type,
                       visibleColumns,
                     }) => useMemo(() => {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex justify-between items-center">
         <Input
+          autoFocus={true}
           classNames={{
             base: "w-full sm:max-w-[44%]",
             inputWrapper: "border-1",
           }}
-          autoFocus={true}
           isClearable
           onClear={() => setFilterValue("")}
           onValueChange={onSearchChange}
@@ -58,12 +58,12 @@ const TopContent = ({
                   </Button>
                 </DropdownTrigger>
                 <DropdownMenu
-                  onSelectionChange={(item) => {
-                    setStatusFilter(item);
-                  }}
                   aria-label="Table Columns"
                   closeOnSelect={false}
                   disallowEmptySelection
+                  onSelectionChange={(item) => {
+                    setStatusFilter(item);
+                  }}
                   selectedKeys={statusFilter}
                   selectionMode="multiple"
                 >
@@ -87,12 +87,12 @@ const TopContent = ({
                         </Button>
                     </DropdownTrigger>
                     <DropdownMenu
-                        onSelectionChange={(item) => {
-                            setVisibleColumns(Array.from(item));
-                        }}
                         aria-label="Table Columns"
                         closeOnSelect={false}
                         disallowEmptySelection
+                        onSelectionChange={(item) => {
+                            setVisibleColumns(Array.from(item));
+                        }}
                         selectedKeys={visibleColumns}
                         selectionMode="multiple"
                     >
@@ -116,12 +116,12 @@ const TopContent = ({
                         </Button>
                     </DropdownTrigger>
                     <DropdownMenu
-                        onSelectionChange={(item) => {
-                            setVisibleColumns(Array.from(item));
-                        }}
                         aria-label="Table Columns"
                         closeOnSelect={false}
                         disallowEmptySelection
+                        onSelectionChange={(item) => {
+                            setVisibleColumns(Array.from(item));
+                        }}
                         selectedKeys={visibleColumns}
                         selectionMode="multiple"
                     >

diff --git a/src/hooks/useDynamicConfig.ts b/src/hooks/useDynamicConfig.ts
@@ -3,8 +3,8 @@ import type {DynamicConfig} from "~types/statsig";
 import useSWR from "swr";
 
 export const useDynamicConfig = (dynamicConfigId: string): {
-  error: null | string,
   dynamicConfig?: DynamicConfig,
+  error: null | string,
   isLoading: boolean,
 } => {
   const key = dynamicConfigId ? `https://statsigapi.net/console/v1/dynamic_configs/${dynamicConfigId}` : null;
@@ -14,8 +14,8 @@ export const useDynamicConfig = (dynamicConfigId: string): {
   const dynamicConfig = data?.data;
 
   return {
-    error,
     dynamicConfig,
+    error,
     isLoading,
   };
 };
diff --git a/src/types/statsig.ts b/src/types/statsig.ts
@@ -15,17 +15,17 @@ export interface Experiment {
 }
 
 export interface DynamicConfig {
-  id: string;
-  name: string;
+  createdTime: number;
+  creatorName: string;
+  defaultValue: never; // JSON Object
+  defaultValueJsonC: string;
   description: string;
+  id: string;
+  isEnabled: boolean;
   lastModifiedTime: number;
   lastModifierName: string;
-  createdTime: number;
-  creatorName: string;
+  name: string;
   tags: string[];
-  isEnabled: boolean;
-  defaultValue: any; // JSON Object
-  defaultValueJsonC: string;
 }
 
 export interface HealthCheck {