Migrate the offline alert bar in Settings from Vuetify to KDS

Author: AadarshM07

contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue

@@ -17,10 +17,7 @@
         </VTab>
       </template>
     </AppBar>
-    <OfflineText
-      toolbar
-      :offset="112"
-    />
+    <StudioOfflineAlert :offset="104" />
     <VContent>
       <VContainer
         fluid
@@ -49,12 +46,12 @@
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
   import AppBar from 'shared/views/AppBar';
   import { routerMixin } from 'shared/mixins';
-  import OfflineText from 'shared/views/OfflineText';
+  import StudioOfflineAlert from 'shared/views/StudioOfflineAlert';
   import PolicyModals from 'shared/views/policies/PolicyModals';
 
   export default {
     name: 'SettingsIndex',
-    components: { GlobalSnackbar, AppBar, OfflineText, PolicyModals },
+    components: { GlobalSnackbar, AppBar, StudioOfflineAlert, PolicyModals },
     mixins: [routerMixin],
     computed: {
       ...mapState({

contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue

@@ -0,0 +1,90 @@
+<template>
+
+  <KTransition kind="component-vertical-slide-out-in">
+    <div
+      v-if="offline && !libraryMode"
+      class="studio-offline-alert"
+      :style="computedstyle"
+      data-test="studio-offline-alert"
+    >
+      <KIcon
+        icon="disconnected"
+        class="kicon-style"
+      />
+      <span>{{ $tr('offlineText') }}</span>
+    </div>
+  </KTransition>
+
+</template>
+
+
+<script>
+
+  import { mapState } from 'vuex';
+  import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
+
+  export default {
+    name: 'StudioOfflineAlert',
+    setup() {
+      const { sendPoliteMessage } = useKLiveRegion();
+      return { sendPoliteMessage };
+    },
+    props: {
+      offset: {
+        type: Number,
+        default: 0,
+      },
+    },
+    computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      libraryMode() {
+        return window.libraryMode;
+      },
+      computedstyle() {
+        return {
+          position: 'fixed',
+          top: `${this.offset}px`,
+          left: '0',
+          right: '0',
+          backgroundColor: this.$themeTokens.surface,
+          zIndex: 16,
+        };
+      },
+    },
+    watch: {
+      offline(newVal) {
+        if (newVal) {
+          this.sendPoliteMessage(this.$tr('offlineText'));
+        } else {
+          this.sendPoliteMessage(this.$tr('onlineText'));
+        }
+      },
+    },
+    $trs: {
+      offlineText:
+        'You seem to be offline. Your changes will be saved once your connection is back.',
+      onlineText: 'You are back online.',
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .studio-offline-alert {
+    display: flex;
+    width: 100%;
+    padding: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .kicon-style {
+    flex-shrink: 0;
+    margin-right: 14px;
+    margin-left: 10px;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import StudioOfflineAlert from '../StudioOfflineAlert.vue';
+import storeFactory from 'shared/vuex/baseStore';
+
+function makeWrapper() {
+  const store = storeFactory();
+  return {
+    wrapper: mount(StudioOfflineAlert, {
+      store,
+    }),
+    store,
+  };
+}
+
+describe('StudioOfflineAlert', () => {
+  let wrapper, store;
+
+  beforeEach(() => {
+    const setup = makeWrapper();
+    wrapper = setup.wrapper;
+    store = setup.store;
+  });
+
+  it('displays alert component when offline', async () => {
+    store.state.connection.online = false;
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-test="studio-offline-alert"]').exists()).toBe(true);
+    expect(wrapper.text()).toMatch(
+      'You seem to be offline. Your changes will be saved once your connection is back',
+    );
+  });
+
+  it('hides alert component when online', async () => {
+    store.state.connection.online = true;
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-test="studio-offline-alert"]').exists()).toBe(false);
+  });
+});