feat: show delete item login schema alert to permanently remove data (#…

…1577) * feat: show delete item login schema alert to permanently remove data * test: add tests * refactor: fix test * refactor: move up delete item login schema button * refactor: apply PR requested changes
graasp · Nov 28, 2024 · 71e776b · 71e776b
1 parent bfe4205
commit 71e776b
Show file tree

Hide file tree

Showing 12 changed files with 363 additions and 17 deletions.
diff --git a/cypress/e2e/item/authorization/itemLogin/itemLoginSetting.cy.ts b/cypress/e2e/item/authorization/itemLogin/itemLoginSetting.cy.ts
@@ -1,19 +1,29 @@
 import {
+  GuestFactory,
+  ItemLoginSchemaStatus,
   ItemLoginSchemaType,
   PackedFolderItemFactory,
   PermissionLevel,
 } from '@graasp/sdk';
 
-import { buildItemPath } from '../../../../../src/config/paths';
+import {
+  buildItemPath,
+  buildItemSharePath,
+} from '../../../../../src/config/paths';
 import {
   REQUEST_MEMBERSHIP_BUTTON_ID,
   SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID,
+  buildDataCyWrapper,
   buildShareButtonId,
 } from '../../../../../src/config/selectors';
 import { MEMBERS } from '../../../../fixtures/members';
+import { buildItemMembership } from '../../../../fixtures/memberships';
 import { ITEM_LOGIN_PAUSE } from '../../../../support/constants';
 import { addItemLoginSchema } from './utils';
 
+const ALERT_BUTTON = `[role="alert"] button`;
+const DIALOG_SELECTOR = `[role="dialog"]`;
+
 const checkItemLoginSetting = ({
   mode,
   disabled = false,
@@ -98,3 +108,112 @@ describe('Item Login', () => {
     });
   });
 });
+
+describe('Item Login Delete Button', () => {
+  describe('without guests', () => {
+    it('Delete item login for private item ', () => {
+      const item = addItemLoginSchema(
+        PackedFolderItemFactory({}),
+        ItemLoginSchemaType.UsernameAndPassword,
+        ItemLoginSchemaStatus.Disabled,
+      );
+      cy.setUpApi({
+        items: [item],
+      });
+      cy.visit(buildItemSharePath(item.id));
+
+      // delete
+      cy.get(ALERT_BUTTON).click();
+      cy.wait('@deleteItemLoginSchema').then(({ request: { url } }) => {
+        expect(url).to.include(item.id);
+      });
+    });
+
+    it('Delete item login for public item', () => {
+      const item = addItemLoginSchema(
+        PackedFolderItemFactory({}, { publicVisibility: {} }),
+        ItemLoginSchemaType.UsernameAndPassword,
+        ItemLoginSchemaStatus.Disabled,
+      );
+      cy.setUpApi({
+        items: [item],
+      });
+      cy.visit(buildItemSharePath(item.id));
+
+      // delete
+      cy.get(ALERT_BUTTON).click();
+      cy.wait('@deleteItemLoginSchema').then(({ request: { url } }) => {
+        expect(url).to.include(item.id);
+      });
+    });
+  });
+  describe('with guests', () => {
+    it('Delete item login for private item ', () => {
+      const item = addItemLoginSchema(
+        PackedFolderItemFactory({}),
+        ItemLoginSchemaType.UsernameAndPassword,
+        ItemLoginSchemaStatus.Disabled,
+      );
+      const guest = GuestFactory({ itemLoginSchema: item.itemLoginSchema });
+      cy.setUpApi({
+        items: [
+          {
+            ...item,
+            memberships: [
+              buildItemMembership({
+                item,
+                account: guest,
+                permission: PermissionLevel.Read,
+              }),
+            ],
+          },
+        ],
+      });
+      cy.visit(buildItemSharePath(item.id));
+
+      // display delete alert
+      cy.get(ALERT_BUTTON).click();
+      cy.get(DIALOG_SELECTOR).should('contain', guest.name);
+
+      // click delete
+      cy.get(`${DIALOG_SELECTOR} ${buildDataCyWrapper('delete')}`).click();
+      cy.wait('@deleteItemLoginSchema').then(({ request: { url } }) => {
+        expect(url).to.include(item.id);
+      });
+    });
+
+    it('Delete item login for public item', () => {
+      const item = addItemLoginSchema(
+        PackedFolderItemFactory({}, { publicVisibility: {} }),
+        ItemLoginSchemaType.UsernameAndPassword,
+        ItemLoginSchemaStatus.Disabled,
+      );
+      const guest = GuestFactory({ itemLoginSchema: item.itemLoginSchema });
+      cy.setUpApi({
+        items: [
+          {
+            ...item,
+            memberships: [
+              buildItemMembership({
+                item,
+                account: guest,
+                permission: PermissionLevel.Read,
+              }),
+            ],
+          },
+        ],
+      });
+      cy.visit(buildItemSharePath(item.id));
+
+      // display delete alert
+      cy.get(ALERT_BUTTON).click();
+      cy.get(DIALOG_SELECTOR).should('contain', guest.name);
+
+      // click delete
+      cy.get(`${DIALOG_SELECTOR} ${buildDataCyWrapper('delete')}`).click();
+      cy.wait('@deleteItemLoginSchema').then(({ request: { url } }) => {
+        expect(url).to.include(item.id);
+      });
+    });
+  });
+});
diff --git a/cypress/e2e/item/authorization/itemLogin/utils.ts b/cypress/e2e/item/authorization/itemLogin/utils.ts
@@ -9,11 +9,12 @@ import {
 export const addItemLoginSchema = (
   item: PackedItem,
   itemLoginSchemaType: ItemLoginSchemaType,
+  status = ItemLoginSchemaStatus.Active,
 ): PackedItem & { itemLoginSchema: ItemLoginSchema } => ({
   ...item,
   itemLoginSchema: ItemLoginSchemaFactory({
     item,
     type: itemLoginSchemaType,
-    status: ItemLoginSchemaStatus.Active,
+    status,
   }),
 });
diff --git a/cypress/e2e/item/share/changeVisibility.cy.ts b/cypress/e2e/item/share/changeVisibility.cy.ts
@@ -1,8 +1,10 @@
 import {
+  GuestFactory,
   ItemLoginSchemaStatus,
   ItemLoginSchemaType,
   ItemVisibilityType,
   PackedFolderItemFactory,
+  PermissionLevel,
   PublicationStatus,
 } from '@graasp/sdk';
 
@@ -18,6 +20,8 @@ import {
   buildShareButtonId,
 } from '../../../../src/config/selectors';
 import { PublishedItemFactory } from '../../../fixtures/items';
+import { buildItemMembership } from '../../../fixtures/memberships';
+import { addItemLoginSchema } from '../authorization/itemLogin/utils';
 
 const changeVisibility = (value: string): void => {
   cy.get(`#${SHARE_ITEM_VISIBILITY_SELECT_ID}`).click();
@@ -102,7 +106,51 @@ describe('Visibility of an Item', () => {
     });
   });
 
-  it('Change Pseudonymized Item to Private Item', () => {
+  it('Change Pseudonymized Item to Private Item with guest', () => {
+    const item = addItemLoginSchema(
+      PackedFolderItemFactory({}),
+      ItemLoginSchemaType.Username,
+    );
+    const guest = GuestFactory({ itemLoginSchema: item.itemLoginSchema });
+    cy.setUpApi({
+      items: [
+        {
+          ...item,
+          memberships: [
+            buildItemMembership({
+              item,
+              account: guest,
+              permission: PermissionLevel.Read,
+            }),
+          ],
+        },
+      ],
+    });
+    cy.visit(buildItemPath(item.id));
+    cy.get(`#${buildShareButtonId(item.id)}`).click();
+
+    // visibility select default value
+    cy.get(`#${SHARE_ITEM_VISIBILITY_SELECT_ID} + input`).should(
+      'have.value',
+      SETTINGS.ITEM_LOGIN.name,
+    );
+
+    // change item login schema
+    cy.get(`#${SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID} + input`).should(
+      'have.value',
+      ItemLoginSchemaType.Username,
+    );
+    // item login edition is done in itemLogin.cy.js
+
+    // change pseudonymized -> private
+    changeVisibility(SETTINGS.ITEM_PRIVATE.name);
+    cy.wait(`@putItemLoginSchema`).then(({ request: { url, body } }) => {
+      expect(url).to.include(item.id);
+      expect(body.status).to.eq(ItemLoginSchemaStatus.Disabled);
+    });
+  });
+
+  it('Change Pseudonymized Item to Private Item without guest', () => {
     const item = PackedFolderItemFactory();
     const ITEM_LOGIN_ITEM = {
       ...item,
@@ -132,10 +180,10 @@ describe('Visibility of an Item', () => {
     // item login edition is done in itemLogin.cy.js
 
     // change pseudonymized -> private
+    // delete item login
     changeVisibility(SETTINGS.ITEM_PRIVATE.name);
-    cy.wait(`@putItemLoginSchema`).then(({ request: { url, body } }) => {
+    cy.wait(`@deleteItemLoginSchema`).then(({ request: { url } }) => {
       expect(url).to.include(item.id);
-      expect(body.status).to.eq(ItemLoginSchemaStatus.Disabled);
     });
   });
 

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -22,6 +22,7 @@ import {
   mockDeleteFavorite,
   mockDeleteInvitation,
   mockDeleteItemCategory,
+  mockDeleteItemLoginSchema,
   mockDeleteItemMembershipForItem,
   mockDeleteItemThumbnail,
   mockDeleteItemVisibility,
@@ -226,6 +227,8 @@ Cypress.Commands.add(
 
     mockPutItemLoginSchema(cachedItems, putItemLoginError);
 
+    mockDeleteItemLoginSchema();
+
     mockGetItemMembershipsForItem(items, currentMember);
 
     mockPostItemVisibility(cachedItems, currentMember, postItemVisibilityError);

diff --git a/cypress/support/server.ts b/cypress/support/server.ts
@@ -876,6 +876,21 @@ export const mockPutItemLoginSchema = (
   ).as('putItemLoginSchema');
 };
 
+export const mockDeleteItemLoginSchema = (): void => {
+  cy.intercept(
+    {
+      method: HttpMethod.Delete,
+      url: new RegExp(`${API_HOST}/items/${ID_FORMAT}/login-schema$`),
+    },
+    ({ reply, url }) => {
+      // check query match item login schema
+      const id = url.slice(API_HOST.length).split('/')[2];
+
+      reply(id);
+    },
+  ).as('deleteItemLoginSchema');
+};
+
 export const mockGetItemLogin = (items: ItemForTest[]): void => {
   cy.intercept(
     {

diff --git a/src/components/hooks/useGuestMemberships.tsx b/src/components/hooks/useGuestMemberships.tsx
@@ -0,0 +1,16 @@
+import { AccountType, DiscriminatedItem, ItemMembership } from '@graasp/sdk';
+
+import { hooks } from '@/config/queryClient';
+
+export function useGuestMemberships(itemId: DiscriminatedItem['id']): {
+  isLoading: boolean;
+  data?: ItemMembership[];
+} {
+  const { data: memberships, isLoading } = hooks.useItemMemberships(itemId);
+
+  const guestMemberships = memberships?.filter(
+    ({ account: { type } }) => type === AccountType.Guest,
+  );
+
+  return { isLoading, data: guestMemberships };
+}
diff --git a/src/components/hooks/useVisibility.tsx b/src/components/hooks/useVisibility.tsx
@@ -13,6 +13,8 @@ import {
 import { SETTINGS } from '@/config/constants';
 import { hooks, mutations } from '@/config/queryClient';
 
+import { useGuestMemberships } from './useGuestMemberships';
+
 const { useItemLoginSchema, useItemPublishedInformation } = hooks;
 const {
   useDeleteItemVisibility,
@@ -34,6 +36,11 @@ type UseVisibility = {
 export const useVisibility = (item: PackedItem): UseVisibility => {
   const { mutateAsync: postItemVisibility } = usePostItemVisibility();
   const { mutate: deleteItemVisibility } = useDeleteItemVisibility();
+  const { mutate: deleteItemLoginSchema } =
+    mutations.useDeleteItemLoginSchema();
+
+  const { data: guestMemberships, isLoading: isGuestNbLoading } =
+    useGuestMemberships(item.id);
 
   // get item published
   const { data: itemPublishEntry, isLoading: isItemPublishEntryLoading } =
@@ -65,7 +72,8 @@ export const useVisibility = (item: PackedItem): UseVisibility => {
   }, [itemLoginSchema, item]);
 
   // is loading
-  const isLoading = isItemPublishEntryLoading || isItemLoginLoading;
+  const isLoading =
+    isItemPublishEntryLoading || isItemLoginLoading || isGuestNbLoading;
 
   // visibility
   const [visibility, setVisibility] = useState<string>(
@@ -106,11 +114,16 @@ export const useVisibility = (item: PackedItem): UseVisibility => {
       };
 
       const disableLoginSchema = () => {
-        if (itemLoginSchema) {
-          putItemLoginSchema({
-            itemId: item.id,
-            status: ItemLoginSchemaStatus.Disabled,
-          });
+        if (itemLoginSchema && guestMemberships) {
+          // disable if contains data, delete otherwise
+          if (guestMemberships.length) {
+            putItemLoginSchema({
+              itemId: item.id,
+              status: ItemLoginSchemaStatus.Disabled,
+            });
+          } else {
+            deleteItemLoginSchema({ itemId: item.id });
+          }
         }
       };
 
@@ -148,7 +161,9 @@ export const useVisibility = (item: PackedItem): UseVisibility => {
       unpublish,
       deleteItemVisibility,
       itemLoginSchema,
+      guestMemberships,
       putItemLoginSchema,
+      deleteItemLoginSchema,
       postItemVisibility,
     ],
   );

diff --git a/src/components/item/form/link/LinkForm.tsx b/src/components/item/form/link/LinkForm.tsx
@@ -172,7 +172,7 @@ export const LinkForm = ({
         <DialogContent>
           <Stack gap={1} overflow="scroll">
             <LinkUrlField />
-            <ItemNameField required />
+            <ItemNameField required autoFocus={false} />
             <LinkDescriptionField
               onRestore={() =>
                 setValue('description', linkData?.description ?? '')