ietf-tools · rjsparks · Aug 7, 2024 · Jun 20, 2024 · Jul 9, 2024 · Jul 9, 2024
diff --git a/client/Embedded.vue b/client/Embedded.vue
@@ -1,12 +1,13 @@
 <template lang="pug">
 n-theme
-  n-message-provider
-    component(:is='currentComponent', :component-id='props.componentId')
+  n-notification-provider
+    n-message-provider
+      component(:is='currentComponent', :component-id='props.componentId')
 </template>
 
 <script setup>
 import { defineAsyncComponent, markRaw, onMounted, ref } from 'vue'
-import { NMessageProvider } from 'naive-ui'
+import { NMessageProvider, NNotificationProvider } from 'naive-ui'
 
 import NTheme from './components/n-theme.vue'
 
@@ -15,6 +16,7 @@ import NTheme from './components/n-theme.vue'
 const availableComponents = {
   ChatLog: defineAsyncComponent(() => import('./components/ChatLog.vue')),
   Polls: defineAsyncComponent(() => import('./components/Polls.vue')),
+  Status: defineAsyncComponent(() => import('./components/Status.vue')),
 }
 
 // PROPS

diff --git a/client/components/Status.vue b/client/components/Status.vue
@@ -0,0 +1,83 @@
+<script>
+  import { h, defineComponent } from 'vue'
+  import { useNotification } from 'naive-ui'
+  import { localStorageWrapper } from '../shared/local-storage-wrapper';
+  import { JSONWrapper } from '../shared/json-wrapper';
+  import { STATUS_STORAGE_KEY, generateStatusTestId } from '../shared/status-common'
+
+  const getDismissedStatuses = () => {
+    const jsonString = localStorageWrapper.getItem(STATUS_STORAGE_KEY)
+    const jsonValue = JSONWrapper.parse(jsonString, [])
+    if(Array.isArray(jsonValue)) {
+      return jsonValue;
+    }
+    return [];
+  }
+
+  const dismissStatus = (id) => {
+    const dissmissed = [id, ...getDismissedStatuses()];
+    localStorageWrapper.setItem(STATUS_STORAGE_KEY, JSONWrapper.stringify(dissmissed));
+    return true;
+  }
+
+  let notificationInstances = {} // keyed by status.id
+  let notification
+
+  const pollStatusAPI = () => {
+    fetch('/status/latest.json')
+        .then(resp => resp.json())
+        .then(status => {
+            if(status === null || status.hasMessage === false) {
+                console.info("No status message")
+                return
+            }
+            const dismissedStatuses = getDismissedStatuses()
+            if(dismissedStatuses.includes(status.id)) {
+              console.info(`Not showing site status ${status.id} because it was already dismissed. Dismissed Ids:`, dismissedStatuses)
+              return
+            }
+
+            const isSameStatusPage = Boolean(document.querySelector(`[data-status-id="${status.id}"]`))
+
+            if(isSameStatusPage) {
+              console.info(`Not showing site status ${status.id} because we're on the target page`)
+              return
+            }
+
+            if(notificationInstances[status.id]) {
+              console.info(`Not showing site status ${status.id} because it's already been displayed`)
+              return
+            }
+
+            notificationInstances[status.id] = notification.create({
+              title: status.title,
+              content: status.body,
+              meta: `${status.date}`,
+              action: () =>
+                h(
+                  'a',
+                  {
+                    'data-testid': generateStatusTestId(status.id),
+                    href: status.url,
+                    'aria-label': `Read more about ${status.title}`
+                  },
+                  "Read more"
+                ),
+              onClose: () => {
+                return dismissStatus(status.id)
+              }
+            })
+        })
+        .catch(e => {
+            console.error(e)
+        })
+  }
+
+
+  export default defineComponent({
+    setup() {
+      notification = useNotification()
+      pollStatusAPI(notification)
+    }
+  })
+</script>
diff --git a/client/index.html b/client/index.html
@@ -12,6 +12,7 @@
     <link href="https://static.ietf.org/fonts/noto-sans-mono/import.css" rel="stylesheet">
   </head>
   <body>
+    <div class="vue-embed" data-component="Status"></div>
     <div class="pt-3 container-fluid">
       <div class="row">
         <div class="col mx-lg-3" id="content">
@@ -20,5 +21,6 @@
       </div>
     </div>
     <script type="module" src="./main.js"></script>
+    <script type="module" src="./embedded.js"></script>
   </body>
 </html>
diff --git a/client/shared/json-wrapper.js b/client/shared/json-wrapper.js
@@ -0,0 +1,18 @@
+export const JSONWrapper = {
+  parse(jsonString, defaultValue) {
+    if(typeof jsonString !== "string") return defaultValue
+    try {
+      return JSON.parse(jsonString);
+    } catch (e) {
+      console.error(e);
+    }
+    return defaultValue
+  },
+  stringify(data) {
+    try {
+      return JSON.stringify(data);
+    } catch (e) {
+      console.error(e)
+    }
+  },
+}
diff --git a/client/shared/local-storage-wrapper.js b/client/shared/local-storage-wrapper.js
@@ -0,0 +1,42 @@
+
+/*
+ *  DEVELOPER NOTE
+ *
+ *  Some browsers can block storage (localStorage, sessionStorage)
+ *  access for privacy reasons, and all browsers can have storage
+ *  that's full, and then they throw exceptions.
+ *
+ *  See https://michalzalecki.com/why-using-localStorage-directly-is-a-bad-idea/
+ *
+ *  Exceptions can even be thrown when testing if localStorage
+ *  even exists. This can throw:
+ * 
+ *      if (window.localStorage)
+ *
+ *  Also localStorage/sessionStorage can be enabled after DOMContentLoaded
+ *  so we handle it gracefully.
+ *
+ *  1) we need to wrap all usage in try/catch
+ *  2) we need to defer actual usage of these until
+ *     necessary,
+ *    
+ */
+
+export const localStorageWrapper = {
+  getItem: (key) => {
+    try {
+      return localStorage.getItem(key)
+    } catch (e) {
+      console.error(e); 
+    }
+    return null;
+  },
+  setItem: (key, value) => {
+    try {
+      return localStorage.setItem(key, value)
+    } catch (e) {
+      console.error(e); 
+    }
+    return;
+  },
+}
diff --git a/client/shared/status-common.js b/client/shared/status-common.js
@@ -0,0 +1,5 @@
+// Used in Playwright Status and components
+
+export const STATUS_STORAGE_KEY = "status-dismissed"
+
+export const generateStatusTestId = (id) => `status-${id}`
diff --git a/ietf/settings.py b/ietf/settings.py
@@ -479,6 +479,7 @@ def skip_unreadable_post(record):
     'ietf.release',
     'ietf.review',
     'ietf.stats',
+    'ietf.status',
     'ietf.submit',
     'ietf.sync',
     'ietf.utils',

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
@@ -1188,3 +1188,10 @@ blockquote {
     padding-left: 1rem;
     border-left: solid 1px var(--bs-body-color);
 }
+
+iframe.status {
+    background-color:transparent;
+    border:none;
+    width:100%;
+    height:3.5em;
+}
diff --git a/ietf/status/__init__.py b/ietf/status/__init__.py
diff --git a/ietf/status/admin.py b/ietf/status/admin.py
@@ -0,0 +1,16 @@
+from datetime import datetime
+from django.contrib import admin
+from django.template.defaultfilters import slugify
+from .models import Status
+
+class StatusAdmin(admin.ModelAdmin):
+    list_display = ['title', 'body', 'active', 'date', 'by', 'page']
+    raw_id_fields = ['by']
+
+    def get_changeform_initial_data(self, request):
+        date = datetime.now()
+        return {
+            "slug": slugify(f"{date.year}-{date.month}-{date.day}-"),
+        }
+
+admin.site.register(Status, StatusAdmin)
diff --git a/ietf/status/apps.py b/ietf/status/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class StatusConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "ietf.status"
diff --git a/ietf/status/migrations/0001_initial.py b/ietf/status/migrations/0001_initial.py
@@ -0,0 +1,48 @@
+# Generated by Django 4.2.13 on 2024-06-24 04:24
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ("person", "0002_alter_historicalperson_ascii_and_more"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="Status",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("date", models.DateField()),
+                (
+                    "active",
+                    models.BooleanField(
+                        default=True, help_text="Only active messages will be shown"
+                    ),
+                ),
+                (
+                    "message",
+                    models.CharField(help_text="Your status message.", max_length=255),
+                ),
+                ("url", models.URLField()),
+                (
+                    "by",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE, to="person.person"
+                    ),
+                ),
+            ],
+        ),
+    ]
diff --git a/ietf/status/migrations/0002_rename_message_status_body_remove_status_url_and_more.py b/ietf/status/migrations/0002_rename_message_status_body_remove_status_url_and_more.py
@@ -0,0 +1,48 @@
+# Generated by Django 4.2.13 on 2024-06-30 21:51
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("status", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="status",
+            old_name="message",
+            new_name="body",
+        ),
+        migrations.RemoveField(
+            model_name="status",
+            name="url",
+        ),
+        migrations.AddField(
+            model_name="status",
+            name="page",
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name="status",
+            name="slug",
+            field=models.SlugField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name="status",
+            name="status_id",
+            field=models.IntegerField(null=True),
+        ),
+        migrations.AddField(
+            model_name="status",
+            name="title",
+            field=models.CharField(default="", max_length=255),
+            preserve_default=False,
+        ),
+        migrations.AlterField(
+            model_name="status",
+            name="date",
+            field=models.DateTimeField(auto_now_add=True),
+        ),
+    ]
diff --git a/ietf/status/migrations/0003_remove_status_id_alter_status_status_id.py b/ietf/status/migrations/0003_remove_status_id_alter_status_status_id.py
@@ -0,0 +1,22 @@
+# Generated by Django 4.2.13 on 2024-06-30 21:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("status", "0002_rename_message_status_body_remove_status_url_and_more"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="status",
+            name="id",
+        ),
+        migrations.AlterField(
+            model_name="status",
+            name="status_id",
+            field=models.IntegerField(primary_key=True, serialize=False),
+        ),
+    ]
diff --git a/ietf/status/migrations/0004_remove_status_status_id_status_id.py b/ietf/status/migrations/0004_remove_status_status_id_status_id.py
@@ -0,0 +1,28 @@
+# Generated by Django 4.2.13 on 2024-07-01 01:07
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("status", "0003_remove_status_id_alter_status_status_id"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="status",
+            name="status_id",
+        ),
+        migrations.AddField(
+            model_name="status",
+            name="id",
+            field=models.BigAutoField(
+                auto_created=True,
+                primary_key=True,
+                serialize=False,
+                verbose_name="ID",
+            ),
+            preserve_default=False,
+        ),
+    ]