refactor(site): generalize UserCell component #484

greyscaled · 2022-03-18T07:01:36Z

Summary:

This is a first step in porting over v1 AuditLog in a refactored/cleaned
up fashion. The existing UserCell component was generalized for re-use.

Details:

Move UserCell to components/Table/Cells
Add tests and stories for UserCell

Impact:

The UserCell is used in the User dropdown menu and in the Navbar. We should verify that
those are unaffected by this change. Furthermore, this unblocks future work in list views
like the audit log, user management panel and organizations management panel.

Relations:

This commit relates to Simplify the frontend components for audit logging and pull static list of keys for filtering input fields #472, but does not finish it.
This commit should not merge until after refactor(site): replace UserContext with userXService #465 and chore: improve eslint, sb, tsc configs #483 because it's
based on them.

TODO:

rebase after refactor(site): replace UserContext with userXService #465 and chore: improve eslint, sb, tsc configs #483 are merged

codecov · 2022-03-18T07:04:41Z

Codecov Report

Merging #484 (ec4ac6d) into main (26d24f4) will increase coverage by 0.06%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #484      +/-   ##
==========================================
+ Coverage   60.35%   60.42%   +0.06%     
==========================================
  Files         191      193       +2     
  Lines       10864    10878      +14     
  Branches       85       87       +2     
==========================================
+ Hits         6557     6573      +16     
+ Misses       3587     3585       -2     
  Partials      720      720

Flag	Coverage Δ
unittest-go-macos-latest	`56.25% <ø> (+0.13%)`	⬆️
unittest-go-ubuntu-latest	`59.75% <ø> (-0.09%)`	⬇️
unittest-go-windows-2022	`55.89% <ø> (-0.03%)`	⬇️
unittest-js	`63.89% <100.00%> (+0.70%)`	⬆️

Impacted Files	Coverage Δ
site/src/components/Navbar/UserDropdown.tsx	`86.95% <ø> (ø)`
site/src/components/User/UserProfileCard.tsx	`75.00% <ø> (ø)`
site/src/components/Table/Cells/UserCell.tsx	`100.00% <100.00%> (ø)`
site/src/components/User/UserAvatar.tsx	`100.00% <100.00%> (+12.50%)`	⬆️
site/src/test_helpers/entities.ts	`100.00% <100.00%> (ø)`
site/src/util/first-letter.ts	`100.00% <100.00%> (ø)`
cli/config/file.go	`67.64% <0.00%> (-8.83%)`	⬇️
peer/conn.go	`75.38% <0.00%> (-0.77%)`	⬇️
provisionerd/provisionerd.go	`78.03% <0.00%> (+1.14%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 26d24f4...ec4ac6d. Read the comment docs.

@khorne3

Summary: This is a first step in porting over v1 AuditLog in a refactored/cleaned up fashion. This isn't a direct port, since we do not yet have a UserAvatar component. Details: - Port over UserCell from v1, sans UserAvatar impl - Add tests and stories for UserCell Notes: We do not have a holistic solution for handling localization, but starting from some kind of easy way that collects/resources strings will make the migration significantly easier. It will also help out our product copy owner, @khorne3 with maintenance. An RFC regarding this might be necessitated. Impact: This change does not have any user-facing impact yet, because the UserCell is not yet rendered in the product. This enables an incremental approach to migrating in the FE of the Audit Log, which is still waiting on the BE port. Relations: - This commit relates to #472, but does not finish it. - This commit should not merge until after #465 and #483 because it's based on them.

Summary: This is a direct follow-up to #484 and a next step in porting over the AuditLog with appropriate refactoring. This isn't a direct port; we used to have a map of icons on the FE, but we want to no loner split the logic between FE and BE. If we want icons at a later time point, we can return an icon identifier in the response, or we can simplify the view and gain real estate by omitting the icons. At the time of this commit, I prefer omitting the icons. Details: - Port over ActionCell from v1, sans icons - Add tests and stories for ActionCell Impact: This change does not have any user-facing impact yet, because the ActionCell is not yet rendered in the product. This enables an incremental approach to migrating in the FE of the Audit Log, which is still waiting on the BE port. Relations: - This commit relates to #472, but does not finish it. - This commit should not merged until after #484 because it's based from it

Summary: This is a direct follow-up to #484 and #500. It is a part of many steps in porting/refactoring the AuditLog from v1. Details: - Port over TargetCell from v1, with refactorings - Add tests and stories Impact: This change does not have any user-facing impact yet because AuditLog is not yet available in the product. This is part of an incremental approach; the FE is still waiting on the BE port. Relations: - This commit relates to #472, but does not finish it - This commit should not be merged until after #484 and #500, because it builds off of them.

Summary: This is direct follow-up to #484, #500, and #501. It is a part of many steps in porting/refactoring the AuditLog from v1. Details: - Port over TimeCell from v1, with refactorings - A jest test was not added because we use locale dates and times, which can be tricky to test. This can be addressed in the future. Impact: This change does not have any user-facing impact yet because AuditLog is not yet available in the product. This is part of an incremental approach; the FE is still waiting on the BE port. Relations: - This commit relates to #472, but does not finish it - This commit should not be merged until after #484, #500 and #501, because it builds off of them

presleyp · 2022-03-21T14:49:24Z

We have a UserAvatar component, in components/User. Will that one work? Makes me think we should have less nesting of our components so we're more likely to reuse them. Speaking of, can we reuse this UserCell outside of the Audit Log? I know we have user cells in Audit Log, Users, and Organization. Looks like the latter two are the same and the first just differs in what detail is in lighter text at the bottom, so maybe we could put UserCell directly in components and give it a prop that determines which detail it shows.

greyscaled · 2022-03-21T18:43:55Z

We have a UserAvatar component, in components/User. Will that one work? Makes me think we should have less nesting of our components so we're more likely to reuse them. Speaking of, can we reuse this UserCell outside of the Audit Log? I know we have user cells in Audit Log, Users, and Organization. Looks like the latter two are the same and the first just differs in what detail is in lighter text at the bottom, so maybe we could put UserCell directly in components and give it a prop that determines which detail it shows.

Great feedback!

greyscaled · 2022-03-22T23:57:03Z

site/src/components/Table/Cells/UserCell.stories.tsx

+import { UserCell, UserCellProps } from "./UserCell"
+
+export default {
+  title: "Table/Cells/UserCell",


@presleyp - do you like this organization (Table > Cells) ? Another possibility is a new directory "TableCells". I could go either way, just wanna find the one we all think is best.

Yeah this seems good! Having a manageable number of top level categories will be nice.

presleyp

Thanks for doing the mocks and tests, looks great!

presleyp · 2022-03-23T13:52:26Z

site/src/components/Table/Cells/UserCell.stories.tsx

+import { UserCell, UserCellProps } from "./UserCell"
+
+export default {
+  title: "Table/Cells/UserCell",


Yeah this seems good! Having a manageable number of top level categories will be nice.

presleyp · 2022-03-23T14:06:51Z

site/src/components/User/UserAvatar.tsx

@@ -1,25 +1,12 @@
 import Avatar from "@material-ui/core/Avatar"
 import React from "react"
-import { UserResponse } from "../../api/types"
+import { firstLetter } from "../../util/first-letter"


presleyp · 2022-03-23T14:07:31Z

site/src/components/User/UserProfileCard.tsx

@@ -15,7 +15,7 @@ export const UserProfileCard: React.FC<UserProfileCardProps> = ({ user }) => {
  return (
    <div className={styles.root}>
      <div className={styles.avatarContainer}>
-        <UserAvatar className={styles.avatar} user={user} />
+        <UserAvatar className={styles.avatar} username={user.username} />


Great choice

greyscaled self-assigned this Mar 18, 2022

greyscaled force-pushed the vapurrmaid/472-init-audit-log branch from 8b7a482 to 7a6df41 Compare March 18, 2022 21:48

greyscaled marked this pull request as ready for review March 18, 2022 21:49

greyscaled requested a review from a team as a code owner March 18, 2022 21:49

greyscaled added 2 commits March 18, 2022 21:49

fixup! feat(site): add UserCell component

4fe1431

document code

f006d0b

greyscaled mentioned this pull request Mar 19, 2022

feat(site): add ActionCell component #500

Closed

greyscaled mentioned this pull request Mar 19, 2022

feat(site): add TargetCell component #501

Closed

greyscaled mentioned this pull request Mar 20, 2022

feat(site): add TimeCell component #502

Closed

greyscaled added 2 commits March 22, 2022 23:52

fixup! document code

c0a7360

Merge origin/main

e71346c

greyscaled changed the title ~~feat(site): add UserCell component~~ refactor(site): generalize UserCell component Mar 22, 2022

reorder type

d05c7e3

greyscaled commented Mar 22, 2022

View reviewed changes

fixup! reorder type

ec4ac6d

greyscaled requested a review from presleyp March 23, 2022 00:05

presleyp approved these changes Mar 23, 2022

View reviewed changes

greyscaled merged commit 6560f2e into main Mar 23, 2022

greyscaled deleted the vapurrmaid/472-init-audit-log branch March 23, 2022 14:28

misskniss added the V2 BETA label May 15, 2022

misskniss added this to the V2 Beta milestone May 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(site): generalize UserCell component #484

refactor(site): generalize UserCell component #484

greyscaled commented Mar 18, 2022 •

edited

Loading

codecov bot commented Mar 18, 2022 •

edited

Loading

presleyp commented Mar 21, 2022

greyscaled commented Mar 21, 2022

greyscaled Mar 22, 2022

presleyp Mar 23, 2022

presleyp left a comment

presleyp Mar 23, 2022

presleyp Mar 23, 2022

presleyp Mar 23, 2022

refactor(site): generalize UserCell component #484

refactor(site): generalize UserCell component #484

Conversation

greyscaled commented Mar 18, 2022 • edited Loading

codecov bot commented Mar 18, 2022 • edited Loading

Codecov Report

presleyp commented Mar 21, 2022

greyscaled commented Mar 21, 2022

greyscaled Mar 22, 2022

Choose a reason for hiding this comment

presleyp Mar 23, 2022

Choose a reason for hiding this comment

presleyp left a comment

Choose a reason for hiding this comment

presleyp Mar 23, 2022

Choose a reason for hiding this comment

presleyp Mar 23, 2022

Choose a reason for hiding this comment

presleyp Mar 23, 2022

Choose a reason for hiding this comment

greyscaled commented Mar 18, 2022 •

edited

Loading

codecov bot commented Mar 18, 2022 •

edited

Loading