refactor(app): parameterize admin role & enforce it to be set (#336)

* parameterize admin role & enforce it to be set

* fix lint

---------

Co-authored-by: Anton Tranelis <31516529+antontranelis@users.noreply.github.com>

app/.env.dist

@@ -3,5 +3,6 @@ VITE_API_URL=http://localhost:8055/
 #VITE_API_URL=https://api.utopia-lab.org
 VITE_MAP_URL=http://local.development
 #VITE_MAP_URL=CURRENT_WINDOW_LOCATION
+#VITE_DIRECTUS_ADMIN_ROLE=
 VITE_VALIDATE_INVITE_FLOW_ID=01d61db0-25aa-4bfa-bc24-c6a8f208a455
 VITE_REDEEM_INVITE_FLOW_ID=cc80ec73-ecf5-4789-bee5-1127fb1a6ed4

app/README.md

@@ -0,0 +1,11 @@
+# App
+
+## Troubleshooting
+
+Map doesn't load and the Error `You must define the Admin roll in the .env file!` shows in the console.
+
+In order to get the map running you need to define the correct uuid of the admin roll in the `.env` file.
+
+Go to http://localhost:8055 and login with the admin credentials. Navigate to http://localhost:8055/admin/settings/roles and click `Administrator` and copy the UUID from the URL.
+
+Put this UUID in the `.env` as `VITE_DIRECTUS_ADMIN_ROLE=UUID`

app/src/App.tsx

@@ -156,10 +156,7 @@ function App() {
             embedded={embedded}
             openCollectiveApiKey={config.openCollectiveApiKey}
           >
-            <Permissions
-              api={permissionsApiInstance}
-              adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'
-            ></Permissions>
+            <Permissions api={permissionsApiInstance} adminRole={config.adminRole} />
             {tagsApi && <Tags api={tagsApi}></Tags>}
             <Modal>
               <ModalContent map={map} />

app/src/config/index.ts

@@ -1,6 +1,7 @@
 export const config = {
   apiUrl: String(import.meta.env.VITE_API_URL ?? 'http://localhost:8055/'),
   mapUrl: String(import.meta.env.VITE_MAP_URL ?? 'http://local.development'),
+  adminRole: String(import.meta.env.VITE_DIRECTUS_ADMIN_ROLE ?? ''),
   validateInviteFlowId: String(
     import.meta.env.VITE_VALIDATE_INVITE_FLOW_ID ?? '01d61db0-25aa-4bfa-bc24-c6a8f208a455',
   ),
@@ -10,4 +11,8 @@ export const config = {
   openCollectiveApiKey: String(import.meta.env.VITE_OPEN_COLLECTIVE_API_KEY ?? ''),
 }
 
+if (config.adminRole === '') {
+  throw Error('You must define the Admin roll in the .env file!')
+}
+
 export type Config = typeof config

app/src/pages/MapContainer.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable import/no-relative-parent-imports */
 /* eslint-disable array-callback-return */
 /* eslint-disable new-cap */
@@ -47,7 +46,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
         setApis((current) => [
           ...current,
           {
-            id: layer.id!,
+            id: layer.id,
             api: new itemsApi<Place>('items', layer.id, undefined, {
               _or: [
                 {