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.

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

feat: AppNav improvements #231

Merged
merged 5 commits into from
Jan 14, 2024
Merged

feat: AppNav improvements #231

merged 5 commits into from
Jan 14, 2024

Conversation

svc-shorpo
Copy link
Contributor

@svc-shorpo svc-shorpo commented Jan 12, 2024

Screen.Recording.2024-01-11.at.11.34.47.PM.mov

Upd:

Loading Empty Not found
Screenshot 2024-01-13 at 11 54 41 AM Screenshot 2024-01-13 at 12 17 09 PM Screenshot 2024-01-13 at 11 56 16 AM

Screenshot 2024-01-13 at 11 59 24 AM

Copy link

changeset-bot bot commented Jan 12, 2024

🦋 Changeset detected

Latest commit: b43953a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@hyperdx/app Patch
@hyperdx/api Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

jaggederest
jaggederest previously approved these changes Jan 12, 2024
Copy link
Contributor

@jaggederest jaggederest left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, couple comments. If we're using local storage we could think about extending this to store most recent searches or something too!

@@ -514,6 +517,27 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
: 'ok' // All alerts are green
: 'none'; // No alerts are set up

const [searchesListQ, setSearchesListQ] = useState('');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could consider using local storage here and for dashboardsListQ, too.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was thinking about it, but not sure if keeping the search query after page refresh it a good ux. on the other hand, there's this bug with AppNav being completely re-mounted and resetting everything when moving between pages – i'm going to address it separately, should be something with next.js templates

return logViews;
}
return logViews.filter(lv =>
lv.name.toLocaleLowerCase().includes(searchesListQ.toLocaleLowerCase()),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: These are probably a candidate for future refactoring into a function since they look identical except the logViews and searchesListQ parameter differences 👍

/>
{dashboards.length === 0 ? (
<div className="text-slate-300 fs-8 p-2 px-3">
No saved dashboards
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Should probably match the No results matching <i>{searchesListQ}</i> style above

MikeShi42
MikeShi42 previously approved these changes Jan 13, 2024
Copy link
Contributor

@MikeShi42 MikeShi42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Only feedback is on the new saved search empty state

if (q === '') {
return items;
}
return items.filter(item =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just an fyi, we do have fuse.js already included and can use it in the future as well for fancy search :)

>
<div className="d-inline-block text-truncate">
{lv.name}
<div className="mt-1 ">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just dup'ing the same message in chat, not totally sold on using Live Tail for empty state, I think ideally we still try to hint to the user as much as we can that they can create saved searches.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sounds good, added the empty states back

Copy link
Contributor

@MikeShi42 MikeShi42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🐑it

@kodiakhq kodiakhq bot merged commit cbdbe72 into main Jan 14, 2024
4 checks passed
@kodiakhq kodiakhq bot deleted the sr/search-side branch January 14, 2024 02:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants