@rancher/shell 0.4.0 → 0.5.0

package/rancher-components/components/Form/LabeledInput/LabeledInput.vue

@@ -1,21 +1,27 @@
 <script lang="ts">
-import Vue, { VueConstructor } from 'vue';
-import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
+import { defineComponent } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
+import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
+import { useCompactInput } from '@shell/composables/useCompactInput';
 
-export default (
-  Vue as VueConstructor<Vue & InstanceType<typeof LabeledFormElement> & InstanceType<typeof CompactInput>>
-).extend({
+declare module 'vue/types/vue' {
+  interface Vue {
+    onInput: (event: Event) => void | ((event: Event) => void);
+  }
+}
+
+export default defineComponent({
   components: { LabeledTooltip, TextAreaAutoGrow },
-  mixins:     [LabeledFormElement, CompactInput],
+
+  inheritAttrs: false,
 
   props: {
+    ...labeledFormElementProps,
     /**
      * The type of the Labeled Input.
      * @values text, cron, multiline, multiline-password
@@ -90,24 +96,39 @@ export default (
     delay: {
       type:    Number,
       default: 0
-    }
+    },
+  },
+
+  setup(props, { emit }) {
+    const {
+      focused,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField
+    } = useLabeledFormElement(props, emit);
+    const { isCompact } = useCompactInput(props);
+
+    return {
+      focused,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField,
+      isCompact,
+    };
   },
 
   data() {
     return {
       updated:          false,
-      validationErrors: ''
+      validationErrors: '',
     };
   },
 
   computed: {
-    /**
-     * Determines if the Labeled Input @input event should be debounced.
-     */
-    onInput(): ((value: string) => void) | void {
-      return this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
-    },
-
     /**
      * Determines if the Labeled Input should display a label.
      */
@@ -122,7 +143,7 @@ export default (
       return !!this.tooltip || !!this.tooltipKey;
     },
 
-    tooltipValue(): string | undefined {
+    tooltipValue(): string | Record<string, unknown> | undefined {
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
       }
@@ -144,7 +165,7 @@ export default (
       if (this.type !== 'cron' || !this.value) {
         return;
       }
-      if (!isValidCron(this.value)) {
+      if (typeof this.value === 'string' && !isValidCron(this.value)) {
         return this.t('generic.invalidCron');
       }
       try {
@@ -173,15 +194,22 @@ export default (
     /**
      * The max length for the Labeled Input.
      */
-    _maxlength(): number | null {
+    _maxlength(): number | undefined {
       if (this.type === 'text' && this.maxlength) {
         return this.maxlength;
       }
 
-      return null;
+      return undefined;
     },
   },
 
+  created() {
+    /**
+     * Determines if the Labeled Input @input event should be debounced.
+    */
+    this.onInput = this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
+  },
+
   methods: {
     /**
      * Attempts to give the Labeled Input focus.
@@ -216,8 +244,13 @@ export default (
     /**
      * Emit on input with delay. Note: Arrow function is avoided due context
      * binding.
+     *
+     * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
+     * https://github.com/rancher/dashboard/issues/10249
      */
-    delayInput(value: string): void {
+    delayInput(val: string | Event): void {
+      const value = typeof val === 'string' ? val : (val?.target as HTMLInputElement)?.value;
+
       this.$emit('input', value);
     },
 
@@ -234,7 +267,7 @@ export default (
      * event.
      * @see labeled-form-element.ts mixin for onBlurLabeled()
      */
-    onBlur(event: string): void {
+    onBlur(event: string | FocusEvent): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
     },
@@ -286,7 +319,7 @@ export default (
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput($event)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -303,7 +336,7 @@ export default (
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        @input="onInput($event.target.value)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"

package/rancher-components/components/Form/Radio/RadioButton.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
+import { randomStr } from '@shell/utils/string';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The name of the input, for grouping.
@@ -71,7 +72,10 @@ export default Vue.extend({
   },
 
   data() {
-    return { isChecked: this.value === this.val };
+    return {
+      isChecked:    this.value === this.val,
+      randomString: `${ randomStr() }-radio`,
+    };
   },
 
   computed: {
@@ -115,13 +119,15 @@ export default Vue.extend({
     /**
      * Emits the input event.
      */
-    clicked({ target }: { target?: HTMLElement }) {
-      if (this.isDisabled || target?.tagName === 'A') {
+    clicked(event: MouseEvent | KeyboardEvent) {
+      const target = event.target;
+
+      if (this.isDisabled || (target instanceof HTMLElement && target.tagName === 'A')) {
         return;
       }
 
       this.$emit('input', this.val);
-    }
+    },
   }
 });
 </script>
@@ -134,7 +140,7 @@ export default Vue.extend({
     @click.stop="clicked($event)"
   >
     <input
-      :id="_uid+'-radio'"
+      :id="randomString"
       :disabled="isDisabled"
       :name="name"
       :value="''+val"

package/rancher-components/components/Form/Radio/RadioGroup.vue

@@ -1,14 +1,15 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 
 interface Option {
   value: unknown,
-  label: string
+  label: string,
+  description?: string,
 }
 
-export default Vue.extend({
+export default defineComponent({
   components: { RadioButton },
   props:      {
     /**

package/rancher-components/components/Form/TextArea/TextAreaAutoGrow.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
@@ -10,7 +10,7 @@ declare module 'vue/types/vue' {
   }
 }
 
-export default Vue.extend({
+export default defineComponent({
   inheritAttrs: false,
 
   props: {
@@ -115,7 +115,9 @@ export default Vue.extend({
     /**
      * Emits the input event and resizes the Text Area.
     */
-    onInput(val: string): void {
+    onInput(event: Event): void {
+      const val = (event?.target as HTMLInputElement)?.value;
+
       this.$emit('input', val);
       this.queueResize();
     },
@@ -163,7 +165,7 @@ export default Vue.extend({
     v-bind="$attrs"
     :spellcheck="spellcheck"
     @paste="$emit('paste', $event)"
-    @input="onInput($event.target.value)"
+    @input="onInput($event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
   />

package/rancher-components/components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -1,6 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+
+type StateType = boolean | 'true' | 'false' | undefined;
+
+export default defineComponent({
   props: {
     value: {
       type:    [Boolean, String, Number],
@@ -28,7 +31,7 @@ export default Vue.extend({
     },
   },
   data() {
-    return { state: false as boolean | string | number };
+    return { state: false as StateType };
   },
 
   watch: {
@@ -41,7 +44,7 @@ export default Vue.extend({
   },
 
   methods: {
-    toggle(neu: boolean | string | number) {
+    toggle(neu: StateType | null) {
       this.state = neu === null ? !this.state : neu;
       this.$emit('input', this.state ? this.onValue : this.offValue);
     }

package/rancher-components/components/LabeledTooltip/LabeledTooltip.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The Labeled Tooltip value.
@@ -29,9 +29,14 @@ export default Vue.extend({
     }
   },
   computed: {
-    iconClass() {
+    iconClass(): string {
       return this.status === 'error' ? 'icon-warning' : 'icon-info';
     }
+  },
+  methods: {
+    isObject(value: string | Record<string, unknown>): value is Record<string, unknown> {
+      return typeof value === 'object' && value !== null && !!value.content;
+    }
   }
 });
 </script>
@@ -44,7 +49,7 @@ export default Vue.extend({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="isObject(value) ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />

package/rancher-components/components/StringList/StringList.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, defineComponent } from 'vue';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
@@ -29,7 +29,7 @@ const CLASS = {
 /**
  * Manage a list of strings
  */
-export default Vue.extend({
+export default defineComponent({
 
   name:       'StringList',
   components: { LabeledInput },
@@ -92,9 +92,9 @@ export default Vue.extend({
   },
   data() {
     return {
-      value:        null as string | null,
+      value:        undefined as string | undefined,
       selected:     null as string | null,
-      editedItem:   null as string | null,
+      editedItem:   undefined as string | undefined,
       isCreateItem: false,
       errors:       { duplicate: false } as Record<Error, boolean>
     };
@@ -281,7 +281,7 @@ export default Vue.extend({
         this.isCreateItem = true;
         this.setFocus(INPUT.create);
       } else {
-        this.value = null;
+        this.value = undefined;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
@@ -303,11 +303,11 @@ export default Vue.extend({
         this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
-        this.value = null;
+        this.value = undefined;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.editedItem = null;
+        this.editedItem = undefined;
       }
     },
 
@@ -502,7 +502,7 @@ export default Vue.extend({
         <button
           data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem || editedItem"
+          :disabled="!!isCreateItem || !!editedItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />

package/scripts/.gitlab/workflows/build-extension-catalog.gitlab-ci.yml

@@ -0,0 +1,50 @@
+.podman-setup: &podman-setup
+  - zypper --non-interactive install jq podman
+  - usermod --add-subuids 100000-165535 --add-subgids 100000-165535 $(id -nu)
+  - podman login -u $REGISTRY_USER -p $REGISTRY_PASSWORD $REGISTRY
+
+check_version_collisions:
+  stage: check_version
+  rules:
+    - changes:
+        - package.json
+  script:
+    - *podman-setup
+    - |
+      PACKAGE_VERSION=`jq -r .version package.json`
+      PACKAGE_NAME=`jq -r .name package.json`
+
+      readarray -t VERSIONS < <(podman search $REGISTRY/$IMAGE_NAMESPACE/ui-extension-$PACKAGE_NAME --list-tags --format {{.Tag}})
+
+      echo -e "Checking for version collisions with Extension version: ${PACKAGE_VERSION}"
+      for version in ${VERSIONS[@]}; do
+        if [[ ${version} == ${PACKAGE_VERSION} ]]; then
+          echo "Cannot overwrite production image version ${version} since it already exists."
+          podman logout $REGISTRY
+          exit 1
+        fi
+      done
+
+      echo -e "Published image not found for version ${PACKAGE_VERSION}, continuing build..."
+  tags:
+    - linux
+
+build_and_release:
+  stage: build_catalog
+  rules:
+    - changes:
+        - package.json
+  script:
+    - *podman-setup
+    - zypper addrepo https://download.opensuse.org/repositories/devel:languages:nodejs/SLE_12_SP5/devel:languages:nodejs.repo
+    - zypper --non-interactive --no-gpg-checks refresh
+    - zypper --non-interactive install go git nodejs14 npm helm
+    - YQ_URL="https://github.com/mikefarah/yq/releases/download/v4.35.2/yq_linux_amd64"
+    - curl -sLf ${YQ_URL} -o /usr/bin/yq && chmod +x /usr/bin/yq
+    - npm install -g --unsafe-perm yarn
+    - yarn
+    - yarn publish-pkgs -cl -r $REGISTRY -o $IMAGE_NAMESPACE
+    - podman push `podman images -f reference!=registry.suse.com/bci/bci-base --format "{{index .Names 0}}"`
+    - podman logout $REGISTRY
+  tags:
+    - linux

package/scripts/extension/parse-tag-name

@@ -5,7 +5,7 @@ GITHUB_RUN_ID=$2
 GITHUB_WORKFLOW_TYPE=$3
 
 # Check packages for released tag name
-if [[ "${GITHUB_WORKFLOW_TYPE}" == "container" ]]; then
+if [[ "${GITHUB_WORKFLOW_TYPE}" == "charts" ]]; then
   for d in pkg/*/ ; do
     pkg=$(basename $d)
 
@@ -27,4 +27,4 @@ else
     echo -e "tag: ${GITHUB_RELEASE_TAG}"
     gh run cancel ${GITHUB_RUN_ID}
   fi
-fi
+fi

package/scripts/publish-shell.sh

@@ -8,6 +8,8 @@ BASE_DIR="$(
 SHELL_DIR=$BASE_DIR/shell/
 TMP_DIR=$BASE_DIR/tmp
 PUBLISH_ARGS="--no-git-tag-version --access public $PUBLISH_ARGS"
+FORCE_PUBLISH_TO_NPM="false"
+DEFAULT_YARN_REGISTRY="https://registry.npmjs.org"
 
 if [ ! -d "${BASE_DIR}/node_modules" ]; then
   echo "You need to run 'yarn install' first"
@@ -16,6 +18,14 @@ fi
 
 echo "Publishing Shell Packages"
 
+if [ "$1" == "--npm" ]; then
+  FORCE_PUBLISH_TO_NPM="true"
+fi
+
+if [ "$FORCE_PUBLISH_TO_NPM" == "true" ]; then
+  export YARN_REGISTRY=$DEFAULT_YARN_REGISTRY
+fi
+
 # We use the version from the shell package for the creator packages
 # Need to copy them to a temporary location, so we can patch the version number
 # before publishing

package/scripts/test-plugins-build.sh

@@ -7,6 +7,9 @@ echo "Checking plugin build"
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
 SHELL_DIR=$BASE_DIR/shell/
+SHELL_VERSION="99.99.99"
+DEFAULT_YARN_REGISTRY="https://registry.npmjs.org"
+VERDACCIO_YARN_REGISTRY="http://localhost:4873"
 
 echo ${SCRIPT_DIR}
 
@@ -66,21 +69,24 @@ else
   rm -rf ~/.config/verdaccio/storage/@rancher/*
 fi
 
-export YARN_REGISTRY=http://localhost:4873
+export YARN_REGISTRY=$VERDACCIO_YARN_REGISTRY
 export NUXT_TELEMETRY_DISABLED=1
 
 # Remove test package from previous run, if present
-rm -rf ${BASE_DIR}/pkg/test-pkg
+if [ $TEST_PERSIST_BUILD != "true" ]; then
+  echo "Removing folder ${BASE_DIR}/pkg/test-pkg"
+  rm -rf ${BASE_DIR}/pkg/test-pkg
+fi
 
 # We need to patch the version number of the shell, otherwise if we are running
 # with the currently published version, things will fail as those versions
 # are already published and Verdaccio will check, since it is a read-through cache
-sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\",/\"version\": \"7.7.7\",/g" ${SHELL_DIR}/package.json
+sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\(-alpha\.[0-9]*\|-release[0-9]*.[0-9]*.[0-9]*\|-rc\.[0-9]*\)\{0,1\}\",/\"version\": \"${SHELL_VERSION}\",/g" ${SHELL_DIR}/package.json
 rm ${SHELL_DIR}/package.json.bak
 
 # Same as above for Rancher Components
 # We might have bumped the version number but its not published yet, so this will fail
-sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\",/\"version\": \"7.7.7\",/g" ${BASE_DIR}/pkg/rancher-components/package.json
+sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\(-alpha\.[0-9]*\|-release[0-9]*.[0-9]*.[0-9]*\|-rc\.[0-9]*\)\{0,1\}\",/\"version\": \"${SHELL_VERSION}\",/g" ${BASE_DIR}/pkg/rancher-components/package.json
 
 # Publish shell
 echo "Publishing shell packages to local registry"
@@ -108,6 +114,7 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   yarn install
 
   echo "Building skeleton app"
+
   FORCE_COLOR=true yarn build | cat
 
   # Package creator
@@ -127,22 +134,91 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   echo "Cleaning temporary dir"
   popd > /dev/null
 
-  rm -rf ${DIR}
+  if [ $TEST_PERSIST_BUILD != "true" ]; then
+    echo "Removing folder ${DIR}"
+    rm -rf ${DIR}
+  fi
 fi
 
 pushd $BASE_DIR
-pwd
-ls
 
 # Now try a plugin within the dashboard codebase
 echo "Validating in-tree package"
 
 yarn install
 
-rm -rf ./pkg/test-pkg
+if [ $TEST_PERSIST_BUILD != "true" ]; then
+  echo "Removing folder ./pkg/test-pkg"
+  rm -rf ./pkg/test-pkg
+fi
+
 yarn create @rancher/pkg test-pkg -t
 cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue ./pkg/test-pkg/list
 FORCE_COLOR=true yarn build-pkg test-pkg | cat
-rm -rf ./pkg/test-pkg
+if [ $TEST_PERSIST_BUILD != "true" ]; then
+  echo "Removing folder ./pkg/test-pkg"
+  rm -rf ./pkg/test-pkg
+fi
+
+# function to clone repos and install dependencies (including the newly published shell version)
+function clone_repo_test_extension_build() {
+  REPO_NAME=$1
+  PKG_NAME=$2
+
+  echo -e "\nSetting up $REPO_NAME repository locally\n"
+
+  # set registry to default (to install all of the other dependencies)
+  yarn config set registry ${DEFAULT_YARN_REGISTRY}
+
+  if [ $TEST_PERSIST_BUILD != "true" ]; then
+    echo "Removing folder ${BASE_DIR}/$REPO_NAME"
+    rm -rf ${BASE_DIR}/$REPO_NAME
+  fi
+
+  # cloning repo
+  git clone https://github.com/rancher/$REPO_NAME.git
+  pushd ${BASE_DIR}/$REPO_NAME
+
+  echo -e "\nInstalling dependencies for $REPO_NAME\n"
+  yarn install
+
+  # set registry to local verdaccio (to install new shell)
+  yarn config set registry ${VERDACCIO_YARN_REGISTRY}
+
+  # update package.json to use a specific version of shell
+  sed -i.bak -e "s/\"\@rancher\/shell\": \"[0-9]*.[0-9]*.[0-9]*\",/\"\@rancher\/shell\": \"${SHELL_VERSION}\",/g" package.json
+  rm package.json.bak
+
+  # we need to remove yarn.lock, otherwise it would install a version that we don't want
+  rm yarn.lock
+
+  echo -e "\nInstalling newly built shell version\n"
+
+  # installing new version of shell
+  yarn add @rancher/shell@${SHELL_VERSION}
+
+  # test build-pkg
+  FORCE_COLOR=true yarn build-pkg $PKG_NAME | cat
+
+  # kubewarden has some unit tests and they should be quick to run... Let's check them as well
+  if [ "${REPO_NAME}" == "kubewarden-ui" ]; then
+    yarn test:ci
+  fi
+
+  # return back to the base path
+  popd
+
+  # delete folder
+  if [ $TEST_PERSIST_BUILD != "true" ]; then
+    echo "Removing folder ${BASE_DIR}/$REPO_NAME"
+    rm -rf ${BASE_DIR}/$REPO_NAME
+  fi
+  yarn config set registry ${DEFAULT_YARN_REGISTRY}
+}
+
+# Here we just add the extension that we want to include as a check (all our official extensions should be included here)
+# Don't forget to add the unit tests exception to clone_repo_test_extension_build function if a new extension has those
+clone_repo_test_extension_build "kubewarden-ui" "kubewarden"
+clone_repo_test_extension_build "elemental-ui" "elemental"
 
 echo "All done"