fix: don't show dataset creation button in placeholder when lacking p…

…ermissions

public/locales/en/translation.json

@@ -249,7 +249,8 @@
       },
       "noDatasets": {
         "title": "You don't have any datasets yet",
-        "body": "Click on <createDatasetButton /> to import your first data"
+        "body": "Click on <createDatasetButton /> to import your first data",
+        "readOnlySubtitle": "You don't have permissions to create datasets. Please contact your administrator."
       },
       "create": {
         "label": "Create",

public/locales/fr/translation.json

@@ -249,7 +249,8 @@
       },
       "noDatasets": {
         "title": "Vous n'avez aucun dataset pour le moment",
-        "body": "Cliquez sur <createDatasetButton /> pour importer vos premières données"
+        "body": "Cliquez sur <createDatasetButton /> pour importer vos premières données",
+        "readOnlySubtitle": "Vous n'avez pas les permissions nécessaires pour créer des datasets. Veuillez contacter votre administrateur."
       },
       "create": {
         "label": "Créer",

src/views/DatasetManager/components/NoDatasetsPlaceholder/NoDatasetsPlaceholder.js

@@ -3,24 +3,47 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Card, Grid, Stack, Typography } from '@mui/material';
+import { PermissionsGate } from '@cosmotech/ui';
+import { ACL_PERMISSIONS } from '../../../../services/config/accessControl';
 import { CreateDatasetButton } from '../CreateDatasetButton';
+import { useNoDatasetsPlaceholder } from './NoDatasetsPlaceholderHook';
 
 export const NoDatasetsPlaceholder = () => {
   const { t } = useTranslation();
+  const { userPermissionsInCurrentOrganization } = useNoDatasetsPlaceholder();
+  const ViewerSubTitle = () => (
+    <Typography data-cy="no-datasets-viewer-subtitle">
+      {t(
+        'commoncomponents.datasetmanager.noDatasets.readOnlySubtitle',
+        "You don't have permissions to create datasets. Please contact your administrator."
+      )}
+    </Typography>
+  );
+
+  const editorSubTitle = (
+    <Typography data-cy="no-datasets-user-subtitle">
+      <Trans
+        i18nKey="commoncomponents.datasetmanager.noDatasets.body"
+        defaultValue="Click on <createDatasetButton /> to import your first data"
+        components={{ createDatasetButton: <CreateDatasetButton isContainedButton={true} /> }}
+      />
+    </Typography>
+  );
+
   return (
     <Grid container sx={{ height: 1, p: 1 }} data-cy="no-datasets-placeholder">
       <Card sx={{ width: 1 }}>
         <Stack sx={{ height: 1 }} justifyContent="center" alignItems="center">
           <Typography variant="h4">
             {t('commoncomponents.datasetmanager.noDatasets.title', "You don't have any datasets yet")}
           </Typography>
-          <Typography>
-            <Trans
-              i18nKey="commoncomponents.datasetmanager.noDatasets.body"
-              defaultValue="Click on <createDatasetButton /> to import your first data"
-              components={{ createDatasetButton: <CreateDatasetButton isContainedButton={true} /> }}
-            />
-          </Typography>
+          <PermissionsGate
+            userPermissions={userPermissionsInCurrentOrganization}
+            necessaryPermissions={[ACL_PERMISSIONS.ORGANIZATION.CREATE_CHILDREN]}
+            RenderNoPermissionComponent={ViewerSubTitle}
+          >
+            {editorSubTitle}
+          </PermissionsGate>
         </Stack>
       </Card>
     </Grid>

src/views/DatasetManager/components/NoDatasetsPlaceholder/NoDatasetsPlaceholderHook.js

@@ -0,0 +1,8 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+import { useOrganizationData } from '../../../../state/hooks/OrganizationHooks';
+
+export const useNoDatasetsPlaceholder = () => {
+  const userPermissionsInCurrentOrganization = useOrganizationData()?.security?.currentUserPermissions ?? [];
+  return { userPermissionsInCurrentOrganization };
+};