Permissions enhancements

projects/bp-gallery/cypress/e2e/bulk-edit.cy.ts

@@ -24,9 +24,9 @@ describe('bulk edit', () => {
     bulkEdit();
     cy.contains('.picture-info-field', 'Personen').find('input').type('Simon');
     cy.contains('Simon Heraldson').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('.MuiChip-root', 'Simon Heraldson').find('[data-testid="CancelIcon"]').click(); // cleanup
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Zurück').click();
     cy.get('.picture-preview .adornment [data-testid="CheckBoxIcon"]').should('not.exist');
   });

projects/bp-gallery/cypress/e2e/bulk-edit/collections.cy.ts

@@ -29,7 +29,7 @@ describe('bulk edit collections', () => {
     // create a picture without collections
     cy.visit('/picture/1');
     cy.contains('.MuiChip-root', 'Top-Level collection').find('[data-testid="CancelIcon"]').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
 
     cy.visit('/picture/3');
     cy.contains('Collection 1');
@@ -48,7 +48,7 @@ describe('bulk edit collections', () => {
     cy.contains('.picture-info-field', 'Collections')
       .find('input')
       .type('Top-Level collection{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
   });
 
   it('adds new collections while keeping old ones', () => {
@@ -62,7 +62,7 @@ describe('bulk edit collections', () => {
     selectPictures('2', '1');
     bulkEdit();
     cy.contains('.picture-info-field', 'Collections').find('input').type('Collection 2{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Collection 2');
     cy.visit('/picture/2');
     cy.contains('Collection 1');
@@ -77,7 +77,7 @@ describe('bulk edit collections', () => {
     selectPictures('2', '1');
     bulkEdit();
     cy.contains('.MuiChip-root', 'Collection 2').find('[data-testid="CancelIcon"]').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Collection 1').should('not.exist');
     cy.contains('Collection 2').should('not.exist');
     cy.visit('/picture/2');
@@ -100,7 +100,7 @@ describe('bulk edit collections', () => {
     bulkEdit();
     cy.contains('.picture-info-field', 'Collections').find('input').type('Collection 2');
     cy.get('.MuiAutocomplete-popper').contains('Collection 2').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Collection 1');
     cy.contains('Collection 2');
     cy.visit('/picture/3');
@@ -112,7 +112,7 @@ describe('bulk edit collections', () => {
     // cleanup
     cy.get('[data-testid="CancelIcon"]'); // wait for auth
     cy.contains('.MuiChip-root', 'Collection 2').find('[data-testid="CancelIcon"]').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Collection 1');
     cy.contains('Collection 2').should('not.exist');
   });

projects/bp-gallery/cypress/e2e/bulk-edit/dates.cy.ts

@@ -34,14 +34,14 @@ describe('bulk edit dates', () => {
     cy.contains('Keine Zeit bekannt').click();
     cy.get('.rdrDateInput').eq(0).clear();
     cy.get('.rdrDateInput').eq(0).type('20.04.1969{enter}{esc}');
-    cy.contains('.save-state', 'Gespeichert.');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert.');
     cy.visit('/picture/5');
     waitForCuratorPictureInfo();
     cy.contains('20.04.1969').click();
     // cleanup
     cy.get('.rdrDateInput').eq(0).clear();
     cy.get('.rdrDateInput').eq(0).type('01.04.1970{enter}{esc}');
-    cy.contains('.save-state', 'Gespeichert.');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert.');
     cy.contains('01.04.1970');
 
     cy.visit('/picture/1');
@@ -52,7 +52,7 @@ describe('bulk edit dates', () => {
     cy.get('.rdrDateInput').eq(0).type('01.01.1961{enter}');
     cy.get('.rdrDateInput').eq(1).clear();
     cy.get('.rdrDateInput').eq(1).type('31.01.2022{enter}{esc}');
-    cy.contains('.save-state', 'Gespeichert.');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert.');
     cy.contains('01.01.1961 - 31.01.2022');
   });
 });

projects/bp-gallery/cypress/e2e/bulk-edit/descriptions.cy.ts

@@ -68,7 +68,7 @@ describe('bulk edit descriptions', () => {
       .find('.jodit-wysiwyg:empty')
       .type('Irgendwas cooles');
     cy.contains('.field-title', 'Beschreibungen').click();
-    cy.contains('.save-state', 'Gespeichert.');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert.');
 
     cy.visit('/picture/1');
     cy.contains('Yet another description');
@@ -87,7 +87,7 @@ describe('bulk edit descriptions', () => {
       .find('.MuiIconButton-root [data-testid="DeleteIcon"]')
       .click();
     cy.contains('Bestätigen').click();
-    cy.contains('.save-state', 'Gespeichert.');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert.');
     cy.contains('Yet another description');
     cy.contains('Irgendwas cooles').should('not.exist');
 

projects/bp-gallery/cypress/e2e/bulk-edit/keyword-tags.cy.ts

@@ -52,7 +52,7 @@ describe('bulk edit keyword tags', () => {
     cy.contains('.picture-info-field', 'Schlagworte')
       .find('input')
       .type('Verifiziertes Testschlagwort 4{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Verifiziertes Testschlagwort 4');
     cy.visit('/picture/3');
     cy.contains('Verifiziertes Testschlagwort 2');
@@ -69,7 +69,7 @@ describe('bulk edit keyword tags', () => {
     cy.contains('.MuiChip-root', 'Verifiziertes Testschlagwort 4')
       .find('[data-testid="CancelIcon"]')
       .click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Verifiziertes Testschlagwort 2').should('not.exist');
     cy.contains('Verifiziertes Testschlagwort 4').should('not.exist');
     cy.visit('/picture/3');
@@ -93,7 +93,7 @@ describe('bulk edit keyword tags', () => {
     cy.contains('.picture-info-field', 'Schlagworte')
       .find('input')
       .type('Verifiziertes Testschlagwort 4{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Verifiziertes Testschlagwort 2');
     cy.contains('Verifiziertes Testschlagwort 4');
     cy.visit('/picture/4');
@@ -107,7 +107,7 @@ describe('bulk edit keyword tags', () => {
     cy.contains('.MuiChip-root', 'Verifiziertes Testschlagwort 4')
       .find('[data-testid="CancelIcon"]')
       .click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Verifiziertes Testschlagwort 2');
     cy.contains('Verifiziertes Testschlagwort 4').should('not.exist');
   });

projects/bp-gallery/cypress/e2e/bulk-edit/location-tags.cy.ts

@@ -50,7 +50,7 @@ describe('bulk edit location tags', () => {
     selectPictures('1', '25');
     bulkEdit();
     cy.contains('.picture-info-field', 'Orte').find('input').type('Verifizierter Testort 3{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Verifizierter Testort 3');
     cy.visit('/picture/1');
     cy.contains('.MuiChip-root', 'Bad Harzburg');
@@ -67,7 +67,7 @@ describe('bulk edit location tags', () => {
     cy.contains('.MuiChip-root', 'Verifizierter Testort 3')
       .find('[data-testid="CancelIcon"]')
       .click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('.MuiChip-root', 'Bad Harzburg').should('not.exist');
     cy.contains('Verifizierter Testort 3').should('not.exist');
     cy.visit('/picture/1');
@@ -89,7 +89,7 @@ describe('bulk edit location tags', () => {
     selectPictures('1', '4');
     bulkEdit();
     cy.contains('.picture-info-field', 'Orte').find('input').type('Market{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('.MuiChip-root', 'Bad Harzburg');
     cy.contains('Market place');
     cy.visit('/picture/1');
@@ -101,7 +101,7 @@ describe('bulk edit location tags', () => {
     // cleanup
     cy.get('[data-testid="CancelIcon"]'); // wait for auth
     cy.contains('.MuiChip-root', 'Market place').find('[data-testid="CancelIcon"]').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Bad Harzburg');
     cy.contains('Market place').should('not.exist');
   });

projects/bp-gallery/cypress/e2e/bulk-edit/person-tags.cy.ts

@@ -50,7 +50,7 @@ describe('bulk edit person tags', () => {
     selectPictures('1', '3');
     bulkEdit();
     cy.contains('.picture-info-field', 'Personen').find('input').type('Katharina{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Katharina Schmunk');
     cy.visit('/picture/1');
     cy.contains('Simon Heraldson').should('not.exist');
@@ -65,7 +65,7 @@ describe('bulk edit person tags', () => {
     selectPictures('1', '3');
     bulkEdit();
     cy.contains('.MuiChip-root', 'Katharina Schmunk').find('[data-testid="CancelIcon"]').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Simon Heraldson').should('not.exist');
     cy.contains('Katharina Schmunk').should('not.exist');
     cy.visit('/picture/1');
@@ -87,7 +87,7 @@ describe('bulk edit person tags', () => {
     selectPictures('2', '3');
     bulkEdit();
     cy.contains('.picture-info-field', 'Personen').find('input').type('Katharina{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Simon Heraldson');
     cy.contains('Katharina Schmunk');
     cy.visit('/picture/2');
@@ -99,7 +99,7 @@ describe('bulk edit person tags', () => {
     // cleanup
     cy.get('[data-testid="CancelIcon"]'); // wait for auth
     cy.contains('.MuiChip-root', 'Katharina Schmunk').find('[data-testid="CancelIcon"]').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
     cy.contains('Simon Heraldson');
     cy.contains('Katharina Schmunk').should('not.exist');
   });

projects/bp-gallery/cypress/e2e/facetags.cy.ts

@@ -31,13 +31,13 @@ describe('face tagging', () => {
     cy.contains('.field-content', 'Personen').find('input').clear();
     cy.contains('.field-content', 'Personen').find('input').type('TestPerson');
     cy.contains('TestPerson hinzufügen').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
 
     cy.contains('.field-content', 'Personen').find('input').click();
     cy.contains('.field-content', 'Personen').find('input').clear();
     cy.contains('.field-content', 'Personen').find('input').type('Personentest');
     cy.contains('Personentest hinzufügen').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
 
     cy.contains('Personen markieren').click();
     cy.contains('Personen bearbeiten');

projects/bp-gallery/cypress/e2e/helper.ts

@@ -7,7 +7,7 @@ export const waitForAllImagesLoaded = () => {
 };
 
 export const waitForCuratorPictureInfo = () => {
-  cy.get('.save-state');
+  cy.get('[data-testid="save-status"]');
 };
 
 export const clickBulkOperation = (name: string) => {

projects/bp-gallery/cypress/e2e/link-pictures-with-texts.cy.ts

@@ -1,14 +1,18 @@
 import { login, logout } from '../utils/login-utils';
 
 const checkTextDisplay = ({ prefix = '', pictureId = '2', textId = '1' } = {}) => {
-  cy.contains('Nur Bilder anzeigen');
+  // wait for page to settle
+  cy.contains('Bilder und Texte anzeigen');
+  // go through each text filter option
+  cy.get('[data-testid="text-filter-select"]').click();
+  cy.contains('Nur Bilder anzeigen').click();
   cy.get(`${prefix} #picture-preview-for-${pictureId}`);
   cy.get(`${prefix} #picture-preview-for-${textId}`).should('not.exist');
-  cy.contains('Nur Bilder anzeigen').click();
+  cy.get('[data-testid="text-filter-select"]').click();
   cy.contains('Bilder und Texte anzeigen').click();
   cy.get(`${prefix} #picture-preview-for-${pictureId}`);
   cy.get(`${prefix} #picture-preview-for-${textId}`);
-  cy.contains('Bilder und Texte anzeigen').click();
+  cy.get('[data-testid="text-filter-select"]').click();
   cy.contains('Nur Texte anzeigen').click();
   cy.get(`${prefix} #picture-preview-for-${pictureId}`).should('not.exist');
   cy.get(`${prefix} #picture-preview-for-${textId}`);

projects/bp-gallery/cypress/e2e/picture_uploading_and_tagging.cy.ts

@@ -56,54 +56,54 @@ describe('picture uploading and tagging', () => {
     cy.get('.date-indicator').click();
     cy.contains('.rdrInputRange', 'Jahr').find('input').clear();
     cy.contains('.rdrInputRange', 'Jahr').find('input').type('1000{esc}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
   });
 
   it('tagging picture with description', () => {
     cy.get('.add-button').click();
     cy.get('.description-wrapper').find('.jodit-container').type('Test');
-    cy.get('.save-state:contains(Speichern ausstehend)').should('exist');
+    cy.get('[data-testid="save-status"]:contains(Speichern ausstehend)').should('exist');
     cy.get('.picture-container img').click();
-    cy.get('.save-state:contains(Gespeichert)').should('exist');
+    cy.get('[data-testid="save-status"]:contains(Gespeichert)').should('exist');
   });
 
   it('change picture description', () => {
     cy.get('.description-wrapper').find('.jodit-container').type('Beschreibung');
-    cy.get('.save-state:contains(Speichern ausstehend)').should('exist');
+    cy.get('[data-testid="save-status"]:contains(Speichern ausstehend)').should('exist');
     // regression test for https://github.com/hpi-swa-lab/BP2021RH1/issues/401
     cy.get('.picture-container img').click();
-    cy.get('.save-state:contains(Gespeichert)').should('exist');
+    cy.get('[data-testid="save-status"]:contains(Gespeichert)').should('exist');
   });
 
   it('tagging picture with person tag', () => {
     cy.contains('.field-content', 'Personen').find('input').click();
     cy.contains('.field-content', 'Personen').find('input').clear();
     cy.contains('.field-content', 'Personen').find('input').type('TestPerson');
     cy.contains('TestPerson hinzufügen').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
   });
 
   it('tagging picture with location tag', () => {
     cy.contains('.field-content', 'Orte').find('input').click();
     cy.contains('.field-content', 'Orte').find('input').clear();
     cy.contains('.field-content', 'Orte').find('input').type('TestOrt');
     cy.contains('TestOrt hinzufügen').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
   });
 
   it('tagging picture with keyword tag', () => {
     cy.contains('.field-content', 'Schlagworte').find('input').click();
     cy.contains('.field-content', 'Schlagworte').find('input').clear();
     cy.contains('.field-content', 'Schlagworte').find('input').type('TestSchlagwort');
     cy.contains('TestSchlagwort hinzufügen').click();
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
   });
 
   it('tagging picture with collection', () => {
     cy.contains('.field-content', 'Collections').find('input').click();
     cy.contains('.field-content', 'Collections').find('input').clear();
     cy.contains('.field-content', 'Collections').find('input').type('TestCollection{enter}');
-    cy.contains('.save-state', 'Gespeichert');
+    cy.contains('[data-testid="save-status"]', 'Gespeichert');
   });
 
   it('checking tags', () => {

projects/bp-gallery/src/components/common/QueryErrorDisplay.tsx

@@ -1,10 +1,9 @@
-import { ApolloError } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
-import { translateErrorMessage } from '../../i18n';
+import { errorToTranslatedString } from '../../helpers/app-helpers';
 
-const QueryErrorDisplay = ({ error }: { error: ApolloError }) => {
+const QueryErrorDisplay = ({ error }: { error: unknown }) => {
   const { t } = useTranslation();
-  return <div>{translateErrorMessage(error.message, t)}</div>;
+  return <div>{errorToTranslatedString(error, t)}</div>;
 };
 
 export default QueryErrorDisplay;

projects/bp-gallery/src/components/common/SaveStatus.tsx

@@ -0,0 +1,10 @@
+export const SaveStatus = ({ label, className }: { label: string; className?: string }) => {
+  return (
+    <span
+      className={`text-[#5a5a5a] bg-[#e5e5e5] rounded py-2 px-3 ${className ?? ''}`}
+      data-testid='save-status'
+    >
+      {label}
+    </span>
+  );
+};

projects/bp-gallery/src/components/common/picture-gallery/PictureScrollGrid.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { PictureFiltersInput } from '../../../graphql/APIConnector';
 import { useSimplifiedQueryResponseData } from '../../../graphql/queryUtils';
 import { useCachedOnRefetch } from '../../../hooks/cache-on-refetch.hook';
-import { useScroll } from '../../../hooks/context-hooks';
+import { useAuth, useScroll } from '../../../hooks/context-hooks';
 import useGetPictures, {
   NUMBER_OF_PICTURES_LOADED_PER_FETCH,
   TextFilter,
@@ -63,10 +63,17 @@ const PictureScrollGrid = ({
   const [lastScrollHeight, setLastScrollHeight] = useState<number>(0);
   const [isFetching, setIsFetching] = useState<boolean>(false);
 
+  const { loggedIn } = useAuth();
   const [selectedTextFilter, setSelectedTextFilter] = useState(
-    textFilter ?? TextFilter.ONLY_PICTURES
+    textFilter ?? (loggedIn ? TextFilter.PICTURES_AND_TEXTS : TextFilter.ONLY_PICTURES)
   );
 
+  useEffect(() => {
+    if (textFilter === null) {
+      setSelectedTextFilter(loggedIn ? TextFilter.PICTURES_AND_TEXTS : TextFilter.ONLY_PICTURES);
+    }
+  }, [textFilter, loggedIn]);
+
   const { data, loading, error, fetchMore, refetch } = useGetPictures(
     queryParams,
     isAllSearchActive,