@rancher/shell 0.5.3 → 2.0.0

package/components/PromptRemove.vue

@@ -10,12 +10,13 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { CATALOG } from '@shell/config/types';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   name: 'PromptRemove',
 
   components: {
-    Card, Checkbox, AsyncButton, LabeledInput
+    Card, Checkbox, AsyncButton, LabeledInput, AppModal
   },
   props: {
     /**
@@ -39,7 +40,8 @@ export default {
       preventDelete:       false,
       removeComponent:     this.$store.getters['type-map/importCustomPromptRemove'](resource),
       chartsToRemoveIsApp: false,
-      chartsDeleteCrd:     false
+      chartsDeleteCrd:     false,
+      showModal:           false,
     };
   },
   computed: {
@@ -171,7 +173,7 @@ export default {
           this.chartsToRemoveIsApp = true;
         }
 
-        this.$modal.show('promptRemove');
+        this.showModal = true;
 
         let { resource } = this.$route.params;
 
@@ -183,7 +185,7 @@ export default {
 
         this.removeComponent = this.$store.getters['type-map/importCustomPromptRemove'](resource);
       } else {
-        this.$modal.hide('promptRemove');
+        this.showModal = false;
       }
     },
 
@@ -335,13 +337,14 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="remove-modal"
+  <app-modal
+    v-if="showModal"
+    custom-class="remove-modal"
     name="promptRemove"
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
-    @closed="close"
+    @close="close"
   >
     <Card
       class="prompt-remove"
@@ -440,7 +443,7 @@ export default {
         />
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>
@@ -453,15 +456,6 @@ export default {
       margin-left: 3px;
     }
 
-    .remove-modal {
-        border-radius: var(--border-radius);
-        overflow: scroll;
-        max-height: 100vh;
-        & ::-webkit-scrollbar-corner {
-          background: rgba(0,0,0,0);
-        }
-    }
-
     .actions {
       text-align: right;
     }

package/components/PromptRestore.vue

@@ -15,6 +15,7 @@ import { escapeHtml } from '@shell/utils/string';
 import day from 'dayjs';
 import { sortBy } from '@shell/utils/sort';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   components: {
@@ -24,6 +25,7 @@ export default {
     Date,
     LabeledSelect,
     RadioGroup,
+    AppModal,
   },
 
   name: 'PromptRestore',
@@ -87,12 +89,10 @@ export default {
     async showPromptRestore(show) {
       if (show) {
         this.loaded = true;
-        this.$modal.show('promptRestore');
         await this.fetchSnapshots();
         this.selectDefaultSnapshot();
       } else {
         this.loaded = false;
-        this.$modal.hide('promptRestore');
       }
     }
   },
@@ -206,12 +206,14 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="promptrestore-modal"
+  <app-modal
+    v-if="loaded"
+    custom-class="promptrestore-modal"
     name="promptRestore"
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    @close="close"
   >
     <Card
       v-if="loaded"
@@ -289,7 +291,7 @@ export default {
         />
       </div>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss' scoped>
@@ -305,22 +307,22 @@ export default {
       min-height: 16px;
     }
 
-    ::v-deep .card-container .card-actions {
-      display: block;
+    // Position dialog buttons on the right-hand side of the dialog
+    .dialog-actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 
-      button:not(:last-child) {
-        margin-right: 10px;
-      }
+  .prompt-restore ::v-deep .card-wrap .card-actions {
+    display: block;
 
-      .banner {
-        display: flex;
-      }
+    button:not(:last-child) {
+      margin-right: 10px;
     }
 
-    // Position dialog buttons on the right-hand side of the dialog
-    .dialog-actions {
+    .banner {
       display: flex;
-      justify-content: flex-end;
     }
   }
 </style>

package/components/Questions/__tests__/Boolean.test.ts

@@ -1,17 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the Boolean Component', () => {
   it('input field is present', () => {
@@ -26,8 +16,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"] input[type=checkbox]');
@@ -56,8 +46,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
@@ -82,8 +72,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
@@ -108,8 +98,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');

package/components/Questions/__tests__/Float.test.ts

@@ -1,17 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the float Component', () => {
   it('input field is present', () => {
@@ -26,8 +16,8 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
@@ -56,8 +46,8 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
@@ -82,8 +72,8 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
@@ -108,8 +98,8 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');

package/components/Questions/__tests__/Int.test.ts

@@ -1,17 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the Int Component', () => {
   it('input field is present', () => {
@@ -26,8 +16,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -56,8 +46,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -82,8 +72,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -108,8 +98,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');

package/components/Questions/__tests__/String.test.ts

@@ -1,17 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the String Component', () => {
   it('input field is present', () => {
@@ -26,8 +16,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -56,8 +46,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -82,8 +72,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -108,8 +98,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');

package/components/Questions/__tests__/Yaml.test.ts

@@ -1,18 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:        true,
-  Tabbed:     true,
-  CodeMirror: true
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the yaml Component', () => {
   it('input field is present', () => {
@@ -27,8 +16,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -57,8 +46,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -83,8 +72,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -109,8 +98,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');

package/components/Questions/__tests__/utils/questions-defaults.ts

@@ -0,0 +1,20 @@
+
+const defaultStubs = {
+  Tab:    true,
+  Tabbed: true,
+};
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
+};
+
+const defaultMocks = { $store: { getters: defaultGetters }, $fetchState: { pending: false } };
+
+export default {
+  stubs:   defaultStubs,
+  getters: defaultGetters,
+  mocks:   defaultMocks,
+};

package/components/Questions/index.vue

@@ -15,6 +15,7 @@ import ReferenceType from './Reference';
 import CloudCredentialType from './CloudCredential';
 import RadioType from './Radio';
 import YamlType from './Yaml';
+import Loading from '@shell/components/Loading';
 
 export const knownTypes = {
   string:          StringType,
@@ -115,7 +116,11 @@ function migrate(expr) {
 }
 
 export default {
-  components: { Tab, ...knownTypes },
+  components: {
+    ...knownTypes,
+    Tab,
+    Loading,
+  },
 
   props: {
     mode: {
@@ -165,6 +170,13 @@ export default {
     }
   },
 
+  async fetch() {
+    // If this source is a schema, ensure the schema's `resourceFields` is populated
+    if (this.source.type === 'schema' && this.source.requiresResourceFields) {
+      await this.source.fetchResourceFields();
+    }
+  },
+
   data() {
     return { valueGeneration: 0 };
   },
@@ -434,7 +446,11 @@ export default {
 </script>
 
 <template>
-  <form v-if="asTabs">
+  <Loading
+    v-if="$fetchState.pending"
+    mode="relative"
+  />
+  <form v-else-if="asTabs">
     <Tab
       v-for="g in groups"
       :key="g.name"

package/components/ResourceCancelModal.vue

@@ -1,5 +1,9 @@
 <script>
+import AppModal from '@shell/components/AppModal.vue';
+
 export default {
+  components: { AppModal },
+
   props: {
     isCancelModal: {
       type:    Boolean,
@@ -11,18 +15,22 @@ export default {
     },
   },
 
+  data() {
+    return { showModal: false };
+  },
+
   watch: {},
 
   methods: {
     show() {
-      this.$modal.show('cancel-modal');
+      this.showModal = true;
     },
 
     /**
      * Close the modal, no op
      */
     cancelCancel() {
-      this.$modal.hide('cancel-modal');
+      this.showModal = false;
 
       this.$emit('cancel-cancel');
     },
@@ -31,7 +39,7 @@ export default {
      * Close the modal, cancel has been confirmed
      */
     confirmCancel() {
-      this.$modal.hide('cancel-modal');
+      this.showModal = false;
 
       this.$emit('confirm-cancel', this.isCancelModal);
     },
@@ -40,11 +48,13 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="confirm-modal"
+  <app-modal
+    v-if="showModal"
+    customClass="confirm-modal"
     name="cancel-modal"
     :width="440"
     height="auto"
+    @close="cancelCancel"
   >
     <div class="header">
       <h4 class="text-default-text">
@@ -80,7 +90,7 @@ export default {
         <span v-else>{{ t("cruResource.confirmBack") }}</span>
       </button>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss' scoped>
@@ -89,32 +99,27 @@ export default {
     margin: 0 10px;
   }
 
-  .v--modal-box {
-    background-color: var(--default);
-    box-shadow: none;
-    min-height: 200px;
-    .body {
-      min-height: 75px;
-      padding: 10px 0 0 15px;
-      p {
-        margin-top: 10px;
-      }
+  .body {
+    min-height: 75px;
+    padding: 10px 0 0 15px;
+    p {
+      margin-top: 10px;
     }
-    .header {
-      background-color: var(--error);
-      padding: 15px 0 0 15px;
-      height: 50px;
+  }
+  .header {
+    background-color: var(--error);
+    padding: 15px 0 0 15px;
+    height: 50px;
 
-      h4 {
-        color: white;
-      }
-    }
-    .footer {
-      border-top: 1px solid var(--border);
-      text-align: center;
-      padding: 10px 0 0 15px;
-      height: 60px;
+    h4 {
+      color: white;
     }
   }
+  .footer {
+    border-top: 1px solid var(--border);
+    text-align: center;
+    padding: 10px 0 0 15px;
+    height: 60px;
+  }
 }
 </style>