@spacemade/ui 0.0.1

package/src/pages/projects/[projectId]/[name]/index.tsx

@@ -0,0 +1,305 @@
+/* eslint-disable @next/next/no-img-element */
+import { useMemo, useState } from 'react'
+import type { NextPage, GetServerSideProps } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import WithAuth from '@components/hoc/WithAuth'
+import { APIHelpers } from '@helpers/api'
+import type { PageProps } from '@helpers/types'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import Spinner from '@components/common/loading/Spinner'
+import ProjectHistory from '@components/projects/projectHistory'
+import ProjectActions from '@components/projects/actions'
+import HeaderProjectAvatar from '@components/projects/block/HeaderProjectImagePicker'
+import VectorStoreFileGrid from '@components/storage/vectorStoreFileGrid'
+import { ProjectFilesUploadModal } from '@components/projects/actions/ProjectFilesUploadModal'
+import { ProjectProvider, useProjectContext } from '@context/ProjectContext'
+import { useGetVectorStoresQuery } from '@store/slice/api/vectorStoreApiSlice'
+import { useUpdateProjectMutation } from '@store/slice/api/projectApiSlice'
+import { createProjectSlug } from '@helpers/slugUtils'
+
+const asStr = (v: string | string[] | undefined) =>
+  Array.isArray(v) ? v[0] : v
+
+const withProjectScope = (href: string, projectId?: string) => {
+  if (!projectId) return href
+  const separator = href.includes('?') ? '&' : '?'
+  return `${href}${separator}projectId=${encodeURIComponent(projectId)}`
+}
+
+const asTitle = (value: unknown, fallback: string) => {
+  const next = String(value || '').trim()
+  return next || fallback
+}
+
+const HeaderProjectTitle = () => {
+  const {
+    project,
+    isProjectLoading,
+    isProjectFetching,
+    isProjectError,
+    refetchProject,
+  } = useProjectContext()
+
+  const [updateProject] = useUpdateProjectMutation()
+
+  if (isProjectLoading || isProjectFetching) return null
+  if (isProjectError || !project) return null
+
+  return (
+    <div className="d-flex align-items-center gap-2">
+      <HeaderProjectAvatar
+        media={project.featuredMedia?.media}
+        onSelectMedia={async (mediaId) => {
+          await updateProject({
+            id: project.id,
+            featuredMediaId: mediaId,
+          })
+          await refetchProject()
+        }}
+      />
+
+      <h2 className="mb-0 fw-normal text-truncate">{project.name}</h2>
+    </div>
+  )
+}
+
+const ProjectDetailInner: NextPage<PageProps> = () => {
+  const router = useRouter()
+  const projectId = asStr(router.query.projectId)
+  const slugUrl = asStr(router.query.name) || ''
+
+  const { project } = useProjectContext()
+  const [isFilesModalOpen, setIsFilesModalOpen] = useState(false)
+  const [activeUploadVectorStoreId, setActiveUploadVectorStoreId] = useState<string | null>(null)
+
+  const projectSlug = useMemo(
+    () =>
+      project?.name
+        ? createProjectSlug(project.name)
+        : slugUrl || 'project',
+    [project?.name, slugUrl]
+  )
+
+  const {
+    data: storageListData,
+    isLoading: isStorageLoading,
+    isFetching: isStorageFetching,
+  } = useGetVectorStoresQuery(
+    {
+      projectId,
+      limit: 50,
+      page: 1,
+    },
+    { skip: !projectId }
+  )
+
+  const storages = storageListData?.results || []
+
+  if (!projectId) return null
+
+  return (
+    <>
+      <SideNavLayout
+        renderMainNav={() => null}
+        sidebarTopContent={() => (
+          <>
+            <h2 className="sidebar-heading">Projects</h2>
+            <ul className="sidebar-list mb-5">
+              <li className="sidebar-item">
+                <Link href="/projects" className="sidebar-link">
+                  <i className="bi bi-arrow-left" /> <span>Back</span>
+                </Link>
+              </li>
+            </ul>
+          </>
+        )}
+        mainNavTitle="Projects"
+        sidebarContent={(isCollapsed) =>
+          !isCollapsed ? (
+            <>
+              <nav className="sidebar-section mt-4">
+                <ul className="sidebar-list">
+                  <li className="sidebar-item" title="Users">
+                    <Link
+                      href={`/projects/${projectId}/${projectSlug}/permission`}
+                      className="sidebar-link"
+                    >
+                      <i className="bi bi-people" /> <span>Users</span>
+                    </Link>
+                  </li>
+                </ul>
+              </nav>
+              <ProjectHistory projectId={projectId} />
+            </>
+          ) : null
+        }
+      >
+        <div className="w-100 mx-auto" style={{ maxWidth: 980 }}>
+          <div className="d-flex justify-content-between align-items-center mt-10 mb-4 gap-2">
+            <HeaderProjectTitle />
+            <ProjectActions />
+          </div>
+
+          <div className="d-flex justify-content-between align-items-center mb-3 mt-5">
+            <h5 className="mb-0">STORAGE</h5>
+          </div>
+
+          {isStorageLoading || isStorageFetching ? (
+            <div className="d-flex justify-content-center py-3">
+              <Spinner />
+            </div>
+          ) : storages.length === 0 ? (
+            <div className="border rounded-3 p-3 text-muted small">
+              No storage connected to this project yet.
+            </div>
+          ) : (
+            <div className="row g-3">
+              {storages.map((store) => {
+                const storeLabel = asTitle(store.name, 'Untitled storage')
+                const storeSlug = createProjectSlug(storeLabel)
+                const storeHref = withProjectScope(
+                  `/storage/${store.id}/${storeSlug}`,
+                  projectId
+                )
+                const storeDate = store.updatedAt || store.createdAt
+                return (
+                  <div key={store.id} className="col-12 col-md-6 col-xl-4">
+                    <Link href={storeHref} className="text-decoration-none text-reset">
+                      <div className="border rounded-3 p-3 h-100 bg-white">
+                        <div className="small text-muted mb-1">Storage</div>
+                        <div className="fw-semibold text-truncate">{storeLabel}</div>
+                        {store.providerStatus && (
+                          <div className="small text-muted mt-1 text-uppercase">
+                            {store.providerStatus}
+                          </div>
+                        )}
+                        {storeDate && (
+                          <div className="small text-muted mt-2">
+                            {new Date(storeDate).toLocaleDateString()}
+                          </div>
+                        )}
+                      </div>
+                    </Link>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {storages.length > 0 && (
+            <>
+              <div className="d-flex justify-content-between align-items-center mb-3 mt-5">
+                <h5 className="mb-0">FILES</h5>
+              </div>
+
+              {storages.map((store) => {
+                const storeLabel = asTitle(store.name, 'Untitled storage')
+                const storeSlug = createProjectSlug(storeLabel)
+
+                return (
+                  <div key={store.id} className="mb-4">
+                    <div className="d-flex justify-content-between align-items-center mb-2">
+                      <h6
+                        className="mb-0 cursor-pointer"
+                        role="button"
+                        onClick={() =>
+                          router.push(
+                            withProjectScope(`/storage/${store.id}/${storeSlug}`, projectId)
+                          )
+                        }
+                      >
+                        {storeLabel}
+                      </h6>
+                      <i
+                        className="bi bi-plus fs-4 cursor-pointer"
+                        role="button"
+                        aria-label={`Add new file to ${storeLabel}`}
+                        onClick={() => {
+                          setActiveUploadVectorStoreId(store.id)
+                          setIsFilesModalOpen(true)
+                        }}
+                      />
+                    </div>
+
+                    <VectorStoreFileGrid vectorStoreId={store.id} />
+                  </div>
+                )
+              })}
+            </>
+          )}
+        </div>
+      </SideNavLayout>
+
+      {activeUploadVectorStoreId && (
+        <ProjectFilesUploadModal
+          isOpen={isFilesModalOpen}
+          onClose={() => {
+            setIsFilesModalOpen(false)
+            setActiveUploadVectorStoreId(null)
+          }}
+          vectorStoreId={activeUploadVectorStoreId}
+        />
+      )}
+    </>
+  )
+}
+
+const ProjectDetailPage = ({ initialEntity }: PageProps) => {
+  const router = useRouter()
+  const projectId = asStr(router.query.projectId)
+  if (!projectId) return null
+
+  return (
+    <ProjectProvider projectId={projectId}>
+      <ProjectDetailInner initialEntity={initialEntity} />
+    </ProjectProvider>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<PageProps> = async (
+  ctx
+) => {
+  const cookie = ctx.req.headers.cookie || ''
+  const { projectId, name } = ctx.query
+
+  const auth = await APIHelpers.get('/auth/user', { Cookie: cookie })
+  if (!auth?.user) {
+    return { redirect: { destination: '/login', permanent: false } }
+  }
+
+  const data = await APIHelpers.get(`/projects/${projectId}`, {
+    Cookie: cookie,
+  })
+
+  const project = (data as any)?.project || (data as any)?.data
+
+  if (!project) {
+    return { redirect: { destination: '/projects', permanent: false } }
+  }
+
+  const canonicalSlug = createProjectSlug(project.name || '')
+  const requestedSlug =
+    typeof name === 'string'
+      ? name
+      : Array.isArray(name)
+        ? name[0]
+        : undefined
+
+  if (requestedSlug !== canonicalSlug) {
+    return {
+      redirect: {
+        destination: `/projects/${projectId}/${canonicalSlug}`,
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: {
+      initialEntity: project,
+    },
+  }
+}
+
+export default WithAuth(ProjectDetailPage)

package/src/pages/projects/[projectId]/[name]/permission/index.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { useCallback, useMemo } from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { useDisclosure } from '@chakra-ui/react'
+
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { useUserAuthContext } from '@context/UserAuthContext'
+
+import ProjectPermissionGrid from
+  '@components/projects/permission/ProjectUserPermission'
+import ProjectPermissionInviteModal from
+  '@components/projects/permission/ProjectPermissionInviteModal'
+
+import {
+  useGetPermissionsQuery,
+  useInviteUserMutation,
+  useUpdatePermissionMutation,
+  useRemovePermissionMutation,
+  type ProjectUserRole,
+} from '@store/slice/api/projectUserPermissionApiSlice'
+
+const ProjectPermissionsPage = () => {
+  const router = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { activeOrgId } = useUserAuthContext()
+
+  const projectId = router.query.projectId as string | undefined
+  const nameFromUrl = router.query.name as string | undefined
+
+  const projectSlug = useMemo(
+    () => nameFromUrl || 'project',
+    [nameFromUrl]
+  )
+
+  const { data, isLoading } = useGetPermissionsQuery(
+    { projectId: projectId! },
+    { skip: !projectId }
+  )
+
+  const [inviteUser] = useInviteUserMutation()
+  const [updatePermission] = useUpdatePermissionMutation()
+  const [removePermission] = useRemovePermissionMutation()
+
+  const handleRoleChange = useCallback(
+    async (permissionId: string, role: ProjectUserRole) => {
+      if (!projectId) return
+      await updatePermission({
+        projectId,
+        id: permissionId,
+        role,
+      }).unwrap()
+    },
+    [projectId, updatePermission]
+  )
+
+  const handleRemove = useCallback(
+    async (permissionId: string) => {
+      if (!projectId) return
+      await removePermission({
+        projectId,
+        id: permissionId,
+      }).unwrap()
+    },
+    [projectId, removePermission]
+  )
+
+  const handleInviteSave = useCallback(
+    async ({
+      email,
+      userId,
+      orgGroupId,
+      role,
+      captcha,
+    }: {
+      email?: string
+      userId?: string
+      orgGroupId?: string
+      role: ProjectUserRole
+      captcha: string | null
+    }) => {
+      if (!projectId) return
+      await inviteUser({
+        projectId,
+        email,
+        userId,
+        orgGroupId,
+        role,
+        captcha,
+      }).unwrap()
+    },
+    [projectId, inviteUser]
+  )
+
+  if (!projectId) return null
+
+  return (
+    <SideNavLayout
+      renderMainNav={() => null}
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">Project</h2>
+          <Link
+            href={`/projects/${projectId}/${projectSlug}`}
+            className="sidebar-link"
+          >
+            ← Back
+          </Link>
+        </>
+      )}
+    >
+      <div className="mt-5 w-100">
+        <div className="d-flex justify-content-between align-items-center mb-4">
+          <h2 className="mb-0">Access</h2>
+          <button
+            onClick={onOpen}
+            className="btn btn-primary rounded-pill fw-bold px-4"
+          >
+            +
+          </button>
+        </div>
+
+        <ProjectPermissionGrid
+          permissions={data?.results ?? []}
+          isLoading={isLoading}
+          onRoleChange={handleRoleChange}
+          onRemove={handleRemove}
+        />
+
+        <ProjectPermissionInviteModal
+          isOpen={isOpen}
+          onClose={onClose}
+          onSave={handleInviteSave}
+          orgId={activeOrgId}
+        />
+      </div>
+    </SideNavLayout>
+  )
+}
+
+export default WithAuth(ProjectPermissionsPage)

package/src/pages/projects/[projectId]/token/index.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+
+import { WithReCaptcha } from '@components/hoc/WithReCaptcha'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import InvalidInviteCard from '@components/common/state/InvalidInviteCard'
+import { PageProps } from '@helpers/types/page-props'
+import { useAcceptInviteMutation } from '@store/slice/api/projectUserPermissionApiSlice'
+import { UserTokenAction } from '@store/slice/api/authApiSlice'
+
+type ProjectInviteProps = PageProps & {
+  isValid: boolean
+  token?: string
+  projectId?: string
+}
+
+const ProjectInvite: NextPage<ProjectInviteProps> = WithReCaptcha(
+  ({ isValid, token, projectId }) => {
+    const router = useRouter()
+    const [hasError, setHasError] = useState(false)
+
+    const [acceptInvite, { isLoading }] = useAcceptInviteMutation()
+    const hasRunRef = useRef(false)
+
+    useEffect(() => {
+      if (!isValid || !token || !projectId) {
+        setHasError(true)
+        return
+      }
+
+      if (hasRunRef.current) return
+      hasRunRef.current = true
+
+      const consumeInvite = async () => {
+        try {
+          const response = await acceptInvite({
+            token,
+            projectId,
+          }).unwrap()
+
+          if (!response?.inviteAccepted) {
+            setHasError(true)
+            return
+          }
+
+          if (response?.needsProfileUpdate) {
+            const query = new URLSearchParams({
+              token,
+              action: UserTokenAction.project_invite,
+            })
+            router.replace(`/update?${query.toString()}`)
+            return
+          }
+
+          router.replace(
+            `/projects/${projectId}/${encodeURIComponent(
+              response.entityName ?? 'project'
+            )}`
+          )
+        } catch (err: any) {
+          setHasError(true)
+          toast.error(err?.data?.message ?? 'Unable to accept invite')
+        }
+      }
+
+      consumeInvite()
+    }, [isValid, token, projectId, acceptInvite, router])
+
+    if (isLoading) return <LoadingScreen />
+
+    if (hasError) return <InvalidInviteCard />
+
+    return <LoadingScreen />
+  }
+)
+
+export default ProjectInvite
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { projectId } = context.query
+  const tokenParam = context.query.token
+
+  const token =
+    typeof tokenParam === 'string'
+      ? tokenParam
+      : Array.isArray(tokenParam)
+        ? tokenParam[0]
+        : undefined
+
+  const projectIdStr =
+    typeof projectId === 'string'
+      ? projectId
+      : Array.isArray(projectId)
+        ? projectId[0]
+        : undefined
+
+  if (!token || !projectIdStr) {
+    return {
+      props: {
+        pageTitle: 'Project Invite',
+        isValid: false,
+        excludeTopNav: true,
+      },
+    }
+  }
+
+  return {
+    props: {
+      pageTitle: 'Project Invite',
+      isValid: true,
+      token,
+      projectId: projectIdStr,
+      projectName: null,
+      inviterName: null,
+      excludeTopNav: true,
+    },
+  }
+}

package/src/pages/projects/index.tsx

@@ -0,0 +1,129 @@
+import type { GetServerSideProps, NextPage } from 'next'
+import { useDisclosure } from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import ProjectCreateModal from '@components/projects/actions/ProjectCreateModal'
+import { ProjectsTable } from '@components/projects/table/ProjectTable'
+import { canAccessAppWithOrgContext, isSurfaceAdmin } from '@helpers/permissions'
+
+import { useAppSelector } from '@store/hooks'
+import { selectAccountState } from '@store/slice/api/accountSlice'
+import { useCreateProjectMutation } from '@store/slice/api/projectApiSlice'
+import { transformToURLFormat } from '@helpers/string'
+
+const Projects: NextPage = () => {
+  const router = useRouter()
+  const { user, isConnected, activeOrgId } = useAppSelector(selectAccountState)
+  const permissionRows = Array.isArray(user?.permissions) ? user.permissions : []
+  const orgPermissionRows = activeOrgId
+    ? permissionRows.filter((row) => row.orgId === activeOrgId)
+    : permissionRows
+  const orgMemberships = Array.isArray(user?.orgMemberships) ? user.orgMemberships : []
+  const activeMembership =
+    orgMemberships.find((m) => m.orgId === activeOrgId) ||
+    orgMemberships.find((m) => m.org?.orgType === 'personal') ||
+    orgMemberships[0]
+  const activeOrg = activeMembership?.org
+  const canReadProjects = canAccessAppWithOrgContext({
+    rows: orgPermissionRows,
+    appKey: 'projects',
+    action: 'read',
+    org: activeOrg,
+    membership: activeMembership,
+    userId: user?.id,
+    username: user?.name,
+  })
+  const canCreateProjects =
+    !!user?.id &&
+    !!isConnected &&
+    (isSurfaceAdmin(orgPermissionRows, 'projects') ||
+      canAccessAppWithOrgContext({
+        rows: orgPermissionRows,
+        appKey: 'projects',
+        action: 'create',
+        org: activeOrg,
+        membership: activeMembership,
+        userId: user?.id,
+        username: user?.name,
+      }))
+
+  const {
+    isOpen: isOpenCreateProjectModal,
+    onOpen: onOpenCreateProjectModal,
+    onClose: onCloseCreateProjectModal,
+  } = useDisclosure()
+
+  const [createProject] = useCreateProjectMutation()
+
+  const handleCreateProject = async ({
+    name,
+    providerSettingId,
+    vectorStoreId,
+    addProjectStorage,
+  }: {
+    name: string
+    providerSettingId?: string
+    vectorStoreId?: string
+    addProjectStorage?: boolean
+  }) => {
+    if (!canCreateProjects) return
+    try {
+      const response = await createProject({
+        payload: {
+          name,
+          providerSettingId,
+          vectorStoreId,
+          addProjectStorage,
+        },
+      }).unwrap()
+
+      const projectId = response.id
+      const slug = transformToURLFormat(name)
+      router.push(`/projects/${projectId}/${slug}`)
+    } catch (err: any) {
+      toast.error('Failed to create project')
+      throw err
+    }
+  }
+
+  if (!canReadProjects) {
+    return (
+      <SideNavLayout useMainContentAreaId={false}>
+        <div className="mt-3 w-100">
+          <h1 className="mb-3">Projects</h1>
+          <div className="alert alert-light border">
+            You do not currently have access to the Projects app in this organization.
+          </div>
+        </div>
+      </SideNavLayout>
+    )
+  }
+
+  return (
+    <SideNavLayout useMainContentAreaId={false}>
+      <div className="mt-3 w-100">
+        <h1 className="mb-4">Projects</h1>
+        <ProjectsTable onCreate={canCreateProjects ? onOpenCreateProjectModal : undefined} />
+      </div>
+
+      {canCreateProjects ? (
+        <ProjectCreateModal
+          isOpen={isOpenCreateProjectModal}
+          onClose={onCloseCreateProjectModal}
+          onCreate={handleCreateProject}
+        />
+      ) : null}
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+    pageTitle: 'Projects',
+  },
+})
+
+export default WithAuth(Projects)