@rancher/shell 0.1.0 → 0.1.1

package/pages/auth/setup.vue

@@ -1,14 +1,14 @@
 <script>
 import { randomStr } from '@shell/utils/string';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import CopyToClipboard from '@shell/components/CopyToClipboard';
 import AsyncButton from '@shell/components/AsyncButton';
 import { LOGGED_OUT, SETUP } from '@shell/config/query-params';
 import { NORMAN, MANAGEMENT } from '@shell/config/types';
 import { findBy } from '@shell/utils/array';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { getVendor, getProduct, setVendor } from '@shell/config/private-label';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import { setSetting, SETTING } from '@shell/config/settings';
 import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
 import { isDevBuild } from '@shell/utils/version';
@@ -33,6 +33,14 @@ const calcMustChangePassword = async(store) => {
 export default {
   layout: 'unauthenticated',
 
+  data() {
+    return {
+      passwordOptions: [
+        { label: this.t('setup.useRandom'), value: true },
+        { label: this.t('setup.useManual'), value: false }],
+    };
+  },
+
   async middleware({ store, redirect, route } ) {
     try {
       await store.dispatch('management/findAll', {
@@ -289,7 +297,12 @@ export default {
             <!-- For password managers... -->
             <input type="hidden" name="username" autocomplete="username" :value="username" />
             <div class="mb-20">
-              <RadioGroup v-model="useRandom" name="password-mode" :options="[{label: t('setup.useRandom'), value: true}, {label: t('setup.useManual'), value: false}]" />
+              <RadioGroup
+                v-model="useRandom"
+                data-testid="setup-password-mode"
+                name="password-mode"
+                :options="passwordOptions"
+              />
             </div>
             <div class="mb-20">
               <LabeledInput
@@ -298,6 +311,7 @@ export default {
                 v-model.trim="password"
                 :type="useRandom ? 'text' : 'password'"
                 :disabled="useRandom"
+                data-testid="setup-password-random"
                 label-key="setup.newPassword"
               >
                 <template v-if="useRandom" #suffix>
@@ -311,6 +325,7 @@ export default {
                 ref="password"
                 v-model.trim="password"
                 :label="t('setup.newPassword')"
+                data-testid="setup-password"
                 :required="true"
               />
             </div>
@@ -318,6 +333,7 @@ export default {
               v-show="!useRandom"
               v-model.trim="confirm"
               autocomplete="new-password"
+              data-testid="setup-password-confirm"
               :label="t('setup.confirmPassword')"
               :required="true"
             />
@@ -330,15 +346,27 @@ export default {
                 <t k="setup.serverUrl.tip" :raw="true" />
               </p>
               <div class="mt-20">
-                <LabeledInput v-model="serverUrl" :label="t('setup.serverUrl.label')" />
+                <LabeledInput
+                  v-model="serverUrl"
+                  :label="t('setup.serverUrl.label')"
+                  data-testid="setup-server-url"
+                />
               </div>
             </template>
 
             <div class="checkbox mt-40">
-              <Checkbox id="checkbox-telemetry" v-model="telemetry" label-key="setup.telemetry" />
+              <Checkbox id="checkbox-telemetry" v-model="telemetry">
+                <template #label>
+                  <t k="setup.telemetry" :raw="true" :name="productName" />
+                </template>
+              </Checkbox>
             </div>
             <div class="checkbox pt-10 eula">
-              <Checkbox id="checkbox-eula" v-model="eula">
+              <Checkbox
+                id="checkbox-eula"
+                v-model="eula"
+                data-testid="setup-agreement"
+              >
                 <template #label>
                   <t k="setup.eula" :raw="true" :name="productName" />
                 </template>
@@ -346,8 +374,18 @@ export default {
             </div>
           </template>
 
-          <div id="submit" class="text-center mt-20">
-            <AsyncButton key="passwordSubmit" type="submit" mode="continue" :disabled="!saveEnabled" @click="save" />
+          <div
+            id="submit"
+            class="text-center mt-20"
+          >
+            <AsyncButton
+              key="passwordSubmit"
+              type="submit"
+              mode="continue"
+              :disabled="!saveEnabled"
+              data-testid="setup-submit"
+              @click="save"
+            />
           </div>
 
           <div class="setup-errors mt-20">

package/pages/c/_cluster/_product/_resource/create.vue

@@ -8,5 +8,5 @@ export default {
 </script>
 
 <template>
-  <ResourceDetail />
+  <ResourceDetail component-testid="cluster-manager-create" />
 </template>

package/pages/c/_cluster/_product/members/index.vue

@@ -5,6 +5,7 @@ import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { AGE, ROLE, STATE, PRINCIPAL } from '@shell/config/table-headers';
 import { canViewClusterPermissionsEditor } from '@shell/components/form/Members/ClusterPermissionsEditor.vue';
+import Banner from '@components/Banner/Banner.vue';
 
 /**
  * Explorer members page.
@@ -15,7 +16,7 @@ export default {
   name: 'ExplorerMembers',
 
   components: {
-    Loading, Masthead, ResourceTable
+    Banner, Loading, Masthead, ResourceTable
   },
 
   async fetch() {
@@ -64,6 +65,9 @@ export default {
     canManageMembers() {
       return canViewClusterPermissionsEditor(this.$store);
     },
+    isLocal() {
+      return this.$store.getters['currentCluster'].isLocal;
+    }
   },
 };
 </script>
@@ -78,6 +82,7 @@ export default {
       :create-location="createLocation"
       :create-button-label="t('members.createActionLabel')"
     />
+    <Banner v-if="isLocal" color="error" :label="t('members.localClusterWarning')" />
     <ResourceTable
       :schema="schema"
       :headers="headers"

package/pages/c/_cluster/_product/projectsnamespaces.vue

@@ -8,8 +8,9 @@ import { PROJECT_ID } from '@shell/config/query-params';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, DEV } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
 import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
+import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
+import { mapGetters } from 'vuex';
 
 export default {
   name:       'ListNamespace',
@@ -48,6 +49,8 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
+
     isNamespaceCreatable() {
       return (this.schema?.collectionMethods || []).includes('POST');
     },
@@ -76,10 +79,16 @@ export default {
     clusterProjects() {
       const clusterId = this.$store.getters['currentCluster'].id;
 
-      return this.projects.filter(project => project.spec.clusterName === clusterId);
+      // Get the list of projects from the store so that the list
+      // is updated if a new project is created or removed.
+      const projectsInAllClusters = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
+
+      const clustersInProjects = projectsInAllClusters.filter(project => project.spec.clusterName === clusterId);
+
+      return clustersInProjects;
     },
     projectsWithoutNamespaces() {
-      return this.clusterProjects.filter((project) => {
+      return this.activeProjects.filter((project) => {
         return !this.projectIdsWithNamespaces.find(item => project?.id?.endsWith(`/${ item }`));
       });
     },
@@ -115,27 +124,119 @@ export default {
       };
     },
     groupPreference: mapPref(GROUP_RESOURCES),
+    activeNamespaceFilters() {
+      return this.$store.getters['activeNamespaceFilters'];
+    },
+    activeProjectFilters() {
+      const activeProjects = {};
+
+      for (const filter of this.activeNamespaceFilters) {
+        const [type, id] = filter.split('://', 2);
+
+        if (type === 'project') {
+          activeProjects[id] = true;
+        }
+      }
+
+      return activeProjects;
+    },
+    activeProjects() {
+      const namespaceFilters = this.$store.getters['activeNamespaceFilters'];
+
+      if (namespaceFilters.includes(NAMESPACE_FILTER_ALL_ORPHANS) && Object.keys(this.activeProjectFilters).length === 0) {
+        // If the user wants to only see namespaces that are not
+        // in a project, don't show any projects.
+        return [];
+      }
+
+      // If the user is not filtering by any projects or namespaces, return
+      // all projects in the cluster.
+      if (!this.userIsFilteringForSpecificNamespaceOrProject()) {
+        return this.clusterProjects;
+      }
+
+      // Filter out projects that are not selected in the top nav.
+      return this.clusterProjects.filter((projectData) => {
+        const projectId = projectData.id.split('/')[1];
+
+        return !!this.activeProjectFilters[projectId];
+      });
+    },
+    activeNamespaces() {
+      // Apply namespace filters from the top nav.
+      const activeNamespaces = this.$store.getters['namespaces']();
+
+      return this.namespaces.filter((namespaceData) => {
+        return !!activeNamespaces[namespaceData.metadata.name];
+      });
+    },
     filteredRows() {
       return this.groupPreference === 'none' ? this.rows : this.rowsWithFakeNamespaces;
     },
     rows() {
       if (this.$store.getters['prefs/get'](DEV)) {
-        return this.namespaces;
+        // If developer tools are turned on in the user preferences,
+        // return all namespaces including system namespaces and RBAC
+        // management namespaces.
+        return this.activeNamespaces;
       }
 
       const isVirtualCluster = this.$store.getters['isVirtualCluster'];
-      const isVirtualProduct = this.$store.getters['currentProduct'].name === HARVESTER;
 
-      return this.namespaces.filter((namespace) => {
-        return isVirtualCluster && isVirtualProduct ? (!namespace.isSystem && !namespace.isObscure) : !namespace.isObscure;
+      return this.activeNamespaces.filter((namespace) => {
+        const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(namespace.metadata.name);
+
+        const systemNS = namespace.isSystem || namespace.isFleetManaged || isSettingSystemNamespace;
+
+        // For Harvester, filter out system namespaces AND obscure namespaces.
+        if (isVirtualCluster) {
+          return !systemNS && !namespace.isObscure;
+        }
+
+        // Otherwise only filter out obscure namespaces, such as namespaces
+        // that Rancher uses to manage RBAC for projects, which should not be
+        // edited or deleted by Rancher users.
+        return !namespace.isObscure;
       });
     },
 
+    canSeeProjectlessNamespaces() {
+      return this.currentCluster.canUpdate;
+    },
+
     showMockNotInProjectGroup() {
-      return !this.rows.some(row => !row.project);
+      if (!this.canSeeProjectlessNamespaces) {
+        return false;
+      }
+
+      const someNamespacesAreNotInProject = !this.rows.some(row => !row.project);
+
+      // Hide the "Not in a Project" group if the user is filtering
+      // for specific namespaces or projects.
+      const usingSpecificFilter = this.userIsFilteringForSpecificNamespaceOrProject();
+
+      return !usingSpecificFilter && someNamespacesAreNotInProject;
+    },
+
+    notInProjectKey() {
+      return this.$store.getters['i18n/t']('resourceTable.groupLabel.notInAProject');
     }
   },
   methods: {
+    userIsFilteringForSpecificNamespaceOrProject() {
+      const activeFilters = this.$store.getters['namespaceFilters'];
+
+      for (let i = 0; i < activeFilters.length; i++) {
+        const filter = activeFilters[i];
+        const filterType = filter.split('://')[0];
+
+        if (filterType === 'ns' || filterType === 'project') {
+          return true;
+        }
+      }
+
+      return false;
+    },
     slotName(project) {
       return `main-row:${ project.id }`;
     },
@@ -193,6 +294,7 @@ export default {
 
       return base + (this.showMockNotInProjectGroup ? '-mock' : '');
     },
+
   }
 };
 </script>
@@ -231,13 +333,13 @@ export default {
           </div>
           <div class="right">
             <n-link
-              v-if="isNamespaceCreatable"
-              class="create-namespace btn btn-sm role-secondary"
+              v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
+              class="create-namespace btn btn-sm role-secondary mr-5"
               :to="createNamespaceLocation(group.group)"
             >
               {{ t('projectNamespaces.createNamespace') }}
             </n-link>
-            <button type="button" class="project-action btn btn-sm role-multi-action actions mr-5" :class="{invisible: !showProjectActionButton(group.group)}" @click="showProjectAction($event, group.group)">
+            <button type="button" class="project-action btn btn-sm role-multi-action actions mr-10" :class="{invisible: !showProjectActionButton(group.group)}" @click="showProjectAction($event, group.group)">
               <i class="icon icon-actions" />
             </button>
           </div>

package/pages/c/_cluster/apps/charts/chart.vue

@@ -1,7 +1,7 @@
 <script>
 import Loading from '@shell/components/Loading';
 import ChartMixin from '@shell/mixins/chart';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import ChartReadme from '@shell/components/ChartReadme';
 import LazyImage from '@shell/components/LazyImage';
 import DateFormatter from '@shell/components/formatter/Date';

package/pages/c/_cluster/apps/charts/index.vue

@@ -1,7 +1,7 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
 import TypeDescription from '@shell/components/TypeDescription';
 import {
@@ -10,7 +10,7 @@ import {
 import { lcFirst } from '@shell/utils/string';
 import { sortBy } from '@shell/utils/sort';
 import { mapGetters } from 'vuex';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import Select from '@shell/components/form/Select';
 import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE } from '@shell/store/prefs';
 import { removeObject, addObject, findBy } from '@shell/utils/array';