From d398e18861b3237dce192a971b46886c76ab70b4 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 13 Dec 2023 16:13:21 -0800 Subject: [PATCH 1/4] add dialogs when admins edit other users (#1530) * created a dialog on editing EditableTexts by admins in user * refresh the user page after every change * switched to standard system of getting DB info for users * Revert "switched to standard system of getting DB info for users" This reverts commit 1c5a09e6992a03d6b5ee4912a478d46940905006. * changed all self props to isCurrentUser * separated alertOnSaveAdmin function, small changes * changed selfEdit to isCurrentUser and removed all refetch changes --- src/routes/user.tsx | 41 +++++++++++++++++++++++++++++++++++------ 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/src/routes/user.tsx b/src/routes/user.tsx index 86e05bbf7..8845340f5 100644 --- a/src/routes/user.tsx +++ b/src/routes/user.tsx @@ -170,7 +170,24 @@ const DeleteUserButton = ({ user }: { user: UserInfo }) => { ) } -const SetPasswordButton = ({ user }: { user: UserInfo }) => { +const alertOnSaveAdmin = async (isCurrentUser: boolean, user: UserInfo) => { + if (isCurrentUser) return true + const confirmation = await createDialog({ + title: 'Confirm Edit', + description: `This is not your own profile. Are you sure you want to edit ${user.firstName} ${user.lastName}'s profile?`, + confirm: 'Confirm', + dismiss: 'Cancel', + }) + return confirmation +} + +const SetPasswordButton = ({ + user, + isCurrentUser, +}: { + user: UserInfo + isCurrentUser: boolean +}) => { const emitError = useErrorEmitter() return ( { minLength={minPasswordLength} maxLength={maxPasswordLength} value={''} - save={(password) => modifyUser(user.id, { password }).catch(emitError)} + save={async (password) => { + if (await alertOnSaveAdmin(isCurrentUser, user)) { + modifyUser(user.id, { password }).catch(emitError) + } + }} > {(_password, _icon, startEditing) => ( ) const button = container.firstElementChild as HTMLElement expect(clickHandler).not.toHaveBeenCalled() @@ -10,7 +10,7 @@ test('button', () => { expect(clickHandler).toHaveBeenCalledTimes(1) expect(container.firstChild).toMatchInlineSnapshot(` @@ -25,7 +25,7 @@ test('renders an `a` element for `href`', () => { ) expect(container.firstChild).toMatchInlineSnapshot(` Googlez diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx index 1dfc836d6..94691023f 100644 --- a/src/components/button/index.tsx +++ b/src/components/button/index.tsx @@ -1,6 +1,6 @@ import { VNode } from 'preact' import clsx from 'clsx' -import { css } from 'linaria' +import { css } from '@linaria/core' import { tint } from 'polished' import { pigmicePurple } from '@/colors' import { PropsOf } from '@/type-utils' diff --git a/src/components/card.tsx b/src/components/card.tsx index 94d78f871..55d9eaf6a 100644 --- a/src/components/card.tsx +++ b/src/components/card.tsx @@ -1,7 +1,7 @@ import { VNode } from 'preact' import { PropsOf, ElementName } from '@/type-utils' import clsx from 'clsx' -import { css } from 'linaria' +import { css } from '@linaria/core' import { createShadow } from '@/utils/create-shadow' import { pxToRem } from '@/utils/px-to-rem' diff --git a/src/components/chart.tsx b/src/components/chart.tsx index aec5d3311..a10bbac57 100644 --- a/src/components/chart.tsx +++ b/src/components/chart.tsx @@ -5,7 +5,7 @@ import { usePromise } from '@/utils/use-promise' import { compareMatches } from '@/utils/compare-matches' import Card from './card' import { pigmicePurple, grey } from '@/colors' -import { css } from 'linaria' +import { css } from '@linaria/core' import { lighten, darken } from 'polished' import { lerp } from '@/utils/lerp' import { getMatchTeamStats } from '@/api/stats/get-match-team-stats' @@ -313,8 +313,21 @@ const Chart: FunctionComponent = memo( height="1" > - - + {/* stop-color is defined in CSS instead of in an attribute + so that linaria can compute the lightened color at build-time + and so that polished is not included at runtime. */} + + @@ -493,7 +506,7 @@ const BooleanChart: FunctionComponent = ({ points, onPointClick, }) => { - const elementRef = useRef() + const elementRef = useRef(null) const [isOverflowingLeft, setIsOverflowingLeft] = useState(false) const [isOverflowingRight, setIsOverflowingRight] = useState(false) diff --git a/src/components/chip.tsx b/src/components/chip.tsx index 406eced61..749d86446 100644 --- a/src/components/chip.tsx +++ b/src/components/chip.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' const dateFormatter = new Intl.DateTimeFormat('en-US', { month: 'short', diff --git a/src/components/comment-card.tsx b/src/components/comment-card.tsx index 26ef25a3c..659ed9dd8 100644 --- a/src/components/comment-card.tsx +++ b/src/components/comment-card.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' import { Report } from '@/api/report' import { usePromise } from '@/utils/use-promise' import Card from './card' diff --git a/src/components/dialog.tsx b/src/components/dialog.tsx index b4497f451..49f9adb27 100644 --- a/src/components/dialog.tsx +++ b/src/components/dialog.tsx @@ -1,5 +1,5 @@ import { useState } from 'preact/hooks' -import { css } from 'linaria' +import { css } from '@linaria/core' import { createShadow } from '@/utils/create-shadow' import { TextButton } from '@/components/text-button' import { pxToRem } from '@/utils/px-to-rem' diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx index 6d841c755..9342e28c3 100644 --- a/src/components/dropdown.tsx +++ b/src/components/dropdown.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' import clsx from 'clsx' import { createShadow } from '@/utils/create-shadow' import { SetRequired } from 'type-fest' diff --git a/src/components/enum-selector.tsx b/src/components/enum-selector.tsx index dd18eddd6..0f4a42a7f 100644 --- a/src/components/enum-selector.tsx +++ b/src/components/enum-selector.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' const outer = css` border-radius: 0.3rem; diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx index f78ca6a62..e753c0c51 100644 --- a/src/components/error-boundary.tsx +++ b/src/components/error-boundary.tsx @@ -1,6 +1,6 @@ import { Component, RenderableProps, createContext } from 'preact' import Alert, { AlertType } from './alert' -import { css } from 'linaria' +import { css } from '@linaria/core' import { useContext } from 'preact/hooks' import { createAlert } from '@/router' diff --git a/src/components/event-card.tsx b/src/components/event-card.tsx index 28ce7a168..167838e10 100644 --- a/src/components/event-card.tsx +++ b/src/components/event-card.tsx @@ -1,6 +1,6 @@ import Chip, { DateChip } from '@/components/chip' import Card from '@/components/card' -import { css } from 'linaria' +import { css } from '@linaria/core' type Props = { event: { diff --git a/src/components/event-matches.tsx b/src/components/event-matches.tsx index 330e48a91..89814700d 100644 --- a/src/components/event-matches.tsx +++ b/src/components/event-matches.tsx @@ -3,7 +3,7 @@ import TextInput from './text-input' import { compareMatches as compareMatchesChronologically } from '@/utils/compare-matches' import { MatchDetailsCard } from './match-card' import { useState } from 'preact/hooks' -import { css } from 'linaria' +import { css } from '@linaria/core' import { formatMatchKey } from '@/utils/format-match-key' interface Props { diff --git a/src/components/field-card.tsx b/src/components/field-card.tsx index 06e53f10e..db98cd22e 100644 --- a/src/components/field-card.tsx +++ b/src/components/field-card.tsx @@ -1,7 +1,7 @@ import { RenderableProps } from 'preact' import Card from '@/components/card' import NumberInput from './number-input' -import { css } from 'linaria' +import { css } from '@linaria/core' import Toggle from './toggle' import { ReportStatDescription, NumberStatDescription } from '@/api/schema' import { cleanFieldName } from '@/utils/clean-field-name' diff --git a/src/components/form.tsx b/src/components/form.tsx index 418748f08..46e64f661 100644 --- a/src/components/form.tsx +++ b/src/components/form.tsx @@ -1,5 +1,5 @@ import { ComponentChildren } from 'preact' -import { css } from 'linaria' +import { css } from '@linaria/core' import { Merge } from '@/type-utils' import { useRef } from 'preact/hooks' import clsx from 'clsx' @@ -16,7 +16,7 @@ type Props = Merge< > export const Form = (props: Props) => { - const formRef = useRef() + const formRef = useRef(null) const isValid = Boolean(formRef.current?.checkValidity()) return (
diff --git a/src/components/heading.tsx b/src/components/heading.tsx index d193eb9b8..79163b840 100644 --- a/src/components/heading.tsx +++ b/src/components/heading.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' import { pigmicePurple } from '@/colors' import clsx from 'clsx' diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx index 8cf437fdc..4bf022806 100644 --- a/src/components/icon-button.tsx +++ b/src/components/icon-button.tsx @@ -1,7 +1,7 @@ import { VNode } from 'preact' import { PropsOf } from '@/type-utils' import Icon from '@/components/icon' -import { css } from 'linaria' +import { css } from '@linaria/core' import clsx from 'clsx' import { grey } from '@/colors' diff --git a/src/components/icon.tsx b/src/components/icon.tsx index 489fab957..4dc0a83bd 100644 --- a/src/components/icon.tsx +++ b/src/components/icon.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' interface Props extends JSX.HTMLAttributes { icon: string diff --git a/src/components/info-group-card.tsx b/src/components/info-group-card.tsx index 41ce6c247..06ffdc628 100644 --- a/src/components/info-group-card.tsx +++ b/src/components/info-group-card.tsx @@ -1,7 +1,7 @@ import Icon from '@/components/icon' import { Falsy, Merge, PropsOf } from '@/type-utils' import Card from '@/components/card' -import { css } from 'linaria' +import { css } from '@linaria/core' import clsx from 'clsx' const infoCardStyle = css` diff --git a/src/components/loader.tsx b/src/components/loader.tsx index f0aec69c8..8b8ffbdd6 100644 --- a/src/components/loader.tsx +++ b/src/components/loader.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' import { useEffect, useState } from 'preact/hooks' const spinnerStyle = css` diff --git a/src/components/match-card.tsx b/src/components/match-card.tsx index 59843baba..31c59eb4a 100644 --- a/src/components/match-card.tsx +++ b/src/components/match-card.tsx @@ -2,7 +2,7 @@ import { formatMatchKey } from '@/utils/format-match-key' import { formatTime } from '@/utils/format-time' import { formatTeamNumber } from '@/utils/format-team-number' import Card from '@/components/card' -import { css } from 'linaria' +import { css } from '@linaria/core' import { memo } from '@/utils/memo' import clsx from 'clsx' diff --git a/src/components/match-reports.tsx b/src/components/match-reports.tsx index 5ba8c853e..b28d27669 100644 --- a/src/components/match-reports.tsx +++ b/src/components/match-reports.tsx @@ -2,7 +2,7 @@ import { ProcessedMatchInfo } from '@/api/match-info' import { GetReport } from '@/api/report' import { formatTeamNumber } from '@/utils/format-team-number' import Card from './card' -import { css } from 'linaria' +import { css } from '@linaria/core' import clsx from 'clsx' import { mdiChevronDown, mdiClipboardText } from '@mdi/js' import IconButton from './icon-button' diff --git a/src/components/menu.tsx b/src/components/menu.tsx index 43bd963a8..6f2a0b47f 100644 --- a/src/components/menu.tsx +++ b/src/components/menu.tsx @@ -17,7 +17,7 @@ import { createShadow } from '@/utils/create-shadow' import { getScrollbarWidth } from '@/utils/get-scrollbar-width' import { resolveUrl } from '@/utils/resolve-url' import clsx from 'clsx' -import { css } from 'linaria' +import { css } from '@linaria/core' import { darken, lighten, rgba } from 'polished' import { ComponentChildren } from 'preact' import IconButton from './icon-button' diff --git a/src/components/number-input.tsx b/src/components/number-input.tsx index 4b85fcdf5..4b30a67ef 100644 --- a/src/components/number-input.tsx +++ b/src/components/number-input.tsx @@ -1,6 +1,6 @@ import { Merge } from '@/type-utils' import { InnerTextInput } from './text-input' -import { css } from 'linaria' +import { css } from '@linaria/core' type Props = Merge< JSX.HTMLAttributes, diff --git a/src/components/page.tsx b/src/components/page.tsx index 640fd7fc9..1fc774a47 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -1,6 +1,6 @@ import { RenderableProps, ComponentChildren } from 'preact' import { ErrorBoundary } from './error-boundary' -import { css } from 'linaria' +import { css } from '@linaria/core' import { createShadow } from '@/utils/create-shadow' import { pigmicePurple } from '@/colors' import IconButton, { iconButtonClass } from './icon-button' diff --git a/src/components/profile-link.tsx b/src/components/profile-link.tsx index b5648476a..32a769081 100644 --- a/src/components/profile-link.tsx +++ b/src/components/profile-link.tsx @@ -1,7 +1,7 @@ import { usePromise } from '@/utils/use-promise' import { formatUserName } from '@/utils/format-user-name' import Icon from './icon' -import { css } from 'linaria' +import { css } from '@linaria/core' import { mdiAccountCircle } from '@mdi/js' import { pigmicePurple } from '@/colors' import { getFastestUser } from '@/cache/users/get-fastest' diff --git a/src/components/report-editor.tsx b/src/components/report-editor.tsx index cd0a595eb..d4ea64484 100644 --- a/src/components/report-editor.tsx +++ b/src/components/report-editor.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' import { StatDescription, ReportStatDescription } from '@/api/schema' import { useState, useMemo, useEffect } from 'preact/hooks' import { diff --git a/src/components/report-viewer.tsx b/src/components/report-viewer.tsx index 5a8e9dcd3..cdad36250 100644 --- a/src/components/report-viewer.tsx +++ b/src/components/report-viewer.tsx @@ -9,7 +9,7 @@ import { formatMatchKeyShort } from '@/utils/format-match-key-short' import TeamPicker from './team-picker' import { useMatchInfo } from '@/cache/match-info/use' import { CommentCard } from './comment-card' -import { css } from 'linaria' +import { css } from '@linaria/core' import { cleanFieldName } from '@/utils/clean-field-name' import { ProfileLink } from './profile-link' diff --git a/src/components/scrim.tsx b/src/components/scrim.tsx index ad7f59a02..5805d6db7 100644 --- a/src/components/scrim.tsx +++ b/src/components/scrim.tsx @@ -1,4 +1,4 @@ -import { css } from 'linaria' +import { css } from '@linaria/core' import { rgba } from 'polished' import clsx from 'clsx' import { useRef, useEffect } from 'preact/hooks' diff --git a/src/components/table.tsx b/src/components/table.tsx index 401d28942..61512262f 100644 --- a/src/components/table.tsx +++ b/src/components/table.tsx @@ -1,6 +1,6 @@ import { RenderableProps } from 'preact' import { useState } from 'preact/hooks' -import { css } from 'linaria' +import { css } from '@linaria/core' import { lightGrey, faintGrey, pigmicePurple } from '@/colors' import clsx from 'clsx' import { BooleanDisplay } from './boolean-display' diff --git a/src/components/team-picker.tsx b/src/components/team-picker.tsx index 0d13c3587..44b161e13 100644 --- a/src/components/team-picker.tsx +++ b/src/components/team-picker.tsx @@ -1,5 +1,5 @@ import { formatTeamNumber } from '@/utils/format-team-number' -import { css } from 'linaria' +import { css } from '@linaria/core' import clsx from 'clsx' interface Props { diff --git a/src/components/text-button.tsx b/src/components/text-button.tsx index a53d1f8a3..ceeb4dc23 100644 --- a/src/components/text-button.tsx +++ b/src/components/text-button.tsx @@ -1,8 +1,10 @@ -import { styled } from 'linaria-styled-preact' +import { css } from '@linaria/core' +import clsx from 'clsx' +import { PropsOf } from '@/type-utils' import { pxToRem } from '@/utils/px-to-rem' import { rgba, darken } from 'polished' -export const TextButton = styled.button` +const style = css` background: transparent; border: none; text-transform: uppercase; @@ -27,3 +29,7 @@ export const TextButton = styled.button` background: ${rgba('purple', 0.18)}; } ` + +export const TextButton = (props: PropsOf<'button'>) => { + return