refactor(ui): make flags/segments views take up more screen space (#3726

) * chore: have flags/segments take up more horizontal space Signed-off-by: Mark Phelps <[email protected]> * chore: rm nav border Signed-off-by: Mark Phelps <[email protected]> * chore: set max-w Signed-off-by: Mark Phelps <[email protected]> * chore: fix ui lint errors Signed-off-by: Mark Phelps <[email protected]> * chore: make better use of space for bottom of pages Signed-off-by: Mark Phelps <[email protected]> --------- Signed-off-by: Mark Phelps <[email protected]>
flipt-io · Dec 15, 2024 · 2e3fd06 · 2e3fd06
1 parent cbad15e
commit 2e3fd06
Show file tree

Hide file tree

Showing 15 changed files with 281 additions and 394 deletions.
diff --git a/go.work.sum b/go.work.sum
@@ -74,12 +74,9 @@ cloud.google.com/go/auth v0.7.3/go.mod h1:HJtWUx1P5eqjy/f6Iq5KeytNpbAcGolPhOgyop
 cloud.google.com/go/auth v0.8.0/go.mod h1:qGVp/Y3kDRSDZ5gFD/XPUfYQ9xW1iI7q8RIRoCyBbJc=
 cloud.google.com/go/auth v0.9.0/go.mod h1:2HsApZBr9zGZhC9QAXsYVYaWk8kNUt37uny+XVKi7wM=
 cloud.google.com/go/auth v0.9.4/go.mod h1:SHia8n6//Ya940F1rLimhJCjjx7KE17t0ctFEci3HkA=
-cloud.google.com/go/auth v0.11.0 h1:Ic5SZz2lsvbYcWT5dfjNWgw6tTlGi2Wc8hyQSC9BstA=
-cloud.google.com/go/auth v0.11.0/go.mod h1:xxA5AqpDrvS+Gkmo9RqrGGRh6WSNKKOXhY3zNOr38tI=
+cloud.google.com/go/auth v0.9.9/go.mod h1:xxA5AqpDrvS+Gkmo9RqrGGRh6WSNKKOXhY3zNOr38tI=
 cloud.google.com/go/auth/oauth2adapt v0.2.2/go.mod h1:wcYjgpZI9+Yu7LyYBg4pqSiaRkfEK3GQcpb7C/uyF1Q=
 cloud.google.com/go/auth/oauth2adapt v0.2.3/go.mod h1:tMQXOfZzFuNuUxOypHlQEXgdfX5cuhwU+ffUuXRJE8I=
-cloud.google.com/go/auth/oauth2adapt v0.2.6 h1:V6a6XDu2lTwPZWOawrAa9HUK+DB2zfJyTuciBG5hFkU=
-cloud.google.com/go/auth/oauth2adapt v0.2.6/go.mod h1:AlmsELtlEBnaNTL7jCj8VQFLy6mbZv0s4Q7NGBeQ5E8=
 cloud.google.com/go/automl v1.13.6/go.mod h1:/0VtkKis6KhFJuPzi45e0E+e9AdQE09SNieChjJqU18=
 cloud.google.com/go/automl v1.13.11/go.mod h1:oMJdXRDOVC+Eq3PnGhhxSut5Hm9TSyVx1aLEOgerOw8=
 cloud.google.com/go/automl v1.14.0/go.mod h1:Kr7rN9ANSjlHyBLGvwhrnt35/vVZy3n/CP4Xmyj0shM=
@@ -1175,8 +1172,6 @@ github.com/googleapis/gax-go/v2 v2.12.0/go.mod h1:y+aIqrI5eb1YGMVJfuV3185Ts/D7qK
 github.com/googleapis/gax-go/v2 v2.12.2/go.mod h1:61M8vcyyXR2kqKFxKrfA22jaA8JGF7Dc8App1U3H6jc=
 github.com/googleapis/gax-go/v2 v2.12.3/go.mod h1:AKloxT6GtNbaLm8QTNSidHUVsHYcBHwWRvkNFJUQcS4=
 github.com/googleapis/gax-go/v2 v2.12.5/go.mod h1:BUDKcWo+RaKq5SC9vVYL0wLADa3VcfswbOMMRmB9H3E=
-github.com/googleapis/gax-go/v2 v2.14.0 h1:f+jMrjBPl+DL9nI4IQzLUxMq7XrAqFYB7hBPqMNIe8o=
-github.com/googleapis/gax-go/v2 v2.14.0/go.mod h1:lhBCnjdLrWRaPvLWhmc8IS24m9mr07qSYnHncrgo+zk=
 github.com/googleapis/gnostic v0.4.1/go.mod h1:LRhVm6pbyptWbWbuZ38d1eyptfvIytN3ir6b65WBswg=
 github.com/googleapis/gnostic v0.5.1/go.mod h1:6U4PtQXGIEt/Z3h5MAT7FNofLnw9vXk2cUuW7uA/OeU=
 github.com/googleapis/gnostic v0.5.5/go.mod h1:7+EbHbldMins07ALC74bsA81Ovc97DwqyJO1AENw9kA=
@@ -1940,8 +1935,7 @@ golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/
 golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
 golang.org/x/crypto v0.27.0/go.mod h1:1Xngt8kV6Dvbssa53Ziq6Eqn0HqbZi5Z6R0ZpwQzt70=
 golang.org/x/crypto v0.28.0/go.mod h1:rmgy+3RHxRZMyY0jjAJShp2zgEdOqj2AO7U0pYmeQ7U=
-golang.org/x/crypto v0.31.0 h1:ihbySMvVjLAeSH1IbfcRTkD/iNscyz8rGzjF/E5hV6U=
-golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
+golang.org/x/crypto v0.30.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/exp v0.0.0-20200331195152-e8c3332aa8e5/go.mod h1:4M0jN8W1tt0AVLNr8HDosyJCDCDuyL9N9+3m7wDWgKw=
 golang.org/x/exp v0.0.0-20230224173230-c95f2b4c22f2/go.mod h1:CxIveKay+FTh1D0yPZemJVgC/95VzuuOLq5Qi4xnoYc=
 golang.org/x/exp v0.0.0-20230515195305-f3d0a9c9a5cc/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
@@ -2128,8 +2122,6 @@ golang.org/x/time v0.0.0-20220210224613-90d013bbcef8/go.mod h1:tRJNPiyCQ0inRvYxb
 golang.org/x/time v0.3.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/time v0.6.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
-golang.org/x/time v0.8.0 h1:9i3RxcPv3PZnitoVGMPDKZSq1xW1gK1Xy3ArNOGZfEg=
-golang.org/x/time v0.8.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.0.0-20180221164845-07fd8470d635/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20181011042414-1f849cf54d09/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20181030221726-6c7e314b6563/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
@@ -2176,9 +2168,8 @@ golang.org/x/tools v0.22.0/go.mod h1:aCwcsjqvq7Yqt6TNyX7QMU2enbQ/Gt0bo6krSeEri+c
 golang.org/x/tools v0.23.0/go.mod h1:pnu6ufv6vQkll6szChhK3C3L/ruaIv5eBeztNG8wtsI=
 golang.org/x/tools v0.24.0/go.mod h1:YhNqVBIfWHdzvTLs0d8LCuMhkKUgSUKldakyV7W/WDQ=
 golang.org/x/tools v0.26.0/go.mod h1:TPVVj70c7JJ3WCazhD8OdXcZg/og+b9+tH/KxylGwH0=
+golang.org/x/tools v0.27.0/go.mod h1:sUi0ZgbwW9ZPAq26Ekut+weQPR5eIM6GQLQ1Yjm1H0Q=
 golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2/go.mod h1:K8+ghG5WaK9qNqU5K3HdILfMLy1f3aNYFI/wnl100a8=
-golang.org/x/xerrors v0.0.0-20240903120638-7835f813f4da h1:noIWHXmPHxILtqtCOPIhSt0ABwskkZKjD3bXGnZGpNY=
-golang.org/x/xerrors v0.0.0-20240903120638-7835f813f4da/go.mod h1:NDW/Ps6MPRej6fsCIbMTohpP40sJ/P/vI1MoTEGwX90=
 google.golang.org/api v0.0.0-20160322025152-9bf6e6e569ff/go.mod h1:4mhQ8q/RsB7i+udVvVy5NUi08OU8ZlA0gRVgrF7VFY0=
 google.golang.org/api v0.10.0/go.mod h1:o4eAsZoiT+ibD93RtjEohWalFOjRDx6CVaqeizhEnKg=
 google.golang.org/api v0.35.0/go.mod h1:/XrVsuzM0rZmrsbjJutiuftIzeuTQcEeaYcSk/mQ1dg=
@@ -2200,9 +2191,8 @@ google.golang.org/api v0.189.0/go.mod h1:FLWGJKb0hb+pU2j+rJqwbnsF+ym+fQs73rbJ+KA
 google.golang.org/api v0.191.0/go.mod h1:tD5dsFGxFza0hnQveGfVk9QQYKcfp+VzgRqyXFxE0+E=
 google.golang.org/api v0.193.0/go.mod h1:Po3YMV1XZx+mTku3cfJrlIYR03wiGrCOsdpC67hjZvw=
 google.golang.org/api v0.196.0/go.mod h1:g9IL21uGkYgvQ5BZg6BAtoGJQIm8r6EgaAbpNey5wBE=
+google.golang.org/api v0.203.0/go.mod h1:BuOVyCSYEPwJb3npWvDnNmFI92f3GeRnHNkETneT3SI=
 google.golang.org/api v0.205.0/go.mod h1:NrK1EMqO8Xk6l6QwRAmrXXg2v6dzukhlOyvkYtnvUuc=
-google.golang.org/api v0.210.0 h1:HMNffZ57OoZCRYSbdWVRoqOa8V8NIHLL0CzdBPLztWk=
-google.golang.org/api v0.210.0/go.mod h1:B9XDZGnx2NtyjzVkOVTGrFSAVZgPcbedzKg/gTLwqBs=
 google.golang.org/appengine v1.6.2/go.mod h1:i06prIuMbXzDqacNJfV5OdTW448YApPu5ww/cMBSeb0=
 google.golang.org/appengine v1.6.7/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
 google.golang.org/appengine v1.6.8/go.mod h1:1jJ3jBArFh5pcgW8gCtRJnepW8FzD1V44FJffLiz/Ds=

diff --git a/ui/src/app/Layout.tsx b/ui/src/app/Layout.tsx
@@ -81,7 +81,7 @@ function InnerLayout() {
           />
         )}
         <main className="flex pt-1 sm:pt-4">
-          <div className="mx-auto w-full max-w-7xl overflow-x-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto w-full max-w-screen-lg overflow-x-auto px-4 sm:px-6 lg:px-8">
             <Outlet />
           </div>
         </main>

diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
@@ -18,7 +18,6 @@ import CopyToNamespacePanel from '~/components/panels/CopyToNamespacePanel';
 import DeletePanel from '~/components/panels/DeletePanel';
 import { useError } from '~/data/hooks/error';
 import { useSuccess } from '~/data/hooks/success';
-import { useTimezone } from '~/data/hooks/timezone';
 import {
   useCopyFlagMutation,
   useDeleteFlagMutation,
@@ -41,7 +40,6 @@ const booleanFlagTabs = [
 
 export default function Flag() {
   let { flagKey } = useParams();
-  const { inTimezone } = useTimezone();
 
   const [showDeleteFlagModal, setShowDeleteFlagModal] = useState(false);
   const [showCopyFlagModal, setShowCopyFlagModal] = useState(false);
@@ -155,98 +153,71 @@ export default function Flag() {
           ]}
         />
       </PageHeader>
-      <div className="flex items-center justify-between">
-        <div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
-          <div
-            title={inTimezone(flag.createdAt)}
-            className="mt-2 flex items-center text-sm text-gray-500"
-          >
-            <CalendarIcon
-              className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
-              aria-hidden="true"
-            />
-            Created{' '}
-            {formatDistanceToNowStrict(parseISO(flag.createdAt), {
-              addSuffix: true
-            })}
-          </div>
+
+      {/* Info Section */}
+      <div className="mb-8 space-y-4">
+        <div className="flex items-center text-sm text-gray-500">
+          <CalendarIcon className="mr-1.5 h-5 w-5 text-gray-400" />
+          Created{' '}
+          {formatDistanceToNowStrict(parseISO(flag.createdAt), {
+            addSuffix: true
+          })}
         </div>
+
+        <MoreInfo href="https://www.flipt.io/docs/concepts#flags">
+          Learn more about flags
+        </MoreInfo>
       </div>
 
-      <div className="flex flex-col">
-        {/* flag details */}
-        <div className="my-5">
-          <div className="md:grid md:grid-cols-3 md:gap-6">
-            <div className="md:col-span-1">
-              <p className="mt-1 text-sm text-gray-500">
-                Basic information about the flag and its status.
-              </p>
-              <MoreInfo
-                className="mt-5"
-                href="https://www.flipt.io/docs/concepts#flags"
-              >
-                Learn more about flags
-              </MoreInfo>
-            </div>
-            <div className="mt-5 md:col-span-2 md:mt-0">
-              <FlagForm flag={flag} />
-            </div>
-          </div>
-        </div>
-        <>
-          <div className="mt-3 flex flex-row sm:mt-5">
-            <div className="border-b-2 border-gray-200">
-              <nav className="-mb-px flex space-x-8">
-                {flag.type === FlagType.VARIANT ? (
-                  <>
-                    {variantFlagTabs.map((tab) => (
-                      <NavLink
-                        end
-                        key={tab.name}
-                        to={tab.to}
-                        className={({ isActive }) =>
-                          cls(
-                            'whitespace-nowrap border-b-2 px-1 py-2 font-medium',
-                            {
-                              'border-violet-500 text-violet-600': isActive,
-                              'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
-                                !isActive
-                            }
-                          )
-                        }
-                      >
-                        {tab.name}
-                      </NavLink>
-                    ))}
-                  </>
-                ) : (
-                  <>
-                    {booleanFlagTabs.map((tab) => (
-                      <NavLink
-                        end
-                        key={tab.name}
-                        to={tab.to}
-                        className={({ isActive }) =>
-                          cls(
-                            'whitespace-nowrap border-b-2 px-1 py-2 font-medium',
-                            {
-                              'border-violet-500 text-violet-600': isActive,
-                              'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
-                                !isActive
-                            }
-                          )
-                        }
-                      >
-                        {tab.name}
-                      </NavLink>
-                    ))}
-                  </>
-                )}
-              </nav>
-            </div>
-          </div>
-          <Outlet context={{ flag }} />
-        </>
+      {/* Form Section - Full Width */}
+      <div className="mb-8">
+        <FlagForm flag={flag} />
+      </div>
+
+      {/* Tabs Section */}
+      <div>
+        <nav className="mb-8 space-x-4">
+          {flag.type === FlagType.VARIANT ? (
+            <>
+              {variantFlagTabs.map((tab) => (
+                <NavLink
+                  end
+                  key={tab.name}
+                  to={tab.to}
+                  className={({ isActive }) =>
+                    cls('whitespace-nowrap border-b-2 px-1 py-2 font-medium', {
+                      'border-violet-500 text-violet-600': isActive,
+                      'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
+                        !isActive
+                    })
+                  }
+                >
+                  {tab.name}
+                </NavLink>
+              ))}
+            </>
+          ) : (
+            <>
+              {booleanFlagTabs.map((tab) => (
+                <NavLink
+                  end
+                  key={tab.name}
+                  to={tab.to}
+                  className={({ isActive }) =>
+                    cls('whitespace-nowrap border-b-2 px-1 py-2 font-medium', {
+                      'border-violet-500 text-violet-600': isActive,
+                      'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
+                        !isActive
+                    })
+                  }
+                >
+                  {tab.name}
+                </NavLink>
+              ))}
+            </>
+          )}
+        </nav>
+        <Outlet context={{ flag }} />
       </div>
     </>
   );

diff --git a/ui/src/app/flags/NewFlag.tsx b/ui/src/app/flags/NewFlag.tsx
@@ -6,23 +6,14 @@ export default function NewFlag() {
   return (
     <>
       <PageHeader title="New Flag" />
-      <div className="my-6">
-        <div className="md:grid md:grid-cols-3 md:gap-6">
-          <div className="md:col-span-1">
-            <p className="mt-2 text-sm text-gray-500">
-              Basic information about the flag and its status.
-            </p>
-            <MoreInfo
-              className="mt-5"
-              href="https://www.flipt.io/docs/concepts#flags"
-            >
-              Learn more about flags
-            </MoreInfo>
-          </div>
-          <div className="mt-5 md:col-span-2 md:mt-0">
-            <FlagForm />
-          </div>
-        </div>
+      <div className="mb-8 space-y-4">
+        <MoreInfo href="https://www.flipt.io/docs/concepts#flags">
+          Learn more about flags
+        </MoreInfo>
+      </div>
+
+      <div className="mb-8">
+        <FlagForm />
       </div>
     </>
   );

diff --git a/ui/src/app/flags/analytics/Analytics.tsx b/ui/src/app/flags/analytics/Analytics.tsx
@@ -101,7 +101,7 @@ export default function Analytics() {
   }, [selectedDuration]);
 
   return (
-    <div className="mt-2">
+    <div className="mt-2 max-w-screen-lg">
       {config.analyticsEnabled ? (
         <>
           <div className="sm:flex sm:items-center">
@@ -141,10 +141,10 @@ export default function Analytics() {
           </div>
         </>
       ) : (
-        <div className="mt-10 flex flex-col text-center">
+        <div className="mt-10">
           <Well>
-            <p className="text-sm text-gray-600">Analytics Disabled</p>
-            <p className="mt-4 text-sm text-gray-500">
+            <p>Analytics Disabled</p>
+            <p className="mt-4">
               See the configuration{' '}
               <a
                 className="text-violet-500"

diff --git a/ui/src/app/flags/rules/Rules.tsx b/ui/src/app/flags/rules/Rules.tsx
@@ -272,7 +272,6 @@ export default function Rules() {
       const size = rule.segmentKeys ? rule.segmentKeys.length : 0;
 
       // Combine both segment and segments for legacy purposes.
-      // TODO(yquansah): Should be removed once there are no more references to `segmentKey`.
       for (let i = 0; i < size; i++) {
         const ruleSegment = rule.segmentKeys && rule.segmentKeys[i];
         const segment = segments.find(
@@ -409,7 +408,11 @@ export default function Rules() {
         <div className="sm:flex sm:items-center">
           <div className="sm:flex-auto">
             <p className="mt-1 text-sm text-gray-500">
-              Enable rich targeting and segmentation for evaluating your flags
+              Rules are evaluated in order from top to bottom.
+            </p>
+            <p className="mt-1 text-sm text-gray-500">
+              Rules can be rearranged by clicking on the header and dragging and
+              dropping it into place.
             </p>
           </div>
           {((rules && rules.length > 0) || showDefaultVariant) && (
@@ -428,20 +431,8 @@ export default function Rules() {
         </div>
         <div className="mt-10">
           {(rules && rules.length > 0) || showDefaultVariant ? (
-            <div className="flex lg:space-x-5">
-              <div className="hidden w-1/4 flex-col space-y-7 pr-3 lg:flex">
-                <p className="text-sm font-light text-gray-700">
-                  Rules are evaluated in order from{' '}
-                  <span className="font-semibold">top to bottom</span>. The
-                  first rule that matches will be applied.
-                </p>
-                <p className="text-sm font-light text-gray-700">
-                  Rules can be rearranged by clicking on a rule header and{' '}
-                  <span className="font-semibold">dragging and dropping</span>{' '}
-                  it into place.
-                </p>
-              </div>
-              <div className="pattern-boxes w-full border border-gray-200 p-4 pattern-bg-gray-solid50 pattern-gray-solid100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-gray-solid lg:w-3/4 lg:p-6">
+            <div className="flex">
+              <div className="pattern-boxes w-full border border-gray-200 p-4 pattern-bg-gray-solid50 pattern-gray-solid100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-gray-solid lg:p-6">
                 {rules && rules.length > 0 && (
                   <DndContext
                     sensors={sensors}

diff --git a/ui/src/app/segments/NewSegment.tsx b/ui/src/app/segments/NewSegment.tsx
@@ -6,23 +6,14 @@ export default function NewSegment() {
   return (
     <>
       <PageHeader title="New Segment" />
-      <div className="my-6">
-        <div className="md:grid md:grid-cols-3 md:gap-6">
-          <div className="md:col-span-1">
-            <p className="mt-2 text-sm text-gray-500">
-              Basic information about the segment.
-            </p>
-            <MoreInfo
-              className="mt-5"
-              href="https://www.flipt.io/docs/concepts#segments"
-            >
-              Learn more about segmentation
-            </MoreInfo>
-          </div>
-          <div className="mt-5 md:col-span-2 md:mt-0">
-            <SegmentForm />
-          </div>
-        </div>
+      <div className="mb-8 space-y-4">
+        <MoreInfo href="https://www.flipt.io/docs/concepts#segments">
+          Learn more about segments
+        </MoreInfo>
+      </div>
+
+      <div className="mb-8">
+        <SegmentForm />
       </div>
     </>
   );