Hide builder page and application to users other than builder

changelog/entries/unreleased/bug/builder_hide_pages_to_roles_other_than_builder.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "[Builder] Hide builder application to roles other than Builder",
+    "issue_number": null,
+    "bullet_points": [],
+    "created_at": "2024-07-31"
+}

enterprise/backend/src/baserow_enterprise/role/default_roles.py

@@ -264,11 +264,6 @@ default_roles[settings.BASEROW_PERSONAL_VIEW_LOWEST_ROLE_ALLOWED].append(
 default_roles[VIEWER_ROLE_UID].extend(
     default_roles[NO_ACCESS_ROLE_UID]
     + [
-        ReadPageOperationType,
-        ListPagesBuilderOperationType,
-        OrderPagesBuilderOperationType,
-        ListDomainsBuilderOperationType,
-        OrderDomainsBuilderOperationType,
         ReadWorkspaceOperationType,
         ReadTeamOperationType,
         ListTeamsOperationType,
@@ -326,8 +321,6 @@ default_roles[EDITOR_ROLE_UID].extend(
         RestoreDatabaseRowOperationType,
         ListTeamSubjectsOperationType,
         ReadTeamSubjectOperationType,
-        UpdateBuilderWorkflowActionOperationType,
-        OrderBuilderWorkflowActionOperationType,
     ]
 )
 default_roles[BUILDER_ROLE_UID].extend(
@@ -431,6 +424,13 @@ default_roles[BUILDER_ROLE_UID].extend(
         OrderUserSourcesOperationType,
         AuthenticateUserSourceOperationType,
         LoginUserSourceOperationType,
+        ReadPageOperationType,
+        ListPagesBuilderOperationType,
+        OrderPagesBuilderOperationType,
+        ListDomainsBuilderOperationType,
+        OrderDomainsBuilderOperationType,
+        UpdateBuilderWorkflowActionOperationType,
+        OrderBuilderWorkflowActionOperationType,
     ]
 )
 default_roles[ADMIN_ROLE_UID].extend(

web-frontend/modules/builder/applicationTypes.js

@@ -128,4 +128,18 @@ export class BuilderApplicationType extends ApplicationType {
   isBeta() {
     return true
   }
+
+  isVisible(application) {
+    // We don't want to show a builder application the user doesn't
+    // have the permission to list pages.
+    return this.app.$hasPermission(
+      'builder.list_pages',
+      application,
+      application.workspace.id
+    )
+  }
+
+  getOrder() {
+    return 70
+  }
 }

web-frontend/modules/core/applicationTypes.js

@@ -190,9 +190,17 @@ export class ApplicationType extends Registerable {
   }
 
   /**
-   * Indicates whether the application is visible in the create new application contact.
+   * Indicates whether the given application is visible in the sidebar or dashboard view
    */
-  isVisible(application, context) {
+  isVisible(application) {
+    return true
+  }
+
+  /**
+   * Indicates whether the application can be created with the create new application
+   * context.
+   */
+  canBeCreated() {
     return true
   }
 
@@ -202,4 +210,8 @@ export class ApplicationType extends Registerable {
   isBeta() {
     return false
   }
+
+  getOrder() {
+    return 50
+  }
 }

web-frontend/modules/core/components/application/CreateApplicationContext.vue

@@ -11,17 +11,17 @@
     ></div>
     <ul v-else class="context__menu">
       <li
-        v-for="(applicationType, type) in applications"
-        :key="type"
+        v-for="applicationType in applicationTypes"
+        :key="applicationType.getType()"
         class="context__menu-item"
       >
         <a
-          :ref="'createApplicationModalToggle' + type"
+          :ref="'createApplicationModalToggle' + applicationType.getType()"
           class="context__menu-item-link context__menu-item-link--with-desc"
           :class="{
             disabled: !canCreateCreateApplication,
           }"
-          @click="toggleCreateApplicationModal(type)"
+          @click="toggleCreateApplicationModal(applicationType.getType())"
         >
           <span class="context__menu-item-title">
             <i
@@ -43,7 +43,7 @@
           </div>
         </a>
         <CreateApplicationModal
-          :ref="'createApplicationModal' + type"
+          :ref="'createApplicationModal' + applicationType.getType()"
           :application-type="applicationType"
           :workspace="workspace"
           @created="hide"
@@ -95,12 +95,11 @@ export default {
     },
   },
   computed: {
-    applications() {
-      const applications = this.$registry.getAll('application')
-      return Object.fromEntries(
-        Object.entries(applications).filter(([type, application]) =>
-          application.isVisible(applications, this)
-        )
+    applicationTypes() {
+      const applicationTypes = this.$registry.getOrderedList('application')
+
+      return applicationTypes.filter((applicationType) =>
+        applicationType.canBeCreated()
       )
     },
     canCreateCreateApplication() {

web-frontend/modules/core/components/sidebar/SidebarWithWorkspace.vue

@@ -128,7 +128,8 @@ export default {
             .filter((application) => {
               return (
                 application.workspace.id === this.selectedWorkspace.id &&
-                application.type === applicationType.getType()
+                application.type === applicationType.getType() &&
+                applicationType.isVisible(application)
               )
             })
             .sort((a, b) => a.order - b.order),

web-frontend/modules/core/pages/workspace.vue

@@ -147,17 +147,20 @@
             v-if="orderedApplicationsInSelectedWorkspace.length"
             class="dashboard__applications"
           >
-            <li
+            <template
               v-for="application in orderedApplicationsInSelectedWorkspace"
-              :key="application.id"
             >
-              <DashboardApplication
-                :application="application"
-                :workspace="selectedWorkspace"
-                @click="selectApplication(application)"
-              />
-              <div class="dashboard__application-separator"></div>
-            </li>
+              <li
+                v-if="getApplicationType(application).isVisible(application)"
+                :key="application.id"
+              >
+                <DashboardApplication
+                  :application="application"
+                  :workspace="selectedWorkspace"
+                  @click="selectApplication(application)"
+                />
+                <div class="dashboard__application-separator"></div></li
+            ></template>
           </ul>
           <div v-else class="dashboard__no-application">
             <img
@@ -352,6 +355,9 @@ export default {
     },
   },
   methods: {
+    getApplicationType(application) {
+      return this.$registry.get('application', application.type)
+    },
     selectApplication(application) {
       const type = this.$registry.get('application', application.type)
       type.select(application, this)

web-frontend/modules/database/applicationTypes.js

@@ -154,4 +154,8 @@ export class DatabaseApplicationType extends ApplicationType {
   getApplicationFormComponent() {
     return DatabaseForm
   }
+
+  getOrder() {
+    return 20
+  }
 }