feat: Add emoji picker to group settings (#4685)

Fixes #4413.

site/src/i18n/en/common.json

@@ -31,5 +31,8 @@
   },
   "warningsAndErrors": {
     "somethingWentWrong": "Something went wrong."
+  },
+  "emojiPicker": {
+    "select": "Select emoji"
   }
 }

site/src/pages/GroupsPage/SettingsGroupPageView.tsx

@@ -1,12 +1,20 @@
+import data from "@emoji-mart/data/sets/14/twitter.json"
+import Picker from "@emoji-mart/react"
+import Button from "@material-ui/core/Button"
+import InputAdornment from "@material-ui/core/InputAdornment"
+import Popover from "@material-ui/core/Popover"
+import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { Group } from "api/typesGenerated"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
+import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 import { FormFooter } from "components/FormFooter/FormFooter"
 import { FullPageForm } from "components/FullPageForm/FullPageForm"
 import { FullScreenLoader } from "components/Loader/FullScreenLoader"
 import { Margins } from "components/Margins/Margins"
 import { useFormik } from "formik"
-import React from "react"
+import React, { useRef, useState } from "react"
+import { colors } from "theme/colors"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
 import * as Yup from "yup"
 
@@ -26,6 +34,7 @@ const UpdateGroupForm: React.FC<{
   onCancel: () => void
   isLoading: boolean
 }> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
   const form = useFormik<FormData>({
     initialValues: {
       name: group.name,
@@ -35,6 +44,10 @@ const UpdateGroupForm: React.FC<{
     onSubmit,
   })
   const getFieldHelpers = getFormHelpers<FormData>(form, errors)
+  const hasIcon = form.values.avatar_url && form.values.avatar_url !== ""
+  const emojiButtonRef = useRef<HTMLButtonElement>(null)
+  const styles = useStyles()
+  const { t } = useTranslation("common")
 
   return (
     <FullPageForm title="Group settings" onCancel={onCancel}>
@@ -53,9 +66,60 @@ const UpdateGroupForm: React.FC<{
           onChange={onChangeTrimmed(form)}
           autoFocus
           fullWidth
-          label="Avatar URL"
+          label="Icon"
           variant="outlined"
+          InputProps={{
+            endAdornment: hasIcon ? (
+              <InputAdornment position="end">
+                <img
+                  alt=""
+                  src={form.values.avatar_url}
+                  className={styles.adornment}
+                  // This prevent browser to display the ugly error icon if the
+                  // image path is wrong or user didn't finish typing the url
+                  onError={(e) => (e.currentTarget.style.display = "none")}
+                  onLoad={(e) => (e.currentTarget.style.display = "inline")}
+                />
+              </InputAdornment>
+            ) : undefined,
+          }}
         />
+
+        <Button
+          fullWidth
+          ref={emojiButtonRef}
+          variant="outlined"
+          size="small"
+          endIcon={<OpenDropdown />}
+          onClick={() => {
+            setIsEmojiPickerOpen((v) => !v)
+          }}
+        >
+          {t("emojiPicker.select")}
+        </Button>
+
+        <Popover
+          id="emoji"
+          open={isEmojiPickerOpen}
+          anchorEl={emojiButtonRef.current}
+          onClose={() => {
+            setIsEmojiPickerOpen(false)
+          }}
+        >
+          <Picker
+            theme="dark"
+            data={data}
+            onEmojiSelect={(emojiData) => {
+              form
+                .setFieldValue("avatar_url", `/emojis/${emojiData.unified}.png`)
+                .catch((ex) => {
+                  console.error(ex)
+                })
+              setIsEmojiPickerOpen(false)
+            }}
+          />
+        </Popover>
+
         <FormFooter onCancel={onCancel} isLoading={isLoading} />
       </form>
     </FullPageForm>
@@ -100,4 +164,21 @@ export const SettingsGroupPageView: React.FC<SettingsGroupPageViewProps> = ({
   )
 }
 
+const useStyles = makeStyles((theme) => ({
+  "@global": {
+    "em-emoji-picker": {
+      "--rgb-background": theme.palette.background.paper,
+      "--rgb-input": colors.gray[17],
+      "--rgb-color": colors.gray[4],
+    },
+  },
+  adornment: {
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  },
+  iconField: {
+    paddingBottom: theme.spacing(0.5),
+  },
+}))
+
 export default SettingsGroupPageView