enso-org · PabloBuchu · Apr 26, 2023 · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023
@@ -269,6 +269,7 @@ export default [
                 },
             ],
             '@typescript-eslint/no-confusing-void-expression': 'error',
+            '@typescript-eslint/no-empty-interface': 'off',
             '@typescript-eslint/no-extraneous-class': 'error',
             '@typescript-eslint/no-invalid-void-type': ['error', { allowAsThisParameter: true }],
             // React 17 and later supports async functions as event handlers, so we need to disable this

@@ -6,6 +6,7 @@ import * as router from 'react-router-dom'
 import * as app from '../../components/app'
 import * as auth from '../providers/auth'
 import * as svg from '../../components/svg'
+
 import Input from './input'
 import SvgIcon from './svgIcon'
 

@@ -7,6 +7,7 @@ import * as fontawesomeIcons from '@fortawesome/free-brands-svg-icons'
 import * as app from '../../components/app'
 import * as auth from '../providers/auth'
 import * as svg from '../../components/svg'
+
 import FontAwesomeIcon from './fontAwesomeIcon'
 import Input from './input'
 import SvgIcon from './svgIcon'
@@ -15,9 +16,6 @@ import SvgIcon from './svgIcon'
 // === Constants ===
 // =================
 
-const BUTTON_CLASS_NAME =
-    'relative mt-6 border rounded-md py-2 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200'
-
 const LOGIN_QUERY_PARAMS = {
     email: 'email',
 } as const
@@ -51,7 +49,7 @@ function Login() {
                         event.preventDefault()
                         await signInWithGoogle()
                     }}
-                    className={BUTTON_CLASS_NAME}
+                    className="relative mt-6 border rounded-md py-2 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200"
                 >
                     <FontAwesomeIcon icon={fontawesomeIcons.faGithub} />
                     <span>Login with Google</span>
@@ -61,7 +59,7 @@ function Login() {
                         event.preventDefault()
                         await signInWithGitHub()
                     }}
-                    className={BUTTON_CLASS_NAME}
+                    className="relative mt-6 border rounded-md py-2 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200"
                 >
                     <FontAwesomeIcon icon={fontawesomeIcons.faGithub} />
                     <span>Login with Github</span>

@@ -48,31 +48,12 @@ interface SessionProviderProps {
 export function SessionProvider(props: SessionProviderProps) {
     const { mainPageUrl, children, userSession, registerAuthEventListener } = props
 
+    const [refresh, doRefresh] = hooks.useRefresh()
+
     /** Flag used to avoid rendering child components until we've fetched the user's session at least
      * once. Avoids flash of the login screen when the user is already logged in. */
     const [initialized, setInitialized] = react.useState(false)
 
-    /** Produces a new object every time.
-     * This is not equal to any other empty object because objects are compared by reference.
-     * Because it is not equal to the old value, React re-renders the component. */
-    function newRefresh() {
-        return {}
-    }
-
-    /** State that, when set, forces a refresh of the user session. This is useful when a
-     * user has just logged in (so their cached credentials are out of date). Should be used via the
-     * `refreshSession` function. */
-    const [refresh, setRefresh] = react.useState(newRefresh())
-
-    /** Forces a refresh of the user session.
-     *
-     * Should be called after any operation that **will** (not **might**) change the user's session.
-     * For example, this should be called after signing out. Calling this will result in a re-render
-     * of the whole page, which is why it should only be done when necessary. */
-    const refreshSession = () => {
-        setRefresh(newRefresh())
-    }
-
     /** Register an async effect that will fetch the user's session whenever the `refresh` state is
      * incremented. This is useful when a user has just logged in (as their cached credentials are
      * out of date, so this will update them). */
@@ -83,7 +64,7 @@ export function SessionProvider(props: SessionProviderProps) {
             setInitialized(true)
             return innerSession
         },
-        [refresh, userSession]
+        [userSession, refresh]
     )
 
     /** Register an effect that will listen for authentication events. When the event occurs, we
@@ -97,7 +78,7 @@ export function SessionProvider(props: SessionProviderProps) {
             switch (event) {
                 case listen.AuthEvent.signIn:
                 case listen.AuthEvent.signOut: {
-                    refreshSession()
+                    doRefresh()
                     break
                 }
                 case listen.AuthEvent.customOAuthState:
@@ -110,7 +91,7 @@ export function SessionProvider(props: SessionProviderProps) {
                      * See:
                      * https://github.com/aws-amplify/amplify-js/issues/3391#issuecomment-756473970 */
                     window.history.replaceState({}, '', mainPageUrl)
-                    refreshSession()
+                    doRefresh()
                     break
                 }
                 default: {

@@ -101,7 +101,7 @@ export const SECRET_ICON = (
         <path
             d="M10.3 13a4 4 0 1 1 0-2h10a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-2h-2v2a1 1 0 0 1-2 0v-2ZM3.5 12a1 1 0 1 1 2 0a1 1 0 1 1-2 0"
             fill="currentColor"
-            fill-rule="evenodd"
+            fillRule="evenodd"
         />
     </svg>
 )
@@ -164,6 +164,16 @@ export const ARROW_UP_ICON = (
     </svg>
 )
 
+export const ADD_ICON = (
+    <svg width={18} height={18} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx={12} cy={12} r={12} fill="currentColor" fillOpacity={0.1} />
+        <g opacity={0.66}>
+            <rect x={11} y={6} width={2} height={12} fill="currentColor" />
+            <rect x={6} y={11} width={12} height={2} fill="currentColor" />
+        </g>
+    </svg>
+)
+
 /** Icon with three bars. */
 export const BARS_ICON = (
     <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -181,7 +191,7 @@ export const MAGNIFYING_GLASS_ICON = (
                 d="M11.4142 10L15.6569 14.2426L14.2426 15.6569L10 11.4142L11.4142 10Z"
                 fill="currentColor"
             />
-            <circle cx={7} cy={7} r={5} stroke="currentColor" stroke-width={2} />
+            <circle cx={7} cy={7} r={5} stroke="currentColor" strokeWidth={2} />
         </g>
     </svg>
 )
@@ -194,6 +204,16 @@ export const SPEECH_BUBBLE_ICON = (
     </svg>
 )
 
+export const CLOSE_ICON = (
+    <svg width={18} height={18} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx={12} cy={12} r={12} fill="currentColor" fillOpacity={0.1} />
+        <g opacity={0.66} transform="rotate(45 12 12)">
+            <rect x={11} y={6} width={2} height={12} fill="currentColor" />
+            <rect x={6} y={11} width={12} height={2} fill="currentColor" />
+        </g>
+    </svg>
+)
+
 // ===========
 // === Svg ===
 // ===========

@@ -0,0 +1,62 @@
+/** @file Modal for confirming delete of any type of asset. */
+import toast from 'react-hot-toast'
+
+import * as modalProvider from '../../providers/modal'
+import * as svg from '../../components/svg'
+
+import Modal from './modal'
+
+// =================
+// === Component ===
+// =================
+
+export interface ConfirmDeleteModalProps {
+    assetType: string
+    name: string
+    doDelete: () => Promise<void>
+    onSuccess: () => void
+}
+
+function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
+    const { assetType, name, doDelete, onSuccess } = props
+    const { unsetModal } = modalProvider.useSetModal()
+    return (
+        <Modal className="bg-opacity-90">
+            <form
+                className="relative bg-white shadow-soft rounded-lg w-96 p-2"
+                onClick={event => {
+                    event.stopPropagation()
+                }}
+            >
+                <button type="button" className="absolute right-0 top-0 m-2" onClick={unsetModal}>
+                    {svg.CLOSE_ICON}
+                </button>
+                Are you sure you want to delete the {assetType} '{name}'?
+                <div className="m-1">
+                    <div
+                        className="hover:cursor-pointer inline-block text-white bg-red-500 rounded-full px-4 py-1 m-1"
+                        onClick={async () => {
+                            unsetModal()
+                            await toast.promise(doDelete(), {
+                                loading: `Deleting ${assetType}...`,
+                                success: `Deleted ${assetType}.`,
+                                error: `Could not delete ${assetType}.`,
+                            })
+                            onSuccess()
+                        }}
+                    >
+                        Delete
+                    </div>
+                    <div
+                        className="hover:cursor-pointer inline-block bg-gray-200 rounded-full px-4 py-1 m-1"
+                        onClick={unsetModal}
+                    >
+                        Cancel
+                    </div>
+                </div>
+            </form>
+        </Modal>
+    )
+}
+
+export default ConfirmDeleteModal
@@ -0,0 +1,28 @@
+/** @file A context menu. */
+
+import * as react from 'react'
+
+// =================
+// === Component ===
+// =================
+
+export interface ContextMenuProps {
+    // `left: number` and `top: number` may be more correct,
+    // however passing an event eliminates the chance
+    // of passing the wrong coordinates from the event.
+    event: react.MouseEvent
+}
+
+function ContextMenu(props: react.PropsWithChildren<ContextMenuProps>) {
+    const { children, event } = props
+    return (
+        <div
+            style={{ left: event.pageX, top: event.pageY }}
+            className="absolute bg-white rounded-lg shadow-soft flex flex-col flex-nowrap"
+        >
+            {children}
+        </div>
+    )
+}
+
+export default ContextMenu
@@ -0,0 +1,29 @@
+/** @file An entry in a context menu. */
+
+import * as react from 'react'
+
+export interface ContextMenuEntryProps {
+    disabled?: boolean
+    onClick: (event: react.MouseEvent<HTMLButtonElement>) => void
+}
+
+// This component MUST NOT use `useState` because it is not rendered directly.
+function ContextMenuEntry(props: react.PropsWithChildren<ContextMenuEntryProps>) {
+    const { children, disabled, onClick } = props
+    return (
+        <button
+            disabled={disabled}
+            className={`${
+                disabled ? 'opacity-50' : ''
+            } p-1 hover:bg-gray-200 first:rounded-t-lg last:rounded-b-lg text-left`}
+            onClick={event => {
+                event.stopPropagation()
+                onClick(event)
+            }}
+        >
+            {children}
+        </button>
+    )
+}
+
+export default ContextMenuEntry
@@ -0,0 +1,58 @@
+/** @file Base form to create an asset.
+ * This should never be used directly, but instead should be wrapped in a component
+ * that creates a specific asset type. */
+
+import * as react from 'react'
+
+import * as modalProvider from '../../providers/modal'
+import * as svg from '../../components/svg'
+
+import Modal from './modal'
+
+/** The props that should also be in the wrapper component. */
+export interface CreateFormPassthroughProps {
+    left: number
+    top: number
+}
+
+/** `CreateFormPassthroughProps`, plus props that should be defined in the wrapper component. */
+export interface CreateFormProps extends CreateFormPassthroughProps, react.PropsWithChildren {
+    title: string
+    onSubmit: (event: react.FormEvent) => Promise<void>
+}
+
+function CreateForm(props: CreateFormProps) {
+    const { title, left, top, children, onSubmit: wrapperOnSubmit } = props
+    const { unsetModal } = modalProvider.useSetModal()
+
+    async function onSubmit(event: react.FormEvent) {
+        event.preventDefault()
+        await wrapperOnSubmit(event)
+    }
+
+    return (
+        <Modal className="bg-opacity-25">
+            <form
+                style={{ left, top }}
+                className="absolute bg-white shadow-soft rounded-lg w-60"
+                onSubmit={onSubmit}
+                onClick={event => {
+                    event.stopPropagation()
+                }}
+            >
+                <button type="button" className="absolute right-0 m-2" onClick={unsetModal}>
+                    {svg.CLOSE_ICON}
+                </button>
+                <h2 className="inline-block font-semibold m-2">{title}</h2>
+                {children}
+                <input
+                    type="submit"
+                    className="hover:cursor-pointer inline-block text-white bg-blue-600 rounded-full px-4 py-1 m-2"
+                    value="Create"
+                />
+            </form>
+        </Modal>
+    )
+}
+
+export default CreateForm