Feature flag and initial setup for My Profile page (#1943)

* Sets up flag for profile features

* Applies flag to my-profile route

* Hides the tab nav in the Layout component when routing to /my-profile

* fixes formatting in Layout.vue

* Adds view MyProfile.vue

* Fixes terraform formatting

* changes hideTabs to showTabs and updates logic

* adds static content and styling

* gets logged in user and displays user details dynamically

* fixes formatting errors

packages/client/public/deploy-config.js

@@ -21,4 +21,5 @@ window.APP_CONFIG.overrideFeatureFlag = (flagName, overrideValue) => {
 //  configuring the `website_feature_flags` input variable in Terraform (see `terraform/*.tfvars`).
 window.APP_CONFIG.featureFlags = {
   useNewTable: true,
+  myProfileEnabled: true
 };

packages/client/src/components/Layout.vue

@@ -30,7 +30,7 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
-    <b-col cols="12">
+    <b-col cols="12" v-if="showTabs">
       <b-nav tabs justified fill style="margin-top: 20px">
           <b-nav-item to="/my-grants" exact exact-active-class="active">My Grants</b-nav-item>
           <b-nav-item to="/grants" exact exact-active-class="active">Browse Grants</b-nav-item>
@@ -87,6 +87,9 @@ export default {
     useNewGrantsTable() {
       return useNewGrantsTable();
     },
+    showTabs() {
+      return !(this.$route.meta.hideLayoutTabs === true);
+    },
   },
   methods: {
     logout(e) {

packages/client/src/helpers/featureFlags/index.js

@@ -6,3 +6,7 @@ import { getFeatureFlags } from './utils';
 export function useNewGrantsTable() {
   return getFeatureFlags().useNewTable === true;
 }
+
+export function myProfileEnabled() {
+  return getFeatureFlags().myProfileEnabled === true;
+}

packages/client/src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import { useNewGrantsTable } from '@/helpers/featureFlags';
+import { myProfileEnabled, useNewGrantsTable } from '@/helpers/featureFlags';
 import Login from '../views/Login.vue';
 import Layout from '../components/Layout.vue';
 import ArpaAnnualPerformanceReporter from '../views/ArpaAnnualPerformanceReporter.vue';
@@ -115,6 +115,16 @@ const routes = [
           requiresAuth: true,
         },
       },
+      {
+        path: '/my-profile',
+        name: 'myProfile',
+        component: () => import('../views/MyProfile.vue'),
+        meta: {
+          requiresAuth: true,
+          requiresMyProfileEnabled: true,
+          hideLayoutTabs: true,
+        },
+      },
     ],
   },
   {
@@ -143,7 +153,9 @@ router.beforeEach((to, from, next) => {
   } else if (to.name === 'login' && authenticated) {
     next({ name: 'grants' });
   } else if (to.name === 'not-found'
-  || (to.meta.enabledWithOldGrantsTableOnly && useNewGrantsTable())) {
+    || (to.meta.enabledWithOldGrantsTableOnly && useNewGrantsTable())
+    || (to.meta.requiresMyProfileEnabled && !myProfileEnabled())
+  ) {
     if (authenticated) {
       next({ name: 'grants' });
     } else {

packages/client/src/views/MyProfile.vue

@@ -0,0 +1,48 @@
+<template>
+  <section style="max-width: 516px;" class="mx-auto my-5 px-2">
+    <h2>My Profile</h2>
+    <b-row style="margin-top: 4rem;">
+      <b-col>
+        <b-avatar :text="initials" size="5rem"></b-avatar>
+      </b-col>
+      <b-col cols="7">
+        <p class="mb-2 h6"><b>{{ name }}</b></p>
+        <p class="mb-2">{{ email }}</p>
+        <p class="mb-2">{{ agency }}</p>
+      </b-col>
+      <b-col class="text-end">
+        <b-button variant="primary" size="md">
+          <b-icon icon="pencil-fill" scale="0.8"></b-icon>
+          <span class="ml-1">Edit</span>
+        </b-button>
+      </b-col>
+    </b-row>
+  </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({
+      loggedInUser: 'users/loggedInUser',
+    }),
+    name() {
+      return this.loggedInUser.name;
+    },
+    email() {
+      return this.loggedInUser.email;
+    },
+    agency() {
+      return this.loggedInUser.agency_name;
+    },
+    initials() {
+      const fullNameArr = this.name.split(' ');
+      const firstName = fullNameArr.at(0);
+      const lastName = fullNameArr.at(-1);
+      return (firstName[0] + lastName[0]).toUpperCase();
+    },
+  },
+};
+</script>

terraform/prod.tfvars

@@ -39,7 +39,8 @@ website_managed_waf_rules = {
   }
 }
 website_feature_flags = {
-  useNewTable = true,
+  useNewTable      = true,
+  myProfileEnabled = false
 }
 
 // ECS Cluster

terraform/sandbox.tfvars

@@ -14,7 +14,8 @@ website_enabled           = true
 website_domain_name       = "sandbox.grants.usdr.dev"
 website_managed_waf_rules = {}
 website_feature_flags = {
-  useNewTable = true,
+  useNewTable      = true,
+  myProfileEnabled = true
 }
 
 // ECS Cluster

terraform/staging.tfvars

@@ -36,7 +36,8 @@ website_managed_waf_rules = {
   }
 }
 website_feature_flags = {
-  useNewTable = true
+  useNewTable      = true,
+  myProfileEnabled = true
 }
 
 // ECS Cluster