Merge pull request #48 from icefoganalytics/issue-25/build-datasets-table-request-access-button-action

Build Datasets Table Request Access And Subscribe Buttons Actions

Author: klondikemarlen

api/src/controllers/qa-scenarios/apply-random-access-grants-controller.ts

@@ -1,14 +1,21 @@
 import { faker } from "@faker-js/faker"
 import { CreationAttributes } from "sequelize"
 
-import { Dataset, AccessGrant } from "@/models"
+import { Dataset, AccessGrant, AccessRequest } from "@/models"
 import { AccessTypes, GrantLevels } from "@/models/access-grant"
 
 import BaseController from "@/controllers/base-controller"
 
+const AVAILABLE_ACCESS_TYPES = [
+  AccessTypes.OPEN_ACCESS,
+  AccessTypes.SELF_SERVE_ACCESS,
+  AccessTypes.SCREENED_ACCESS,
+]
+
 export class ApplyRandomAccessGrantsController extends BaseController {
   async create() {
     try {
+      await AccessRequest.destroy({ where: {}, force: true })
       await AccessGrant.destroy({ where: {}, force: true })
       await this.applyRandomAccessGrantsToDatasets()
       return this.response
@@ -36,7 +43,7 @@ export class ApplyRandomAccessGrantsController extends BaseController {
           creatorId: dataset.ownerId,
           // TODO: supportId: faker.helpers.arrayElement(users - dataset.owner).id,
           grantLevel: randomGrantLevel,
-          accessType: faker.helpers.arrayElement(Object.values(AccessTypes)),
+          accessType: faker.helpers.arrayElement(AVAILABLE_ACCESS_TYPES),
           isProjectDescriptionRequired: faker.datatype.boolean(),
         })
       )

api/src/middlewares/authorization-middleware.ts

@@ -11,6 +11,7 @@ export type AuthorizationRequest = JwtRequest & {
 async function findOrCreateUserFromAuth0Token(token: string): Promise<User> {
   const { auth0Subject, email, firstName, lastName } = await auth0Integration.getUserInfo(token)
 
+  // TODO: move to ensure user service
   const [user, created] = await User.findOrCreate({
     where: { auth0Subject },
     defaults: {

web/src/components/access-requests/AccessRequestCreateDialog.vue

@@ -8,7 +8,7 @@
         color="primary"
         v-bind="dialogProps"
       >
-        {{ accessType === AccessTypes.SELF_SERVE_ACCESS ? "Subscribe" : "Request Access" }}
+        {{ panelAndButtonLabel }}
       </v-btn>
     </template>
     <v-form
@@ -17,7 +17,7 @@
       @submit.prevent="createAndClose"
     >
       <v-card :loading="isLoading">
-        <v-card-title class="text-h5"> Request Access </v-card-title>
+        <v-card-title class="text-h5"> {{ panelAndButtonLabel }} </v-card-title>
 
         <v-card-text v-if="isNil(accessRequest)">
           <v-skeleton-loader type="card" />
@@ -96,7 +96,7 @@
             type="submit"
             variant="elevated"
           >
-            Request
+            {{ submitButtonLabel }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -121,6 +121,7 @@ import UserGroupAutocomplete, {
   UserGroupTypes,
 } from "@/components/user-groups/UserGroupAutocomplete.vue"
 import { AccessTypes } from "@/api/access-grants-api"
+import { computed } from "vue"
 
 const props = withDefaults(
   defineProps<{
@@ -150,11 +151,19 @@ const accessRequest = ref<Partial<AccessRequest>>({
 const router = useRouter()
 const route = useRoute()
 
-const showDialog = ref(route.query.showCreate === "true")
+const showDialog = ref(route.query.showCreateRequest === "true")
 const form = ref<InstanceType<typeof VForm> | null>(null)
 const isLoading = ref(false)
 const isValid = ref(false)
 
+// TODO: consider breaking the dialog into two separate components
+const panelAndButtonLabel = computed(() => {
+  return props.accessType === AccessTypes.SELF_SERVE_ACCESS ? "Subscribe" : "Request Access"
+})
+const submitButtonLabel = computed(() => {
+  return props.accessType === AccessTypes.SELF_SERVE_ACCESS ? "Subscribe" : "Request"
+})
+
 watch(
   () => [props.datasetId, props.accessGrantId, props.requestorId],
   () => {
@@ -167,13 +176,13 @@ watch(
   () => showDialog.value,
   (value) => {
     if (value) {
-      if (route.query.showCreate === "true") {
+      if (route.query.showCreateRequest === "true") {
         return
       }
 
-      router.push({ query: { showCreate: "true" } })
+      router.push({ query: { showCreateRequest: "true" } })
     } else {
-      router.push({ query: { showCreate: undefined } })
+      router.push({ query: { showCreateRequest: undefined } })
     }
   }
 )

web/src/components/datasets/DatasetsTable.vue

@@ -35,12 +35,14 @@
     <template #item.actions="{ value: action, item: { slug } }">
       <RequestAccessButton
         v-if="action === DatasetTableActions.REQUEST_ACCESS"
+        :slug="slug"
         class="action-buttons"
         @mouseover="disableRowHighlight"
         @mouseleave="removeDisableRowHighlight"
       />
       <SubscribeToDatasetButton
         v-else-if="action === DatasetTableActions.SUBSCRIBE"
+        :slug="slug"
         class="action-buttons"
         @mouseover="disableRowHighlight"
         @mouseleave="removeDisableRowHighlight"

web/src/components/datasets/datasets-table/RequestAccessButton.vue

@@ -2,14 +2,16 @@
   <v-btn
     color="primary"
     variant="outlined"
-    @click="requestAccess"
+    :to="{
+      name: 'DatasetDescriptionReadPage',
+      params: { slug },
+      query: { showCreateRequest: 'true' },
+    }"
   >
     Request Access
   </v-btn>
 </template>
 
 <script lang="ts" setup>
-function requestAccess() {
-  alert("TODO: Requesting access")
-}
+defineProps<{ slug: string }>()
 </script>

web/src/components/datasets/datasets-table/SubscribeToDatasetButton.vue

@@ -2,14 +2,16 @@
   <v-btn
     color="primary"
     variant="outlined"
-    @click="subscribeToDataset"
+    :to="{
+      name: 'DatasetDescriptionReadPage',
+      params: { slug },
+      query: { showCreateRequest: 'true' },
+    }"
   >
     Subscribe
   </v-btn>
 </template>
 
 <script lang="ts" setup>
-function subscribeToDataset() {
-  alert("TODO: Subscribe to dataset")
-}
+defineProps<{ slug: string }>()
 </script>

web/src/components/qa-scenarios/QaScenariosCard.vue

@@ -51,14 +51,16 @@ const ORDERED_ROLE_TYPES = [
   RoleTypes.SYSTEM_ADMIN,
 ]
 
-const nextRoleType = computed<RoleTypes | null>(() => {
+const currentRoleType = computed<RoleTypes | null>(() => {
   if (isNil(currentUser.value)) return null
 
-  const { roleTypes } = currentUser.value
-  const currentRoleType = roleTypes[0]
-  if (isNil(currentRoleType)) return null
+  return currentUser.value.roleTypes[0] || null
+})
+
+const nextRoleType = computed<RoleTypes | null>(() => {
+  if (isNil(currentRoleType.value)) return null
 
-  const currentIndex = ORDERED_ROLE_TYPES.indexOf(currentRoleType)
+  const currentIndex = ORDERED_ROLE_TYPES.indexOf(currentRoleType.value)
   const nextIndex = (currentIndex + 1) % 4
   return ORDERED_ROLE_TYPES[nextIndex]
 })
@@ -78,7 +80,9 @@ const scenarios = computed<Scenario[]>(() => [
   },
   {
     url: "/api/qa-scenarios/cycle-user-role-type",
-    label: `Cycle User Type To ${nextRoleType.value || "..."}`,
+    label: `Cycle User Type From "${currentRoleType.value || "..."}" To "${
+      nextRoleType.value || "..."
+    }"`,
   },
 ])