Present instances scheduled for expiry

src/components/Pages/Dashboard/Components/WikiDashboardListDialogContent.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-card>
+    <v-card-title>Status information</v-card-title>
+    <v-card-text v-if="!hasPendingReview">
+      Under our <ExternalLink :url="`https://www.wikibase.cloud/hosting-policy`">hosting policy</ExternalLink>, Wikibases are temporary by default. Unless submitted for review, your Wikibase {{ wikiDomain }} will be taken offline on {{ formattedActiveFromDate }}. If you want to keep it online, please <ExternalLink :url="`https://www.wikibase.cloud/wikis/manage/${this.wikiId}/review`">submit it for review</ExternalLink>.
+    </v-card-text>
+    <v-divider />
+    <v-card-actions class="justify-end">
+      <v-btn
+        color="primary"
+        text
+        @click='close'
+      >Close</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import ExternalLink from '../../../Components/ExternalLink.vue'
+
+export default {
+  name: 'WikiDashboardListDialog',
+  components: {
+    ExternalLink,
+  },
+  props: {
+    hasPendingReview: {
+      type: Boolean,
+      required: false,
+    },
+    formattedActiveFromDate: {
+      type: String,
+      required: true,
+    },
+    wikiDomain: {
+      type: String,
+      required: true,
+    },
+    wikiId: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    close () {
+      this.$emit('close')
+    },
+  },
+}
+</script>

src/components/Pages/Dashboard/Components/WikiDashboardListElement.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div>
+      {{wikiTitle}}
+      <v-hover v-slot="{ hover }">
+        <v-chip
+          v-if="!hasPendingReview"
+          @click="expandDialog = true"
+          class="ml-3 px-2"
+          color="warning"
+          :outlined="!hover"
+          small
+        >
+          <v-icon class="mr-1" small>mdi-clock-outline</v-icon>
+          Expiring soon
+        </v-chip>
+        <v-chip
+          v-else
+          class="ml-3 px-2"
+          color="primary"
+          :outlined="!hover"
+          small
+        >
+          <v-icon class="mr-1" small>mdi-clock-outline</v-icon>
+          Pending review
+        </v-chip>
+      </v-hover>
+    </div>
+    <div v-if="!hasPendingReview" class="mt-2">
+      <span class="warning--text body-2">Will expire on {{ formattedActiveFromDate }}</span>
+    </div>
+    <v-dialog value="true" width="564" v-model="expandDialog">
+      <WikiDashboardListDialogContent
+        :hasPendingReview="hasPendingReview"
+        :formattedActiveFromDate="formattedActiveFromDate"
+        :wikiDomain="wikiDomain"
+        :wikiId="wikiId"
+        @close="expandDialog=false" />
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import WikiDashboardListDialogContent from './WikiDashboardListDialogContent.vue'
+
+export default {
+  name: 'WikiDashboardListElement',
+  components: {
+    WikiDashboardListDialogContent,
+  },
+  props: {
+    wikiTitle: {
+      type: String,
+      required: true,
+    },
+    wikiDomain: {
+      type: String,
+      required: true,
+    },
+    wikiId: {
+      type: Number,
+      required: true,
+    },
+    suspensionActiveFrom: {
+      type: String,
+      required: false,
+    },
+    hasPendingReview: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  computed: {
+    formattedActiveFromDate: function () {
+      const date = new Date(this.suspensionActiveFrom)
+      return date.toLocaleDateString(
+        'en-GB',
+        { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' },
+      )
+    },
+  },
+  data () {
+    return {
+      expandDialog: false,
+    }
+  },
+}
+</script>

src/components/Pages/Dashboard.vue → src/components/Pages/Dashboard/Dashboard.vue

@@ -2,25 +2,36 @@
   <v-main>
     <v-container class="fill-height" fluid >
       <v-row>
-        <v-col cols="12" lg="4" md="4">
+        <v-col cols="12" lg="4" md="6">
           <v-container fluid class="rightpaddingonly">
             <v-row>
               <v-col>
                 <v-container>
-                    <h3 class="ml-4">Your Wikibases</h3>
-                    <v-list v-if="currentUser.verified == 1">
-                      <v-list-item v-for="wiki in wikis" :key="wiki.id" :wiki="wiki">
-                        <v-list-item-content>
-                          <v-list-item-title>{{wiki.sitename}}</v-list-item-title>
-                        </v-list-item-content>
-                            <v-list-item-icon>
-                              <v-btn icon small icontarget="_blank" rel="noopener noreferrer" :href="'//' + wiki.domain"><v-icon>mdi-home</v-icon></v-btn>
-                            </v-list-item-icon>
-                            <v-list-item-icon>
-                              <v-btn icon small :to="{ name: 'TabSettingsProfileInner', params: { id: wiki.id } }"><v-icon>mdi-cog</v-icon></v-btn>
-                            </v-list-item-icon>
-                      </v-list-item>
-                    </v-list>
+                  <h3 class="ml-4">Your Wikibases</h3>
+                  <v-list v-if="currentUser.verified == 1">
+                    <v-list-item v-for="wiki in wikis" :key="wiki.id" :wiki="wiki">
+                      <v-list-item-content>
+                        <v-list-item-title>
+                          <WikiDashboardListElement
+                            :wikiTitle="wiki.sitename"
+                            :wikiDomain="wiki.domain"
+                            :wikiId="wiki.id"
+                            :suspensionReason="wiki.latest_suspension.reason"
+                            :suspensionActiveFrom="wiki.latest_suspension.active_from"
+                            :hasPendingReview="wiki.has_pending_review"
+                          />
+                        </v-list-item-title>
+                      </v-list-item-content>
+
+                      <v-list-item-icon>
+                        <v-btn icon small icontarget="_blank" rel="noopener noreferrer" :href="'//' + wiki.domain"><v-icon>mdi-home</v-icon></v-btn>
+                      </v-list-item-icon>
+                      <v-list-item-icon>
+                        <v-btn icon small :to="{ name: 'TabSettingsProfileInner', params: { id: wiki.id } }"><v-icon>mdi-cog</v-icon></v-btn>
+                      </v-list-item-icon>
+                    </v-list-item>
+                  </v-list>
+
                   <v-container v-if="status == 'loading' && count == 0">
                     <v-container class="d-flex justify-center">
                       <v-progress-circular indeterminate color="primary"></v-progress-circular>
@@ -41,7 +52,7 @@
             </v-row>
           </v-container>
         </v-col>
-        <v-col cols="12" lg="6" md="5" class="mt-3">
+        <v-col cols="12" lg="6" md="4" class="mt-3">
           <h3>Welcome to wikibase.cloud</h3>
           <p>You can create and manage wikis from this central dashboard.</p>
           <p>Check out our <a href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud">cloud service documentation</a> as well as general documentation on <a href="https://www.mediawiki.org/wiki/Wikibase">Wikibase</a>.</p>
@@ -52,8 +63,13 @@
 </template>
 
 <script>
+import WikiDashboardListElement from './Components/WikiDashboardListElement'
+
 export default {
   name: 'Dashboard',
+  components: {
+    WikiDashboardListElement,
+  },
   data () {
     return {
       stats: [

src/router/index.js

@@ -3,7 +3,7 @@ import Router from 'vue-router'
 import Store from './../store'
 
 import Home from '@/components/Pages/Home/Home'
-import Dashboard from '@/components/Pages/Dashboard'
+import Dashboard from '@/components/Pages/Dashboard/Dashboard'
 import About from '@/components/Pages/About'
 import Contact from '@/components/Pages/Contact'
 import CreateAccount from '@/components/Pages/CreateAccount'

tests/unit/WikiDashboardListElement.expiringSoon.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils'
+import WikiDashboardListElement from '@/components/Pages/Dashboard/Components/WikiDashboardListElement.vue'
+require('./boilerplate.js')
+
+describe('WikiDashboardListElement.vue', () => {
+  it('renders a Wiki List Element with expiry notice', () => {
+    const today = new Date()
+    const suspensionDay = today.getDate() + 1
+    const suspensionActiveFromDate = new Date()
+    suspensionActiveFromDate.setDate(suspensionDay)
+
+    const wrapper = shallowMount(WikiDashboardListElement, {
+      propsData: {
+        wikiTitle: 'Foobar',
+        wikiDomain: 'foobar.wikibase.cloud',
+        wikiId: 1,
+        suspensionActiveFrom: suspensionActiveFromDate.toString(),
+        hasPendingReview: false,
+      },
+    })
+
+    expect(wrapper.text()).toMatch('Expiring soon')
+  })
+})

tests/unit/WikiDashboardListElement.pendingReview.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils'
+import WikiDashboardListElement from '@/components/Pages/Dashboard/Components/WikiDashboardListElement.vue'
+require('./boilerplate.js')
+
+describe('WikiDashboardListElement.vue', () => {
+  it('renders a Wiki List Element with expiry notice', () => {
+    const today = new Date()
+    const suspensionDay = today.getDate() + 1
+    const suspensionActiveFromDate = new Date()
+    suspensionActiveFromDate.setDate(suspensionDay)
+
+    const wrapper = shallowMount(WikiDashboardListElement, {
+      propsData: {
+        wikiTitle: 'Foobar',
+        wikiDomain: 'foobar.wikibase.cloud',
+        wikiId: 1,
+        suspensionActiveFrom: suspensionActiveFromDate.toString(),
+        hasPendingReview: true,
+      },
+    })
+
+    expect(wrapper.text()).toMatch('Pending review')
+  })
+})