Merge pull request #1695 from nhost/changeset-release/main

chore: update versions

.github/workflows/changesets.yaml

@@ -98,7 +98,7 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
         timeout-minutes: 60
         with:
           context: .

dashboard/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nhost/dashboard
 
+## 0.12.3
+
+### Patch Changes
+
+- 2b1338f7: chore(dashboard): bump `turbo` to 1.8.3
+- 5223ee93: fix(dashboard): show correct deployment status on the main page
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/nextjs@1.13.13
+  - @nhost/react-apollo@5.0.8
+
 ## 0.12.2
 
 ### Patch Changes

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.6.3
+RUN yarn global add turbo@1.8.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -116,6 +116,7 @@
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "csstype": "^3.0.10",
+    "encoding": "^0.1.13",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

dashboard/src/components/applications/ApplicationInfo.tsx

@@ -1,4 +1,7 @@
-import { useDeleteApplicationMutation } from '@/generated/graphql';
+import {
+  GetOneUserDocument,
+  useDeleteApplicationMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import Button from '@/ui/v2/Button';
 import ArrowRightIcon from '@/ui/v2/icons/ArrowRightIcon';
@@ -12,7 +15,9 @@ import { useRouter } from 'next/router';
 
 export default function ApplicationInfo() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [deleteApplication, { client }] = useDeleteApplicationMutation();
+  const [deleteApplication, { client }] = useDeleteApplicationMutation({
+    refetchQueries: [GetOneUserDocument],
+  });
   const router = useRouter();
 
   async function handleClickRemove() {

dashboard/src/components/applications/RenderWorkspacesWithApps.tsx

@@ -1,8 +1,8 @@
+import DeploymentStatusMessage from '@/components/deployments/DeploymentStatusMessage';
 import { FindOldApps } from '@/components/home';
 import type { UserData } from '@/hooks/useGetAllUserWorkspacesAndApplications';
 import type { ApplicationState } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
-import { Avatar } from '@/ui/Avatar';
 import StateBadge from '@/ui/StateBadge';
 import type { DeploymentStatus } from '@/ui/StatusCircle';
 import { StatusCircle } from '@/ui/StatusCircle';
@@ -10,59 +10,11 @@ import Divider from '@/ui/v2/Divider';
 import Link from '@/ui/v2/Link';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
-import Text from '@/ui/v2/Text';
 import { getApplicationStatusString } from '@/utils/helpers';
-import { formatDistance } from 'date-fns';
 import Image from 'next/image';
 import NavLink from 'next/link';
 import { Fragment } from 'react';
 
-function ApplicationCreatedAt({ createdAt }: any) {
-  return (
-    <Text component="span" className="text-sm">
-      created{' '}
-      {formatDistance(new Date(createdAt), new Date(), {
-        addSuffix: true,
-      })}
-    </Text>
-  );
-}
-
-function LastSuccessfulDeployment({ deployment }: any) {
-  return (
-    <span className="flex flex-row">
-      <Avatar
-        component="span"
-        name={deployment.commitUserName}
-        avatarUrl={deployment.commitUserAvatarUrl}
-        className="mr-1 h-4 w-4 self-center"
-      />
-      <Text component="span" className="self-center text-sm">
-        {deployment.commitUserName} deployed{' '}
-        {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
-          addSuffix: true,
-        })}
-      </Text>
-    </span>
-  );
-}
-
-function CurrentDeployment({ deployment }: any) {
-  return (
-    <span className="flex flex-row">
-      <Avatar
-        component="span"
-        name={deployment.commitUserName}
-        avatarUrl={deployment.commitUserAvatarUrl}
-        className="mr-1 h-4 w-4 self-center"
-      />
-      <Text component="span" className="self-center text-sm">
-        {deployment.commitUserName} updated just now
-      </Text>
-    </span>
-  );
-}
-
 export function checkStatusOfTheApplication(
   stateHistory: ApplicationState[] | [],
 ) {
@@ -141,27 +93,23 @@ export function RenderWorkspacesWithApps({
               </NavLink>
               <List className="grid grid-flow-row border-y">
                 {workspaceProjects.map((app, index) => {
-                  const isDeployingToProduction = app.deployments[0]
-                    ? ['SCHEDULED', 'PENDING', 'DEPLOYING'].includes(
-                        app.deployments[0].deploymentStatus,
-                      )
-                    : false;
+                  const [latestDeployment] = app.deployments;
 
                   return (
                     <Fragment key={app.slug}>
                       <ListItem.Root
                         secondaryAction={
                           <div className="grid grid-flow-col gap-px">
-                            {app.deployments[0] && (
+                            {latestDeployment && (
                               <div className="mr-2 flex self-center align-middle">
                                 <StatusCircle
                                   status={
-                                    app.deployments[0]
-                                      .deploymentStatus as DeploymentStatus
+                                    latestDeployment.deploymentStatus as DeploymentStatus
                                   }
                                 />
                               </div>
                             )}
+
                             <StateBadge
                               status={checkStatusOfTheApplication(
                                 app.appStates,
@@ -192,27 +140,10 @@ export function RenderWorkspacesWithApps({
                             <ListItem.Text
                               primary={app.name}
                               secondary={
-                                <>
-                                  {isDeployingToProduction && (
-                                    <CurrentDeployment
-                                      deployment={app.deployments[0]}
-                                    />
-                                  )}
-
-                                  {!isDeployingToProduction &&
-                                    app.deployments[0] && (
-                                      <LastSuccessfulDeployment
-                                        deployment={app.deployments[0]}
-                                      />
-                                    )}
-
-                                  {!isDeployingToProduction &&
-                                    !app.deployments[0] && (
-                                      <ApplicationCreatedAt
-                                        createdAt={app.createdAt}
-                                      />
-                                    )}
-                                </>
+                                <DeploymentStatusMessage
+                                  appCreatedAt={app.createdAt}
+                                  deployment={latestDeployment}
+                                />
                               }
                             />
                           </ListItem.Button>

dashboard/src/components/deployments/DeploymentStatusMessage/DeploymentStatusMessage.test.tsx

@@ -0,0 +1,94 @@
+import type { Deployment } from '@/types/application';
+import { render, screen } from '@/utils/testUtils';
+import { test, vi } from 'vitest';
+import DeploymentStatusMessage from './DeploymentStatusMessage';
+
+const defaultDeployment: Deployment = {
+  id: 'de305d54-75b4-431b-adb2-eb6b9e546013',
+  commitUserName: 'john.doe',
+  commitUserAvatarUrl: 'https://example.com/avatar.png',
+  deploymentStartedAt: '2023-02-24T12:00:00.000Z',
+  deploymentEndedAt: null,
+  deploymentStatus: 'SCHEDULED',
+  commitSHA: '1234567890',
+  commitMessage: 'Update README.md',
+};
+
+beforeAll(() => {
+  vi.useFakeTimers();
+});
+
+afterAll(() => {
+  vi.useRealTimers();
+});
+
+test('should render the avatar of the user who deployed the application', () => {
+  render(
+    <DeploymentStatusMessage
+      deployment={defaultDeployment}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(
+    screen.getByRole('img', {
+      name: `Avatar of ${defaultDeployment.commitUserName}`,
+    }),
+  ).toHaveAttribute(
+    'style',
+    `background-image: url(${defaultDeployment.commitUserAvatarUrl});`,
+  );
+});
+
+test('should render "updated just now" when the deployment is in progress and has not ended', () => {
+  render(
+    <DeploymentStatusMessage
+      deployment={defaultDeployment}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(screen.getByText(/updated just now/i)).toBeInTheDocument();
+});
+
+test('should render "updated just now" when the deployment\'s status is DEPLOYED, but it doesn\'t have an end date for some reason', () => {
+  render(
+    <DeploymentStatusMessage
+      deployment={{
+        ...defaultDeployment,
+        deploymentStatus: 'DEPLOYED',
+        deploymentEndedAt: null,
+      }}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(screen.getByText(/updated just now/i)).toBeInTheDocument();
+});
+
+test('should render "deployed 1 day ago" when the deployment has ended', () => {
+  vi.setSystemTime(new Date('2023-02-25T12:25:00.000Z'));
+
+  render(
+    <DeploymentStatusMessage
+      deployment={{
+        ...defaultDeployment,
+        deploymentStatus: 'DEPLOYED',
+        deploymentEndedAt: '2023-02-24T12:15:00.000Z',
+      }}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(screen.getByText(/deployed 1 day ago/i)).toBeInTheDocument();
+});
+
+test('should render "created 1 day ago" if the application does not have a deployment', () => {
+  vi.setSystemTime(new Date('2023-02-25T12:25:00.000Z'));
+
+  render(
+    <DeploymentStatusMessage deployment={null} appCreatedAt="2023-02-24" />,
+  );
+
+  expect(screen.getByText(/created 1 day ago/i)).toBeInTheDocument();
+});

dashboard/src/components/deployments/DeploymentStatusMessage/DeploymentStatusMessage.tsx

@@ -0,0 +1,73 @@
+import type { Deployment } from '@/types/application';
+import { Avatar } from '@/ui/Avatar';
+import Text from '@/ui/v2/Text';
+import formatDistance from 'date-fns/formatDistance';
+
+export interface DeploymentStatusMessageProps {
+  /**
+   * The deployment to render the status message for.
+   */
+  deployment: Partial<Deployment>;
+  /**
+   * The date the application was created.
+   */
+  appCreatedAt: string;
+}
+
+export default function DeploymentStatusMessage({
+  deployment,
+  appCreatedAt,
+}: DeploymentStatusMessageProps) {
+  const isDeployingToProduction = [
+    'SCHEDULED',
+    'PENDING',
+    'DEPLOYING',
+  ].includes(deployment?.deploymentStatus);
+
+  if (
+    isDeployingToProduction ||
+    (deployment && !deployment.deploymentEndedAt)
+  ) {
+    return (
+      <span className="flex flex-row">
+        <Avatar
+          component="span"
+          name={deployment.commitUserName}
+          avatarUrl={deployment.commitUserAvatarUrl}
+          className="mr-1 h-4 w-4 self-center"
+        />
+        <Text component="span" className="self-center text-sm">
+          {deployment.commitUserName} updated just now
+        </Text>
+      </span>
+    );
+  }
+
+  if (!isDeployingToProduction && deployment?.deploymentEndedAt) {
+    return (
+      <span className="flex flex-row">
+        <Avatar
+          component="span"
+          name={deployment.commitUserName}
+          avatarUrl={deployment.commitUserAvatarUrl}
+          className="mr-1 h-4 w-4 self-center"
+        />
+        <Text component="span" className="self-center text-sm">
+          {deployment.commitUserName} deployed{' '}
+          {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
+            addSuffix: true,
+          })}
+        </Text>
+      </span>
+    );
+  }
+
+  return (
+    <Text component="span" className="text-sm">
+      created{' '}
+      {formatDistance(new Date(appCreatedAt), new Date(), {
+        addSuffix: true,
+      })}
+    </Text>
+  );
+}

dashboard/src/components/deployments/DeploymentStatusMessage/index.ts

@@ -0,0 +1,2 @@
+export * from './DeploymentStatusMessage';
+export { default } from './DeploymentStatusMessage';

dashboard/src/components/ui/Avatar.tsx

@@ -59,7 +59,8 @@ export function Avatar({
     <Box
       style={Object.assign(style, { backgroundImage: `url(${avatarUrl})` })}
       className={classes}
-      aria-label="Avatar"
+      aria-label={name ? `Avatar of ${name}` : 'Avatar'}
+      role="img"
       {...rest}
     />
   );

examples/vue-quickstart/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost-examples/vue-quickstart
 
+## 0.0.8
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [7eac17a1]
+- Updated dependencies [850a049c]
+  - @nhost/vue@1.13.13
+  - @nhost/apollo@5.0.7
+
 ## 0.0.7
 
 ### Patch Changes

examples/vue-quickstart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/vue-quickstart",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": true,
   "scripts": {
     "build": "vite build",

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/apollo
 
+## 5.0.7
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/nhost-js@2.0.7
+
 ## 5.0.6
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost/react-apollo
 
+## 5.0.8
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/apollo@5.0.7
+  - @nhost/react@2.0.7
+
 ## 5.0.7
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react-urql
 
+## 2.0.7
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/react@2.0.7
+
 ## 2.0.6
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [

package.json

@@ -76,7 +76,7 @@
     "husky": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
-    "turbo": "1.6.3",
+    "turbo": "1.8.3",
     "typedoc": "^0.22.18",
     "typescript": "4.9.5",
     "vite": "^4.0.2",

packages/docgen/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/docgen
 
+## 0.1.8
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+
 ## 0.1.7
 
 ### Patch Changes

packages/docgen/package.json

@@ -2,7 +2,7 @@
   "name": "@nhost/docgen",
   "description": "Documentation generator for classes and functions",
   "private": true,
-  "version": "0.1.7",
+  "version": "0.1.8",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",

packages/graphql-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/graphql-js
 
+## 0.0.5
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+
 ## 0.0.4
 
 ### Patch Changes

packages/graphql-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/graphql-js",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Nhost GraphQL client",
   "license": "MIT",
   "keywords": [

packages/hasura-auth-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/hasura-auth-js
 
+## 2.0.2
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+
 ## 2.0.1
 
 ### Patch Changes

packages/hasura-auth-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-auth-js",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Hasura-auth client",
   "license": "MIT",
   "keywords": [

packages/hasura-storage-js/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/hasura-storage-js
 
+## 2.0.3
+
+### Patch Changes
+
+- 889ee658: added tests
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+
 ## 2.0.2
 
 ### Patch Changes

packages/hasura-storage-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-storage-js",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Hasura-storage client",
   "license": "MIT",
   "keywords": [

packages/hasura-storage-js/src/utils/index.ts

@@ -7,7 +7,7 @@ export const appendImageTransformationParameters = (
   params: StorageImageTransformationParams
 ): string => {
   const queryParameters = Object.entries(params)
-    .map(([key, value]) => `${Array.from(key)[0]}=${value}`)
+    .map(([key, value]) => `${key.charAt(0)}=${value}`)
     .join('&')
   return queryParameters ? `${url}?${queryParameters}` : url
 }

packages/hasura-storage-js/tests/utils.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { appendImageTransformationParameters, StorageImageTransformationParams } from '../src/utils'
+
+describe('appendImageTransformationParameters', () => {
+  it('appends image transformation parameters to the url', () => {
+    const url = 'https://example.com/image.jpg'
+    const params: StorageImageTransformationParams = {
+      width: 200,
+      height: 300,
+      quality: 80,
+      blur: 10
+    }
+    const result = appendImageTransformationParameters(url, params)
+    expect(result).toBe('https://example.com/image.jpg?w=200&h=300&q=80&b=10')
+  })
+
+  it('returns the original url when no parameters are provided', () => {
+    const url = 'https://example.com/image.jpg'
+    const params: StorageImageTransformationParams = {}
+    const result = appendImageTransformationParameters(url, params)
+    expect(result).toBe('https://example.com/image.jpg')
+  })
+})

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/nextjs
 
+## 1.13.13
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/react@2.0.7
+
 ## 1.13.12
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.13.12",
+  "version": "1.13.13",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nhost/nhost-js
 
+## 2.0.7
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [889ee658]
+- Updated dependencies [850a049c]
+  - @nhost/hasura-storage-js@2.0.3
+  - @nhost/graphql-js@0.0.5
+  - @nhost/hasura-auth-js@2.0.2
+
 ## 2.0.6
 
 ### Patch Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [

packages/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react
 
+## 2.0.7
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/nhost-js@2.0.7
+
 ## 2.0.6
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/sync-versions/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/sync-versions
 
+## 0.0.6
+
+### Patch Changes
+
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+
 ## 0.0.5
 
 ### Patch Changes

packages/sync-versions/package.json

@@ -2,7 +2,7 @@
   "name": "@nhost/sync-versions",
   "description": "Sync the versions of Nhost services in each of the packages of a pnpm workspace",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",

packages/vue/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost/vue
 
+## 1.13.13
+
+### Patch Changes
+
+- 7eac17a1: chore(deps): bump `@xstate/inspect` to 0.8.0
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/nhost-js@2.0.7
+
 ## 1.13.12
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "1.13.12",
+  "version": "1.13.13",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [
@@ -72,7 +72,7 @@
   "devDependencies": {
     "@nhost/docgen": "workspace:*",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@xstate/inspect": "^0.7.0",
+    "@xstate/inspect": "^0.8.0",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6",
     "ws": "^8.10.0",