Initial rancher-api implementation

shell/components/GrowlManager.vue

@@ -103,7 +103,10 @@ export default {
               class="close hand icon icon-close"
               @click="close(growl)"
             />
-            <div class="growl-text-title">
+            <div
+              v-if="growl.title"
+              class="growl-text-title"
+            >
               {{ growl.title }}
             </div>
             <p v-if="growl.message">

shell/components/ModalManager.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+
+import AppModal from '@shell/components/AppModal.vue';
+
+const store = useStore();
+
+const isOpen = computed(() => store.getters['modal/isOpen']);
+const component = computed(() => store.getters['modal/component']);
+const componentProps = computed(() => store.getters['modal/componentProps']);
+const resources = computed(() => store.getters['modal/resources']);
+const closeOnClickOutside = computed(() => store.getters['modal/closeOnClickOutside']);
+const modalWidth = computed(() => store.getters['modal/modalWidth']);
+// const modalSticky = computed(() => store.getters['modal/modalSticky']); // TODO: Implement sticky modals
+
+const backgroundClosing = ref<Function | null>(null);
+
+function close() {
+  if (!isOpen.value) return;
+
+  if (backgroundClosing.value) {
+    backgroundClosing.value();
+  }
+
+  store.commit('modal/closeModal');
+}
+
+function registerBackgroundClosing(fn: Function) {
+  backgroundClosing.value = fn;
+}
+</script>
+
+<template>
+  <app-modal
+    v-if="isOpen && component"
+    :click-to-close="closeOnClickOutside"
+    :width="modalWidth"
+    :style="{ '--prompt-modal-width': modalWidth }"
+    @close="close"
+  >
+    <component
+      :is="component"
+      v-bind="componentProps || {}"
+      :resources="resources"
+      :register-background-closing="registerBackgroundClosing"
+      @close="close"
+    />
+  </app-modal>
+</template>
+
+<style lang='scss'>
+.promptModal-modal {
+  border-radius: var(--border-radius);
+  overflow: scroll;
+  max-height: 100vh;
+  & ::-webkit-scrollbar-corner {
+    background: rgba(0,0,0,0);
+  }
+}
+</style>

shell/components/SlideInPanelManager.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const HEADER_HEIGHT = 55;
+
+const store = useStore();
+const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
+const currentComponent = computed(() => store.getters['slideInPanel/component']);
+const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
+
+// Panel computed styles
+const panelTop = computed(() => {
+  const banner = document.getElementById('banner-header');
+  let height = HEADER_HEIGHT;
+
+  if (banner) {
+    height += banner.clientHeight;
+  }
+
+  return `${ height }px`;
+});
+
+const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
+const panelWidth = computed(() => currentProps?.value?.width || '33%');
+const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
+
+// A title can be passed via componentProps, fallback to a default.
+const panelTitle = computed(() => currentProps?.value?.title || 'Details');
+
+function closePanel() {
+  store.commit('slideInPanel/close');
+}
+</script>
+
+<template>
+  <div id="slide-in-panel">
+    <div
+      v-show="isOpen"
+      class="slide-in-glass"
+      :class="{ 'slide-in-glass-open': isOpen }"
+      @click="closePanel"
+    />
+    <div
+      class="slide-in"
+      :class="{ 'slide-in-open': isOpen }"
+      :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
+    >
+      <div class="header">
+        <div class="title">
+          {{ panelTitle }}
+        </div>
+        <i
+          class="icon icon-close"
+          @click="closePanel"
+        />
+      </div>
+      <div class="main-panel">
+        <component
+          :is="currentComponent"
+          v-if="isOpen || currentComponent"
+          v-bind="currentProps"
+          class="dynamic-panel-content"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slide-in-glass {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+}
+.slide-in-glass-open {
+  background-color: var(--body-bg);
+  display: block;
+  opacity: 0.5;
+  z-index: 1000;
+}
+
+.slide-in {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  z-index: 2000;
+  transition: right 0.5s ease;
+  border-left: 1px solid var(--border);
+  background-color: var(--body-bg);
+}
+
+.slide-in-open {
+  right: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-bottom: 1px solid var(--border);
+
+  .title {
+    flex: 1;
+    font-weight: bold;
+  }
+
+  .icon-close {
+    cursor: pointer;
+  }
+}
+
+.main-panel {
+  padding: 10px;
+  overflow: auto;
+}
+</style>

shell/components/templates/default.vue

@@ -7,6 +7,8 @@ import {
 } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
@@ -41,6 +43,8 @@ export default {
     Header,
     ActionMenu,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     WindowManager,
     FixedBanner,
     AwsComplianceBanner,
@@ -253,6 +257,7 @@ export default {
         <PromptRestore />
         <AssignTo />
         <PromptModal />
+        <ModalManager />
         <button
           v-if="noLocaleShortcut"
           v-shortkey.once="['shift','l']"
@@ -302,6 +307,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <Inactivity />
     <DraggableZone ref="draggableZone" />
   </div>

shell/components/templates/home.vue

@@ -3,6 +3,8 @@ import Header from '@shell/components/nav/Header';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
@@ -17,6 +19,8 @@ export default {
     Header,
     FixedBanner,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     AzureWarning,
     AwsComplianceBanner,
     Inactivity,
@@ -58,6 +62,7 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
     <PromptModal />
+    <ModalManager />
     <div
       class="dashboard-content"
       :class="{'dashboard-padding-left': showTopLevelMenu}"
@@ -76,6 +81,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <button
       v-if="themeShortcut"
       v-shortkey.once="['shift','t']"

shell/components/templates/plain.vue

@@ -8,6 +8,8 @@ import IndentedPanel from '@shell/components/IndentedPanel';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
@@ -26,6 +28,8 @@ export default {
     PromptModal,
     FixedBanner,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     AwsComplianceBanner,
     AzureWarning,
     Inactivity
@@ -78,6 +82,7 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <PromptModal />
+        <ModalManager />
         <AssignTo />
         <button
           v-if="themeShortcut"
@@ -96,6 +101,7 @@ export default {
 
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <Inactivity />
   </div>
 </template>

shell/config/store.js

@@ -27,10 +27,12 @@ let store = {};
   resolveStoreModules(require('../store/growl.js'), 'growl.js');
   resolveStoreModules(require('../store/i18n.js'), 'i18n.js');
   resolveStoreModules(require('../store/linode.js'), 'linode.js');
+  resolveStoreModules(require('../store/modal.ts'), 'modal.ts');
   resolveStoreModules(require('../store/plugins.js'), 'plugins.js');
   resolveStoreModules(require('../store/pnap.js'), 'pnap.js');
   resolveStoreModules(require('../store/prefs.js'), 'prefs.js');
   resolveStoreModules(require('../store/resource-fetch.js'), 'resource-fetch.js');
+  resolveStoreModules(require('../store/slideInPanel.ts'), 'slideInPanel.ts');
   resolveStoreModules(require('../store/type-map.js'), 'type-map.js');
   resolveStoreModules(require('../store/uiplugins.ts'), 'uiplugins.ts');
   resolveStoreModules(require('../store/wm.js'), 'wm.js');
@@ -54,10 +56,12 @@ let store = {};
       '../store/i18n.js',
       '../store/index.js',
       '../store/linode.js',
+      '../store/modal.ts',
       '../store/plugins.js',
       '../store/pnap.js',
       '../store/prefs.js',
       '../store/resource-fetch.js',
+      '../store/slideInPanel.ts',
       '../store/type-map.js',
       '../store/uiplugins.ts',
       '../store/wm.js',

shell/initialize/install-plugins.js

@@ -26,6 +26,7 @@ import replaceAll from '@shell/plugins/replaceall';
 import steveCreateWorker from '@shell/plugins/steve-create-worker';
 import emberCookie from '@shell/plugins/ember-cookie';
 import ShortKey from '@shell/plugins/shortkey';
+import rancherApiPlugin from '@shell/plugins/rancher-api';
 
 import 'floating-vue/dist/style.css';
 import { floatingVueOptions } from '@shell/plugins/floating-vue';
@@ -41,7 +42,7 @@ export async function installPlugins(vueApp) {
 }
 
 export async function installInjectedPlugins(app, vueApp) {
-  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, plugin, steveCreateWorker, emberCookie];
+  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, plugin, steveCreateWorker, emberCookie, rancherApiPlugin];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
     if (typeof pluginDefinition === 'function') {