Various UI changes (text change on buttons etc.) #2377

src/components/Records/Record/GeneralInfo.vue

@@ -49,26 +49,46 @@
       <Licence v-if="currentRecord.fairsharingRecord.registry==='Collection'" />
 
       <!-- Duplicate link to graph (see also action menu) -->
-      <div
-        v-if="currentRecord['fairsharingRecord'].hasGraph"
-        class="d-flex flex-row"
+      <span
+        class="d-flex align-baseline width-15-percent-flex"
       >
-        <router-link :to="`/graph/${currentRecord['fairsharingRecord'].id}`">
-          <v-btn
-            class="my-5"
-            color="primary"
-            outlined
-          >
+        <v-tooltip bottom>
+          <template #activator="{ on }">
             <v-icon
-              small
-              left
+              class="mr-2"
+              size="15"
+              v-on="on"
             >
-              fa-project-diagram
+              fa-question-circle
             </v-icon>
-            View Relation Graph&nbsp;
-          </v-btn>
-        </router-link>
-      </div>
+          </template>
+          {{ recordTooltips['graph_button'] }}
+        </v-tooltip>
+        <v-btn
+          class="my-5"
+          color="primary"
+          outlined
+          style="max-width: 250px"
+          :disabled="graphButtonDisabled()"
+          @click="loadGraph"
+        >
+          <v-icon
+            small
+            left
+          >
+            fa-project-diagram
+          </v-icon>
+          <span
+            v-if="currentRecord.fairsharingRecord.hasGraph"
+          >
+            View Relation Graph
+          </span>
+          <span v-else>
+            No Graph Available
+          </span>
+        </v-btn>
+
+      </span>
 
       <!--How to cite & publication for record named Citations-->
       <Citations />
@@ -141,11 +161,24 @@ export default {
   },
   computed: {
     ...mapState('record', ["currentRecord"]),
+    ...mapState('editor', ['recordTooltips']),
     ...mapGetters("record", ["getField"])
   },
   methods: {
     callRequestOwnership() {
       this.$emit('requestOwnership')
+    },
+    loadGraph() {
+      let _module = this;
+      if(_module.currentRecord.fairsharingRecord.hasGraph) {
+        _module.$router.push({path: `/graph/${_module.currentRecord['fairsharingRecord'].id}`})
+      }
+    },
+    graphButtonDisabled() {
+      if(this.currentRecord.fairsharingRecord.hasGraph) {
+        return false;
+      }
+      return true;
     }
   }
 }

src/data/recordTooltips.json

@@ -7,6 +7,7 @@
     "description": "Free text summary of the resource and its purpose.",
     "domains": "The domains for this record; domains tend to be more fine-grained terms relating to the scope of the resource.",
     "fairsharing_registry": "The name of the registry to which this record belongs; one of Standards, Policies, or Databases.",
+    "graph_button": "Relation graphs are available for all records unless there are no relations or the graph has not yet been generated.",
     "homepage": "The homepage of the resource. If there is no official homepage, a related URL may be used. For policies, the resource homepage must be the policy document itself.",
     "how_to_cite": "How to cite this FAIRsharing record.",
     "maintainers": "A list of developers of this resource who have claimed ownership of the record both for attribution and to perform updates to the record.",

src/views/Records/Record.vue

@@ -688,7 +688,12 @@ export default {
           }
         },
         {
-          name: function() { return "View Relation Graph" },
+          name: function() {
+            if (_module.currentRecord['fairsharingRecord'].hasGraph) {
+              return "View Relation Graph"
+            }
+            return "No graph available"
+          },
           isDisabled: function(){
             if (_module.currentRecord['fairsharingRecord'].hasGraph) {
               return false;

tests/unit/components/Records/Record/GeneralInfo.spec.js

@@ -11,6 +11,16 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 const vuetify = new Vuetify();
 
+let editor = {
+    namespaced: true,
+    state: {
+        recordTooltips: {
+            graph_button: "graph button tooltip.",
+        }
+    }
+}
+
+
 const router = new VueRouter(),
     $router = { push: jest.fn() };
 
@@ -20,7 +30,8 @@ record.state.currentRecord.fairsharingRecord = {
 
 const $store = new Vuex.Store({
     modules: {
-        record:Record
+        record: Record,
+        editor: editor
     }});
 
 describe("GeneralInfo.vue", function(){

tests/unit/views/Records/Record.spec.js

@@ -234,7 +234,7 @@ describe("Record.vue", function () {
     expect(wrapper.vm.buttons[1].isDisabled()).toBe(false);
     expect(wrapper.vm.buttons[2].name()).toEqual("Watch record");
     expect(wrapper.vm.buttons[2].isDisabled()).toBe(false);
-    expect(wrapper.vm.buttons[3].name()).toEqual("View Relation Graph");
+    expect(wrapper.vm.buttons[3].name().toLowerCase()).toEqual("no graph available");
     expect(wrapper.vm.buttons[3].isDisabled()).toBe(true);
     expect(wrapper.vm.buttons[4].name()).toEqual("View record history");
     expect(wrapper.vm.buttons[4].isDisabled()).toBe(false);