Copy link in share dialog (#5069)

* fix server hot reload

* zustand for env

* link when collaborative share

* revert line change

* link component

Author: ruggi

utopia-remix/app/components/projectActionContextMenu.tsx

@@ -18,6 +18,7 @@ import { ContextMenu, Separator, Dialog, Flex, Text } from '@radix-ui/themes'
 import { DotFilledIcon } from '@radix-ui/react-icons'
 import { SharingDialog } from './sharingDialog'
 import { when } from '~/util/react-conditionals'
+import { useCopyProjectLinkToClipboard } from '../util/copyProjectLink'
 
 type ContextMenuEntry =
   | {
@@ -88,6 +89,7 @@ export const ProjectActionsMenu = React.memo(
     )
 
     const projectEditorLink = useProjectEditorLink()
+    const copyProjectLink = useCopyProjectLinkToClipboard()
 
     const menuEntries = React.useMemo((): ContextMenuEntry[] => {
       switch (selectedCategory) {
@@ -102,10 +104,7 @@ export const ProjectActionsMenu = React.memo(
             'separator',
             {
               text: 'Copy Link',
-              onClick: (selectedProject) => {
-                window.navigator.clipboard.writeText(projectEditorLink(selectedProject.proj_id))
-                // TODO notification toast
-              },
+              onClick: (selectedProject) => copyProjectLink(selectedProject.proj_id),
             },
             {
               text: 'Fork',
@@ -157,6 +156,7 @@ export const ProjectActionsMenu = React.memo(
       destroyProject,
       renameProject,
       restoreProject,
+      copyProjectLink,
     ])
 
     const preventDefault = React.useCallback((event: Event) => {

utopia-remix/app/components/sharingDialog.tsx

@@ -20,6 +20,9 @@ import { useFetcherWithOperation } from '../hooks/useFetcherWithOperation'
 import React from 'react'
 import { when } from '../util/react-conditionals'
 import moment from 'moment'
+import { useProjectEditorLink } from '../util/links'
+import { button } from '../styles/button.css'
+import { useCopyProjectLinkToClipboard } from '../util/copyProjectLink'
 
 export function SharingDialog({
   project,
@@ -86,6 +89,10 @@ export function SharingDialog({
             changeProjectAccessLevel={changeProjectAccessLevel}
           />
         </Flex>
+        {when(
+          accessLevel === AccessLevel.COLLABORATIVE || accessLevel === AccessLevel.PUBLIC,
+          <ProjectLink projectId={project.proj_id} />,
+        )}
         {when(
           accessRequests.length > 0,
           <>
@@ -200,3 +207,40 @@ function VisibilityDropdown({
     </DropdownMenu.Root>
   )
 }
+
+const ProjectLink = React.memo(({ projectId }: { projectId: string }) => {
+  const projectLinkRef = React.useRef<HTMLInputElement | null>(null)
+
+  const projectLink = useProjectEditorLink()
+  const copyProjectLink = useCopyProjectLinkToClipboard()
+
+  const onClickCopyProjectLink = React.useCallback(() => {
+    copyProjectLink(projectId)
+    projectLinkRef.current?.select()
+  }, [projectId, copyProjectLink])
+
+  return (
+    <Flex style={{ gap: 10, alignItems: 'stretch' }}>
+      <input
+        ref={projectLinkRef}
+        type='text'
+        value={projectLink(projectId)}
+        readOnly={true}
+        style={{
+          flex: 1,
+          fontSize: 13,
+          padding: '0px 4px',
+          cursor: 'default',
+        }}
+      />
+      <button
+        className={button({ color: 'subtle' })}
+        style={{ fontSize: 13 }}
+        onClick={onClickCopyProjectLink}
+      >
+        Copy
+      </button>
+    </Flex>
+  )
+})
+ProjectLink.displayName = 'ProjectLink'

utopia-remix/app/util/copyProjectLink.ts

@@ -0,0 +1,13 @@
+import React from 'react'
+import { useProjectEditorLink } from './links'
+
+export function useCopyProjectLinkToClipboard() {
+  const projectEditorLink = useProjectEditorLink()
+  return React.useCallback(
+    (projectId: string) => {
+      window.navigator.clipboard.writeText(projectEditorLink(projectId))
+      // TODO notification toast
+    },
+    [projectEditorLink],
+  )
+}