Merge pull request #422 from gertrude-app/delete-computer

dash: fix deletion of user devices
gertrude-app · Dec 9, 2024 · 4306fa3 · 4306fa3
2 parents adc5f05 + 69fd625
commit 4306fa3
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 22 deletions.
diff --git a/dash/app/src/components/routes/Users.tsx b/dash/app/src/components/routes/Users.tsx
@@ -61,6 +61,7 @@ export function deviceProps(
 ): React.ComponentProps<typeof EditUser>['devices'][number] {
   return {
     id: apiDevice.id,
+    deviceId: apiDevice.deviceId,
     modelTitle: apiDevice.modelTitle,
     modelIdentifier: apiDevice.modelIdentifier,
     name: apiDevice.customName,

diff --git a/dash/app/src/reducers/__tests__/mocks.ts b/dash/app/src/reducers/__tests__/mocks.ts
@@ -81,6 +81,7 @@ export function user(override: Partial<User> = {}): User {
     devices: [
       {
         id: `mac-123`,
+        deviceId: `d-mac-123`,
         modelFamily: `macBookAir`,
         modelTitle: `MacBook Air`,
         modelIdentifier: `MacBookAir8,1`,

diff --git a/dash/components/src/Modal/ConfirmDeleteEntity.tsx b/dash/components/src/Modal/ConfirmDeleteEntity.tsx
@@ -5,16 +5,17 @@ import ConfirmDestructiveAction from './ConfirmDestructiveAction';
 type Props = {
   type: string;
   action: ConfirmableEntityAction<unknown>;
+  text?: string;
 };
 
-export const ConfirmDeleteEntity: React.FC<Props> = ({ action, type }) => (
+export const ConfirmDeleteEntity: React.FC<Props> = ({ action, type, text }) => (
   <ConfirmDestructiveAction
     title={`Delete ${type}?`}
     openWhenPresent={action.id}
     onDismiss={action.cancel}
     onConfirm={action.confirm}
   >
-    Are you sure you want to delete this {type}? There is no undo.
+    {text ?? `Are you sure you want to delete this ${type}? There is no undo.`}
   </ConfirmDestructiveAction>
 );
 

diff --git a/dash/components/src/Users/EditUser.tsx b/dash/components/src/Users/EditUser.tsx
@@ -148,7 +148,11 @@ const EditUser: React.FC<Props> = ({
         schedule={keychainSchedule}
         setSchedule={setAddingKeychainSchedule}
       />
-      <ConfirmDeleteEntity type="device" action={deleteDevice} />
+      <ConfirmDeleteEntity
+        type="connection to computer"
+        action={deleteDevice}
+        text="Are you sure you want to delete the connection between this child and this computer?"
+      />
       <ConfirmDeleteEntity type="user" action={deleteUser} />
       {devices.length > 0 && <PageHeading icon={`cog`}>Child settings</PageHeading>}
       <div className="mt-8">
@@ -175,18 +179,19 @@ const EditUser: React.FC<Props> = ({
               {devices.length} {inflect(`computer`, devices.length)}:
             </h2>
             <div className="flex flex-col max-w-3xl">
-              {devices.map((device) => (
-                <div key={device.id} className="flex items-center mt-3">
+              {devices.map((userDevice) => (
+                <div key={userDevice.id} className="flex items-center mt-3">
                   <UserDevice
-                    modelTitle={device.modelTitle}
-                    modelIdentifier={device.modelIdentifier}
-                    id={device.id}
-                    name={device.name}
-                    status={device.status}
+                    modelTitle={userDevice.modelTitle}
+                    modelIdentifier={userDevice.modelIdentifier}
+                    id={userDevice.id}
+                    deviceId={userDevice.deviceId}
+                    name={userDevice.name}
+                    status={userDevice.status}
                     className="flex-grow mr-3"
                   />
                   <button
-                    onClick={() => deleteDevice.start(device.id)}
+                    onClick={() => deleteDevice.start(userDevice.id)}
                     className="transition-colors duration-100 flex justify-center items-center w-10 h-10 rounded-full hover:bg-slate-100 cursor-pointer text-slate-500 hover:text-red-500"
                   >
                     <i className="fa fa-trash" />

diff --git a/dash/components/src/Users/UserCard.tsx b/dash/components/src/Users/UserCard.tsx
@@ -73,14 +73,15 @@ const UserCard: React.FC<Props> = ({
             </p>
           </div>
           <div className="flex flex-col mt-3 space-y-3 pt-3">
-            {devices.map((device) => (
+            {devices.map((userDevice) => (
               <UserDevice
-                key={device.id}
-                id={device.id}
-                modelTitle={device.modelTitle}
-                modelIdentifier={device.modelIdentifier}
-                name={device.name}
-                status={device.status}
+                key={userDevice.id}
+                id={userDevice.id}
+                deviceId={userDevice.deviceId}
+                modelTitle={userDevice.modelTitle}
+                modelIdentifier={userDevice.modelIdentifier}
+                name={userDevice.name}
+                status={userDevice.status}
               />
             ))}
           </div>

diff --git a/dash/components/src/Users/UserDevice.tsx b/dash/components/src/Users/UserDevice.tsx
@@ -3,24 +3,25 @@ import cx from 'classnames';
 import { Link } from 'react-router-dom';
 
 type Props = {
+  id: UUID;
+  deviceId: UUID;
   modelTitle: string;
   modelIdentifier: string;
   name?: string;
   status: 'online' | 'offline';
   className?: string;
-  id: string;
 };
 
 const UserDevice: React.FC<Props> = ({
+  deviceId,
   modelTitle,
   modelIdentifier,
   status,
   className,
   name,
-  id,
 }) => (
   <Link
-    to={`/computers/${id}`}
+    to={`/computers/${deviceId}`}
     className={cx(
       `rounded-2xl p-2 px-3 bg-white border border-slate-200 transition-[background-color] duration-100 hover:bg-slate-50 flex justify-between items-center gap-6`,
       className,

diff --git a/dash/types/src/pairql/shared.ts b/dash/types/src/pairql/shared.ts
@@ -198,6 +198,7 @@ export type UserActivityItem =
 
 export interface UserDevice {
   id: UUID;
+  deviceId: UUID;
   isOnline: boolean;
   modelFamily: DeviceModelFamily;
   modelTitle: string;

diff --git a/storybook/stories/dash/Users/EditUser.stories.tsx b/storybook/stories/dash/Users/EditUser.stories.tsx
@@ -52,13 +52,15 @@ export const Default: Story = props({
   devices: [
     {
       id: `1`,
+      deviceId: `1`,
       name: `Silvery`,
       modelIdentifier: `Mac14,10`,
       modelTitle: `16" MacBook Pro (2023)`,
       status: `online`,
     },
     {
       id: `2`,
+      deviceId: `2`,
       modelIdentifier: `Mac14,14`,
       modelTitle: `Mac Studio (2023)`,
       status: `offline`,

diff --git a/storybook/stories/dash/Users/ListUsers.stories.tsx b/storybook/stories/dash/Users/ListUsers.stories.tsx
@@ -42,6 +42,7 @@ export const Default: Story = props({
       devices: [
         {
           id: `1`,
+          deviceId: `1`,
           name: `Silvery`,
           modelIdentifier: `Mac14,10`,
           modelTitle: `16" MacBook Pro (2023)`,
@@ -59,13 +60,15 @@ export const Default: Story = props({
       devices: [
         {
           id: `2`,
+          deviceId: `2`,
           modelIdentifier: `Mac14,13`,
           name: `Lil' Studio`,
           modelTitle: `Mac Studio (2023)`,
           status: `offline`,
         },
         {
           id: `3`,
+          deviceId: `3`,
           modelIdentifier: `iMac21,2`,
           modelTitle: `27" iMac (2021)`,
           status: `online`,

diff --git a/storybook/stories/dash/Users/UserCard.stories.tsx b/storybook/stories/dash/Users/UserCard.stories.tsx
@@ -14,6 +14,7 @@ export const Standard: Story = props({
   devices: [
     {
       id: `1`,
+      deviceId: `1`,
       modelTitle: `16" Macbook Pro (2023)`,
       modelIdentifier: `Mac14,10`,
       status: `online`,
@@ -43,18 +44,21 @@ export const Full: Story = props({
   devices: [
     {
       id: `1`,
+      deviceId: `1`,
       modelIdentifier: `Mac14,10`,
       modelTitle: `16" MacBook Pro (2023)`,
       status: `offline`,
     },
     {
       id: `2`,
+      deviceId: `2`,
       modelIdentifier: `Mac14,13`,
       modelTitle: `Mac Studio (2023)`,
       status: `offline`,
     },
     {
       id: `3`,
+      deviceId: `3`,
       modelIdentifier: `iMac21,2`,
       modelTitle: `27" iMac (2021)`,
       status: `online`,

diff --git a/storybook/stories/dash/Users/UserDevice.stories.tsx b/storybook/stories/dash/Users/UserDevice.stories.tsx
@@ -10,8 +10,9 @@ const meta = {
 type Story = StoryObj<typeof meta>;
 
 export const Online: Story = props({
-  modelTitle: `15" Macbook Pro (2023)`,
   id: `123`,
+  deviceId: `d1`,
+  modelTitle: `15" Macbook Pro (2023)`,
   modelIdentifier: `Mac14,10`,
   icon: `laptop`,
   status: `online`,