@ossy/workspaces 1.16.7 → 1.17.1

package/README.md

@@ -26,6 +26,7 @@ Workspaces **feature package** for the Ossy platform — provides workspace crea
 | `AuthenticationGuard` | Wraps children, shows error for unauthenticated users |
 | `patchUserWorkspaceId` | Utility to update the active workspace cookie |
 | `Definition` | Feature metadata (id, actions, views) |
+| `ListWorkspaces`, `GetWorkspace`, … | Platform action POJOs — use with `useSdk().read()` / `invoke()` |
 
 ## Usage
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ossy/workspaces",
-  "description": "Workspaces feature package — create, select, and manage workspaces, users, and invitations",
-  "version": "1.16.7",
+  "description": "Workspaces feature package - create, select, and manage workspaces, users, and invitations",
+  "version": "1.17.1",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
+    "./server": "./src/server.js",
     "./workspace-invitation.email.jsx": "./src/workspace-invitation.email.jsx"
   },
   "scripts": {
@@ -25,7 +26,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.2.0",
-    "@ossy/platform": "^1.38.7",
+    "@ossy/platform": "^1.39.1",
     "casual": "^1.6.2",
     "jest": "^30.2.0"
   },
@@ -37,5 +38,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "f65df0cd6da864c314c4f424112e05e8e2dec0ff"
+  "gitHead": "c0ba5d90749690634e4dc2705178ff8d89dd3070"
 }

package/src/AuthenticationGuard.jsx

@@ -1,20 +1,33 @@
-import React from 'react'
-import { AuthenticationStatus, useAuthentication } from '@ossy/sdk-react'
-import { Switch, View, Guide, Icon } from '@ossy/design-system'
+import React, { useMemo } from 'react'
+import { AuthenticationStatus, GetCurrentUser } from '@ossy/authentication'
+import { useSdk, AsyncStatus } from '@ossy/sdk-react'
+import { Switch, View, Guide, Icon, useLocale } from '@ossy/design-system'
 
 export const AuthenticationGuard = ({ children }) => {
-  const { status } = useAuthentication()
+  const { t } = useLocale()
+  const sdk = useSdk()
+  const { status, data: user } = sdk.read(GetCurrentUser)
+
+  const authStatus = useMemo(() => {
+    if (status === AsyncStatus.Loading || status === AsyncStatus.NotInitialized) {
+      return AuthenticationStatus.Verifying
+    }
+    if (status === AsyncStatus.Success && user) {
+      return AuthenticationStatus.Authenticated
+    }
+    return AuthenticationStatus.NotAuthenticated
+  }, [status, user])
 
   return (
-    <Switch on={status}>
+    <Switch on={authStatus}>
 
       <Switch.Case match={[AuthenticationStatus.NotAuthenticated]}>
         <View layout="off-center" style={{ height: '100%' }}>
           <Guide
             style={{ width: '100vw', maxWidth: '300px' }}
             slot="content"
-            title="Not Authenticated"
-            text="You need to login to view this page"
+            title={t('authentication.guard.notAuthenticated.title')}
+            text={t('authentication.guard.notAuthenticated.text')}
           />
         </View>
       </Switch.Case>
@@ -24,13 +37,13 @@ export const AuthenticationGuard = ({ children }) => {
           <Guide
             style={{ width: '100vw', maxWidth: '300px' }}
             slot="content"
-            title="Error"
-            text="An error occurred while trying to authenticate, try again in a few minutes"
+            title={t('authentication.guard.error.title')}
+            text={t('authentication.guard.error.text')}
           />
         </View>
       </Switch.Case>
 
-      <Switch.Case match={[AuthenticationStatus.Verifying, AuthenticationStatus.NoInitialized]}>
+      <Switch.Case match={[AuthenticationStatus.Verifying, AuthenticationStatus.NotInitialized]}>
         <View layout="off-center" style={{ height: '100%' }}>
           <Icon
             name="spinner"

package/src/CreateWorkspacePage.jsx

@@ -1,32 +1,37 @@
 import React, { useState } from 'react'
-import { useWorkspaces } from '@ossy/sdk-react'
+import { ListWorkspaces, CreateWorkspace } from '@ossy/workspaces'
+import { useSdk, cacheKey } from '@ossy/sdk-react'
 import {
   Button,
   useInputValue,
   Title,
   Input,
-  View
+  View,
+  useLocale,
 } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { AuthenticationGuard } from './AuthenticationGuard.jsx'
 import { patchUserWorkspaceId } from './patchUserWorkspaceId.js'
+import { metadata as CreateWorkspaceMeta } from './create.action.js'
 
 export const CreateWorkspacePage = () => {
   const router = useRouter()
+  const { t } = useLocale()
   const [error, setError] = useState()
   const [workspaceName, setWorkspaceName] = useInputValue()
-  const { createWorkspace } = useWorkspaces()
+  const sdk = useSdk()
 
   const onCreateWorkspace = workspaceName => {
-    createWorkspace(workspaceName)
-      .then((workspace) =>
-        patchUserWorkspaceId(workspace.id).then((res) => {
+    sdk.invoke(CreateWorkspace, { name: workspaceName })
+      .then((workspace) => {
+        sdk.invalidate(cacheKey(ListWorkspaces))
+        return patchUserWorkspaceId(workspace.id).then((res) => {
           if (!res.ok) throw new Error('Could not select the new workspace')
           window.location.assign(
             router.getHref({ id: '@storage/home', params: { workspaceId: workspace.id } })
           )
         })
-      )
+      })
       .catch(err => { setError(err.message) })
   }
 
@@ -34,14 +39,14 @@ export const CreateWorkspacePage = () => {
     <AuthenticationGuard>
       <View gap="m">
 
-        <title>Create workspace</title>
-        <Title variant="primary" className="stack-m">Create a new workspace</Title>
+        <title>{t('profile/workspaces/create.documentTitle')}</title>
+        <Title variant="primary" className="stack-m">{t('workspaces.create.title')}</Title>
 
         <Input
           id="workspaceName"
           className={error ? 'stack-s' : 'stack-m'}
           type="text"
-          placeholder="Workspace name"
+          placeholder={t('workspaces.create.namePlaceholder')}
           required
           onChange={setWorkspaceName}
           style={{ width: '100%' }}
@@ -54,13 +59,14 @@ export const CreateWorkspacePage = () => {
           <Button
             variant="link"
             id="cancel"
-            href={() => router.back()}>Cancel
+            href={() => router.back()}>{t('workspaces.create.cancel')}
           </Button>
 
           <Button
             id="createWorkspace"
+            data-action={CreateWorkspaceMeta.id}
             variant="cta"
-            onClick={() => onCreateWorkspace(workspaceName)}>Create
+            onClick={() => onCreateWorkspace(workspaceName)}>{t('workspaces.create.submit')}
           </Button>
 
         </View>

package/src/Definition.js

@@ -2,22 +2,6 @@ export const Definition = {
   id: 'workspaces',
   title: 'Workspaces',
   description: 'Workspace lifecycle, members, invitations, and services.',
-  module: {
-    id: 'workspaces',
-    enabled: true
-  },
+  icon: 'users',
   statuses: ['beta'],
-  actions: [
-    'workspaces.create',
-    'workspaces.invite-user',
-    'workspaces.enable-service',
-    'workspaces.disable-service'
-  ],
-  views: [
-    'workspaces.get-all',
-    'workspaces.get',
-    'workspaces.get-current',
-    'workspaces.get-users'
-  ],
-  tasks: []
 }

package/src/GeneralSettings.jsx

@@ -1,87 +1,44 @@
 import React, { useState } from 'react'
-import { useWorkspace, useUser, AsyncStatus } from '@ossy/sdk-react'
-import { Switch, Title, Button, View, Text } from '@ossy/design-system'
+import { GetWorkspace } from '@ossy/workspaces'
+import { GetCurrentUser } from '@ossy/authentication'
+import { useSdk, AsyncStatus } from '@ossy/sdk-react'
+import { Switch, Title, Button, View, Text, useLocale } from '@ossy/design-system'
 
-const formatDate = (timestamp) => {
-  if (!timestamp) return ''
-  const date = new Date(timestamp)
-  return date.toLocaleDateString()
-}
-
-const FlowStage = {
-  View: 'View',
-  Edit: 'Edit'
-}
-
-const availableServices = [
-  '@ossy/jobs/visual-content-descriptors',
-  '@ossy/jobs/resize-common-web',
-  '@ossy/resumes',
-  '@ossy/consultancy',
-  '@ossy/apps',
-  '@ossy/domains',
-]
+const formatDate = (timestamp) => timestamp ? new Date(timestamp).toLocaleDateString() : ''
+const FlowStage = { View: 'View', Edit: 'Edit' }
 
 export const GeneralSettings = () => {
-  const { workspace } = useWorkspace()
-  const { status: userStatus, user } = useUser()
+  const { t } = useLocale()
+  const sdk = useSdk()
+  const { data: workspace } = sdk.read(GetWorkspace)
+  const { status: userStatus } = sdk.read(GetCurrentUser)
   const [flowStage, setFlowStage] = useState(FlowStage.View)
-
   const services = workspace?.services || {}
 
-  const isWorkspaceCreator =
-    userStatus === AsyncStatus.Success &&
-    Boolean(workspace?.createdBy) &&
-    Boolean(user?.id) &&
-    workspace.createdBy === user.id
-
   return (
     <View gap="l" inset="m">
       <View layout="row" gap="s" justifyContent="space-between">
-        <Title>Workspace details</Title>
-
-        <View>
-          <Switch on={flowStage}>
-            <Switch.Case match={[FlowStage.View]}>
-              <Button prefix={{ size: 's', name: 'pen' }} variant="cta" disabled>
-                Edit
-              </Button>
-            </Switch.Case>
-          </Switch>
-        </View>
+        <Title>{t('workspace.settings.detailsTitle')}</Title>
+        <Switch on={flowStage}>
+          <Switch.Case match={[FlowStage.View]}>
+            <Button prefix={{ size: 's', name: 'pen' }} variant="cta" disabled>{t('workspace.settings.edit')}</Button>
+          </Switch.Case>
+        </Switch>
       </View>
-
-      <View gap="s" style={{ height: '100%' }}>
-        <View layout="row" gap="s">
-          <Text style={{ fontWeight: 'bold' }}>Id:</Text>
-          <Text>{workspace.id}</Text>
-        </View>
-        <View layout="row" gap="s">
-          <Text style={{ fontWeight: 'bold' }}>Name:</Text>
-          <Text>{workspace.name}</Text>
-        </View>
-        <View layout="row" gap="s">
-          <Text style={{ fontWeight: 'bold' }}>Created:</Text>
-          <Text>{formatDate(workspace?.created)}</Text>
-        </View>
-      </View>
-
-      {isWorkspaceCreator && (
+      {userStatus === AsyncStatus.Loading ? (
+        <Text>{t('workspace.settings.loading')}</Text>
+      ) : (
         <View gap="s">
-          <Title variant="secondary">Workspace services</Title>
-          <Text variant="small" style={{ maxWidth: '42rem' }}>
-            Turn features on or off for this workspace.
-          </Text>
-          {availableServices.map((x) => (
-            <View key={x}>
-              <Text>
-                {x} : {services[x] !== false ? 'On' : 'Off'}
-              </Text>
-            </View>
-          ))}
+          <View layout="row" gap="s"><Text style={{ fontWeight: 'bold' }}>{t('workspace.settings.name')}</Text><Text>{workspace?.name}</Text></View>
+          <View layout="row" gap="s"><Text style={{ fontWeight: 'bold' }}>{t('workspace.settings.created')}</Text><Text>{formatDate(workspace?.created)}</Text></View>
+          <Title variant="tertiary">{t('workspace.settings.services')}</Title>
+          <View gap="xs">
+            {Object.entries(services).map(([key, enabled]) => (
+              <Text key={key}>{key}: {enabled ? 'on' : 'off'}</Text>
+            ))}
+          </View>
         </View>
       )}
-
     </View>
   )
 }

package/src/Invitations.jsx

@@ -1,44 +1,36 @@
 import React from 'react'
-import { useWorkspace } from '@ossy/sdk-react'
-import { Title, Text, Button, View, Icon } from '@ossy/design-system'
+import { GetWorkspace } from '@ossy/workspaces'
+import { useSdk } from '@ossy/sdk-react'
+import { Title, Text, Button, View, Icon, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 export const Invitations = () => {
+  const { t } = useLocale()
   const router = useRouter()
-  const { workspace } = useWorkspace()
+  const sdk = useSdk()
+  const { data: workspace } = sdk.read(GetWorkspace)
   const invitations = workspace?.invitations || []
 
   return (
     <View gap="m">
-
       <View inset="s" gap="s">
-
         <View layout="row" justifyContent="space-between" alignItems="center">
-          <Title>Invitations</Title>
+          <Title>{t('workspace.invitations.title')}</Title>
           <Button variant="cta" href={router.getHref('@workspace/invitations/add')} prefix="user-add">
-            Invite user
+            {t('workspace.invitations.invite')}
           </Button>
         </View>
-
-        <Text style={{ maxWidth: '400px' }}>
-          Invite users to your workspace to collaborate.
-        </Text>
-
+        <Text style={{ maxWidth: '400px' }}>{t('workspace.invitations.description')}</Text>
       </View>
-
       <View gap="xs">
         {invitations.map(invite => (
           <View layout="row" roundness="s" alignItems="center" inset="m" gap="m" selectable key={invite.email}>
             <Icon name="mail" />
-            <View>
-              <Text variant="small" as="span">{invite.email}</Text>
-            </View>
+            <View><Text variant="small" as="span">{invite.email}</Text></View>
           </View>
         ))}
       </View>
-
-      {invitations.length === 0 && <Text>No invitations</Text>}
-
+      {invitations.length === 0 && <Text>{t('workspace.invitations.empty')}</Text>}
     </View>
   )
 }

package/src/Invite.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react'
-import { useWorkspace } from '@ossy/sdk-react'
+import { InviteUser } from '@ossy/workspaces'
+import { useSdk } from '@ossy/sdk-react'
 import { useRouter } from '@ossy/router-react'
 import {
   useInputValue,
@@ -9,7 +10,8 @@ import {
   Switch,
   Guide,
   Text,
-  View
+  View,
+  useLocale,
 } from '@ossy/design-system'
 
 const FlowStage = {
@@ -19,15 +21,16 @@ const FlowStage = {
 }
 
 export const Invite = () => {
+  const { t } = useLocale()
   const router = useRouter()
-  const { inviteUser } = useWorkspace()
+  const sdk = useSdk()
   const [flowStage, setFlowStage] = useState(FlowStage.EnterEmail)
   const [email, setEmail] = useInputValue('')
   const formRef = useRef()
 
   const sendInvite = event => {
     event.preventDefault()
-    formRef.current.reportValidity() && inviteUser(email)
+    formRef.current.reportValidity() && sdk.invoke(InviteUser, { email })
       .then(() => setFlowStage(FlowStage.Success))
       .catch(() => setFlowStage(FlowStage.Error))
   }
@@ -35,13 +38,13 @@ export const Invite = () => {
   return (
     <Switch on={flowStage}>
 
-      <title>Invite user</title>
+      <title>{t('workspace/invitations/add.documentTitle')}</title>
 
       <Switch.Case match={[FlowStage.EnterEmail]}>
         <View gap="m">
-          <Title variant="primary">Invite user</Title>
+          <Title variant="primary">{t('workspace.invite.title')}</Title>
           <Text>
-            Invite a user to manage and contribute content to this workspace
+            {t('workspace.invite.description')}
           </Text>
           <form
             ref={formRef}
@@ -54,7 +57,7 @@ export const Invite = () => {
                 id="registerField"
                 className="stack-m"
                 type="email"
-                placeholder="Email address"
+                placeholder={t('workspace.invite.emailPlaceholder')}
                 required
                 value={email}
                 onChange={e => setEmail(e.target.value)}
@@ -65,14 +68,15 @@ export const Invite = () => {
                 <Button
                   variant="link"
                   id="cancelButton"
-                  href={() => router.back()}>Cancel
+                  href={() => router.back()}>{t('design-system.cancel')}
                 </Button>
 
                 <Button
                   variant="cta"
                   id="registerButton"
+                  data-action={InviteUser.id}
                   type="submit"
-                  onClick={sendInvite}>Send invite
+                  onClick={sendInvite}>{t('workspace.invite.submit')}
                 </Button>
               </View>
             </View>
@@ -82,12 +86,11 @@ export const Invite = () => {
 
       <Switch.Case match={[FlowStage.Success]}>
         <Guide
-          title="Success"
+          title={t('workspace.invite.successTitle')}
           titleVariant="primary"
         >
           <Text>
-            We sent them an invitation over email.
-            When they have accepted they will show up in the list of users.
+            {t('workspace.invite.successBody')}
             <br/>
             ✌️
           </Text>
@@ -96,7 +99,7 @@ export const Invite = () => {
 
       <Switch.Case match={[FlowStage.Error]}>
         <Text>
-          Something went wrong, try again in a couple of minutes
+          {t('workspace.invite.error')}
         </Text>
       </Switch.Case>
 

package/src/SelectWorkspacePage.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { useWorkspaces, AsyncStatus } from '@ossy/sdk-react'
-import { Title, Text, Switch, Button, View, Guide, Icon } from '@ossy/design-system'
+import { ListWorkspaces } from '@ossy/workspaces'
+import { useSdk, AsyncStatus } from '@ossy/sdk-react'
+import { Title, Text, Switch, Button, View, Guide, Icon, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { AuthenticationGuard } from './AuthenticationGuard.jsx'
 import { patchUserWorkspaceId } from './patchUserWorkspaceId.js'
@@ -14,7 +15,9 @@ const PageFlow = {
 
 export const SelectWorkspacePage = () => {
   const router = useRouter()
-  const { status: asyncStatus, workspaces } = useWorkspaces()
+  const { t } = useLocale()
+  const sdk = useSdk()
+  const { status: asyncStatus, data: workspaces = [] } = sdk.read(ListWorkspaces)
 
   const pageFlow = (asyncStatus === AsyncStatus.Success && workspaces.length === 0)
     ? PageFlow.NoWorkspacesCreated
@@ -30,7 +33,7 @@ export const SelectWorkspacePage = () => {
   return (
     <AuthenticationGuard>
 
-      <title>Select workspace</title>
+      <title>{t('profile/workspaces.documentTitle')}</title>
 
       <Switch on={pageFlow}>
         <Switch.Case match={[PageFlow.Success]}>
@@ -41,14 +44,14 @@ export const SelectWorkspacePage = () => {
             marginBottom: 'var(--space-m)',
           }}>
             <Title variant="primary">
-              My workspaces
+              {t('workspaces.select.title')}
             </Title>
             <Button
               prefix="math-plus"
               variant="cta"
               href={router.getHref('@profile/workspaces/create')}
               className="mobile:d-none">
-              New workspace
+              {t('workspaces.select.newWorkspace')}
             </Button>
           </div>
         </Switch.Case>
@@ -61,16 +64,12 @@ export const SelectWorkspacePage = () => {
             <Guide
               slot="content"
               style={{ width: '100vw', maxWidth: '500px' }}
-              title="We could not load your workspaces"
-              text={`
-                  Something went wrong when loading your workspaces.
-                  Maybe your session have expired, or we messed up somehow.
-                  Try starting over from our home page.
-              `}
+              title={t('workspaces.select.errorTitle')}
+              text={t('workspaces.select.errorText')}
               actions={[{
                 variant: 'cta',
                 href: '/',
-                label: 'Go to our home page'
+                label: t('workspaces.select.errorAction')
               }]}
             />
           </View>
@@ -83,14 +82,14 @@ export const SelectWorkspacePage = () => {
             style={{ width: '64px', height: '64px' }}
             className="rotate"
           />
-          <Text>Loading...</Text>
+          <Text>{t('workspaces.select.loading')}</Text>
         </Switch.Case>
 
         <Switch.Case match={[PageFlow.Success]}>
           <View gap="m">
 
             <Text style={{ maxWidth: '400px' }}>
-              Workspaces are separate environments where you can manage resources, templates, services and billing.
+              {t('workspaces.select.description')}
             </Text>
 
             <View stack gap="xs" style={{ overflowY: 'auto' }}>
@@ -122,15 +121,11 @@ export const SelectWorkspacePage = () => {
             <Guide
               slot="content"
               style={{ padding: 'var(--space-xl) var(--space-m)', width: '100vw', maxWidth: '500px' }}
-              title="🎉 Let's get the party started 🎉"
-              text={`
-                To get started we need to create a workspace.
-                A workspace is an encapsulation of resources, resource templates,
-                billing information, and what users have access to these things.
-              `}
+              title={`🎉 ${t('workspaces.select.emptyTitle')} 🎉`}
+              text={t('workspaces.select.emptyText')}
               actions={[{
                 variant: 'cta',
-                label: 'Create a workspace',
+                label: t('workspaces.select.emptyAction'),
                 href: router.getHref('@profile/workspaces/create')
               }]}
             />

package/src/Users.jsx

@@ -1,32 +1,28 @@
 import React from 'react'
-import { useUsers, AsyncStatus } from '@ossy/sdk-react'
-import { Text, View, Icon, Title, Button } from '@ossy/design-system'
+import { GetUsers } from '@ossy/workspaces'
+import { useSdk, AsyncStatus } from '@ossy/sdk-react'
+import { Text, View, Icon, Title, Button, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 export const Users = () => {
+  const { t } = useLocale()
   const router = useRouter()
-  const { users = [], status } = useUsers()
+  const sdk = useSdk()
+  const { status, data: users = [] } = sdk.read(GetUsers)
 
-  if (status === AsyncStatus.Loading) return <>Loading</>
+  if (status === AsyncStatus.Loading) return <>{t('workspace.users.loading')}</>
 
   return (
     <View gap="m">
-
       <View inset="s" gap="s">
-
         <View layout="row" justifyContent="space-between" alignItems="center">
-          <Title>Users</Title>
+          <Title>{t('workspace.users.title')}</Title>
           <Button variant="cta" href={router.getHref('@workspace/invitations/add')} prefix="user-add">
-            Invite user
+            {t('workspace.users.invite')}
           </Button>
         </View>
-
-        <Text style={{ maxWidth: '400px' }}>
-          Manage users in your workspace.
-        </Text>
-
+        <Text style={{ maxWidth: '400px' }}>{t('workspace.users.description')}</Text>
       </View>
-
       <View gap="xs">
         {users.map(user => (
           <View layout="row" roundness="s" alignItems="center" inset="m" gap="m" selectable key={user.id}>
@@ -41,7 +37,6 @@ export const Users = () => {
           </View>
         ))}
       </View>
-
     </View>
   )
 }