Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Dec 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1922880
chore: have flags/segments take up more horizontal space
markphelps Dec 14, 2024
82f9403
chore: rm nav border
markphelps Dec 14, 2024
8900237
chore: set max-w
markphelps Dec 14, 2024
acfe672
chore: fix ui lint errors
markphelps Dec 14, 2024
b2ead57
chore: make better use of space for bottom of pages
markphelps Dec 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 4 additions & 14 deletions go.work.sum
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=
Expand Down Expand Up @@ -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=
Expand Down Expand Up @@ -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=
Expand Down Expand Up @@ -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=
Expand Down Expand Up @@ -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=
Expand All @@ -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=
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
153 changes: 62 additions & 91 deletions ui/src/app/flags/Flag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -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>
</>
);
Expand Down
25 changes: 8 additions & 17 deletions ui/src/app/flags/NewFlag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down
8 changes: 4 additions & 4 deletions ui/src/app/flags/analytics/Analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand Down
23 changes: 7 additions & 16 deletions ui/src/app/flags/rules/Rules.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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) && (
Expand All @@ -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}
Expand Down
25 changes: 8 additions & 17 deletions ui/src/app/segments/NewSegment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down
Loading
Loading