@rancher/shell 0.3.28 → 0.4.0

package/rancher-components/StringList/StringList.vue

@@ -30,9 +30,9 @@ const CLASS = {
  * Manage a list of strings
  */
 export default Vue.extend({
-  components: { LabeledInput },
 
-  name: 'StringList',
+  name:       'StringList',
+  components: { LabeledInput },
 
   props: {
     /**
@@ -85,11 +85,11 @@ export default Vue.extend({
   },
   data() {
     return {
-      value:             null as string | null,
-      selected:          null as string | null,
-      isEditItem:        null as string | null,
-      isCreateItem:      false,
-      errors:            { duplicate: false } as Record<Error, boolean>
+      value:        null as string | null,
+      selected:     null as string | null,
+      editedItem:   null as string | null,
+      isCreateItem: false,
+      errors:       { duplicate: false } as Record<Error, boolean>
     };
   },
 
@@ -100,8 +100,8 @@ export default Vue.extend({
      */
     errorMessagesArray(): string[] {
       return (Object.keys(this.errors) as Error[])
-        .filter(f => !!(this.errors)[f])
-        .map(k => this.errorMessages[k]);
+        .filter((f) => this.errors[f] && this.errorMessages[f])
+        .map((k) => this.errorMessages[k]);
     },
   },
 
@@ -113,23 +113,35 @@ export default Vue.extend({
       this.toggleEditMode(false);
       this.toggleCreateMode(false);
     },
+    value(val) {
+      this.$emit('type:item', val);
+    },
+    errors: {
+      handler(val) {
+        this.$emit('errors', val);
+      },
+      deep: true
+    }
   },
 
   methods: {
     onChange(value: string) {
       this.value = value;
-      /**
-       * Remove duplicate error when a new value is typed
-       */
+
+      const items = [
+        ...this.items,
+        this.value
+      ];
+
       this.toggleError(
         'duplicate',
-        false,
-        this.isCreateItem ? INPUT.create : INPUT.edit,
+        hasDuplicatedStrings(items, this.caseSensitive),
+        this.isCreateItem ? INPUT.create : INPUT.edit
       );
     },
 
     onSelect(item: string) {
-      if (this.isCreateItem || this.isEditItem === item) {
+      if (this.readonly || this.isCreateItem || this.editedItem === item) {
         return;
       }
       this.selected = item;
@@ -160,7 +172,7 @@ export default Vue.extend({
     },
 
     onClickEmptyBody() {
-      if (!this.isCreateItem && !this.isEditItem) {
+      if (!this.isCreateItem && !this.editedItem) {
         this.toggleCreateMode(true);
       }
     },
@@ -176,38 +188,43 @@ export default Vue.extend({
 
         return;
       }
-      if (this.isEditItem) {
+      if (this.editedItem) {
+        this.deleteAndSelectNext(this.editedItem);
         this.toggleEditMode(false);
 
         return;
       }
       if (this.selected) {
-        const index = findStringIndex(this.items, this.selected, false);
+        this.deleteAndSelectNext(this.selected);
+      }
+    },
 
-        if (index !== -1) {
-          /**
-           * Select the next item in the list when an item is to be deleted.
-           */
-          const item = (this.items[index + 1] || this.items[index - 1]);
+    deleteAndSelectNext(currItem: string) {
+      const index = findStringIndex(this.items, currItem, false);
+
+      if (index !== -1) {
+        /**
+         * Select the next item in the list.
+         */
+        const item = (this.items[index + 1] || this.items[index - 1]);
 
-          this.onSelect(item);
-          this.setFocus(item);
+        this.onSelect(item);
+        this.setFocus(item);
 
-          this.deleteItem(this.items[index]);
-        }
+        this.deleteItem(this.items[index]);
       }
     },
 
     setFocus(refId: string) {
-      this.$nextTick(() => this.getElemByRef(refId)?.focus());
+      this.$nextTick(() => (this.getElemByRef(refId) as Vue & HTMLElement)?.focus());
     },
 
     /**
      * Move scrollbar when the selected item is over the top or bottom side of the box
      */
     moveScrollbar(arrow: Arrow, value?: number) {
-      const box = this.getElemByRef(BOX);
-      const item = this.getElemByRef(this.selected || '');
+      const box = this.getElemByRef(BOX) as HTMLElement;
+      const item = this.getElemByRef(this.selected || '') as HTMLElement;
 
       if (box && item && item.className.includes(CLASS.item)) {
         const boxRect = box.getClientRects()[0];
@@ -229,13 +246,14 @@ export default Vue.extend({
      */
     toggleError(type: Error, val: boolean, refId?: string) {
       this.errors[type] = val;
+
       if (refId) {
         this.toggleErrorClass(refId, val);
       }
     },
 
     toggleErrorClass(refId: string, val: boolean) {
-      const input = this.getElemByRef(refId)?.$el;
+      const input = (this.getElemByRef(refId) as Vue)?.$el;
 
       if (input) {
         if (val) {
@@ -250,7 +268,11 @@ export default Vue.extend({
      * Show/Hide the input line to create new item
      */
     toggleCreateMode(show: boolean) {
+      if (this.readonly) {
+        return;
+      }
       if (show) {
+        this.toggleEditMode(false);
         this.value = '';
 
         this.isCreateItem = true;
@@ -268,31 +290,34 @@ export default Vue.extend({
      * Show/Hide the in-line editing to edit an existing item
      */
     toggleEditMode(show: boolean, item?: string) {
+      if (this.readonly) {
+        return;
+      }
       if (show) {
         this.toggleCreateMode(false);
-        this.value = this.isEditItem;
+        this.value = this.editedItem;
 
-        this.isEditItem = item || '';
+        this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
         this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.isEditItem = null;
+        this.editedItem = null;
       }
     },
 
     getElemByRef(id: string) {
       const ref = this.$refs[id];
 
-      return (Array.isArray(ref) ? ref[0] : ref) as any;
+      return Array.isArray(ref) ? ref[0] : ref;
     },
 
     /**
      * Create a new item and insert in the items list
      */
-    saveItem() {
+    saveItem(closeInput = true) {
       const value = this.value?.trim();
 
       if (value) {
@@ -301,21 +326,20 @@ export default Vue.extend({
           value,
         ];
 
-        if (hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.toggleError('duplicate', true, INPUT.create);
-
-          return;
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
         }
+      }
 
-        this.updateItems(items);
+      if (closeInput) {
+        this.toggleCreateMode(false);
       }
-      this.toggleCreateMode(false);
     },
 
     /**
      * Update an existing item in the items list
      */
-    updateItem(item: string) {
+    updateItem(item: string, closeInput = true) {
       const value = this.value?.trim();
 
       if (value) {
@@ -326,22 +350,21 @@ export default Vue.extend({
           items[index] = value;
         }
 
-        if (hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.toggleError('duplicate', true, INPUT.edit);
-
-          return;
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
         }
+      }
 
-        this.updateItems(items);
+      if (closeInput) {
+        this.toggleEditMode(false);
       }
-      this.toggleEditMode(false);
     },
 
     /**
      * Remove an item from items list
      */
     deleteItem(item?: string) {
-      const items = this.items.filter(f => f !== item);
+      const items = this.items.filter((f) => f !== item);
 
       this.updateItems(items);
     },
@@ -387,19 +410,20 @@ export default Vue.extend({
         @blur="onSelectLeave(item)"
       >
         <span
-          v-if="!isEditItem || isEditItem !== item"
+          v-if="!editedItem || editedItem !== item"
           class="label static"
         >
           {{ item }}
         </span>
         <LabeledInput
-          v-if="isEditItem && isEditItem === item"
+          v-if="editedItem && editedItem === item"
           ref="item-edit"
+          :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
           @input="onChange($event)"
-          @blur.prevent="toggleEditMode(false)"
-          @keydown.native.enter="updateItem(item)"
+          @blur.prevent="updateItem(item)"
+          @keydown.native.enter="updateItem(item, !errors.duplicate)"
         />
       </div>
       <div
@@ -408,12 +432,14 @@ export default Vue.extend({
       >
         <LabeledInput
           ref="item-create"
+          data-testid="item-create"
           class="create-input static"
           type="text"
           :value="value"
           :placeholder="placeholder"
           @input="onChange($event)"
-          @keydown.native.enter="saveItem"
+          @blur.prevent="saveItem"
+          @keydown.native.enter="saveItem(!errors.duplicate)"
         />
       </div>
     </div>
@@ -427,25 +453,32 @@ export default Vue.extend({
         class="action-buttons"
       >
         <button
+          data-testid="button-remove"
           class="btn btn-sm role-tertiary remove-button"
-          :disabled="!selected && !isCreateItem && !isEditItem"
+          :disabled="!selected && !isCreateItem && !editedItem"
           @mousedown.prevent="onClickMinusButton"
         >
           <span class="icon icon-minus icon-sm" />
         </button>
         <button
+          data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem"
+          :disabled="isCreateItem || editedItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />
         </button>
       </div>
       <div class="messages">
-        <i v-if="errorMessagesArray.length > 0" class="icon icon-warning icon-lg" />
+        <i
+          v-if="errorMessagesArray.length > 0"
+          data-testid="i-warning-icon"
+          class="icon icon-warning icon-lg"
+        />
         <span
           v-for="(msg, idx) in errorMessagesArray"
           :key="idx"
+          :data-testid="`span-error-message-${msg}`"
           class="error"
         >
           {{ idx > 0 ? '; ' : '' }}
@@ -499,6 +532,7 @@ export default Vue.extend({
         width: auto;
         user-select: none;
         overflow: hidden;
+        white-space: no-wrap;
         text-overflow: ellipsis;
         padding-top: 1px;
       }

package/scripts/extension/bundle

@@ -16,6 +16,7 @@ REGISTRY="${3}"
 REGISTRY_ORG="${4}"
 IMAGE_PREFIX="${5}"
 PUSH="${6}"
+PODMAN_CONTAINER="${7}"
 
 PKG_NAME="${PKG}-${PKG_VERSION}"
 
@@ -48,12 +49,15 @@ for d in ${BASE_DIR}/dist-pkg/*; do
   cp -R ${BASE_DIR}/dist-pkg/${pkg} ${TMP}/container/plugin
 done
 
-# Build the docker image
-pushd ${TMP}/container > /dev/null
-echo -e "${CYAN}Building container image ...${RESET}"
+package() {
+  if [ "${PODMAN_CONTAINER}" == "true" ]; then
+    RUNTIME="podman"
+  else
+    RUNTIME="docker"
+  fi
+  echo -e "Container build: ${RUNTIME}"
 
-if [ ! -z "${REGISTRY}" ]; then
-  REGISTRY=${REGISTRY} ORG=${REGISTRY_ORG} REPO=${IMAGE_PREFIX}${PKG} TAG=${PKG_VERSION} ./scripts/package
+  REGISTRY=${REGISTRY} ORG=${REGISTRY_ORG} REPO=${IMAGE_PREFIX}${PKG} TAG=${PKG_VERSION} RUNTIME=${RUNTIME} ./scripts/package
 
   if [ "${PUSH}" == "--push" ]; then
     echo -e "${CYAN}Pushing container image ...${RESET}"
@@ -61,14 +65,22 @@ if [ ! -z "${REGISTRY}" ]; then
     # Ensure that you do not overwrite production images
     if [[ "${REGISTRY_ORG}" == "rancher" ]]; then
       IMAGE=${REGISTRY}${REGISTRY_ORG}/${IMAGE_PREFIX}${PKG}:${PKG_VERSION}
-      if docker manifest inspect 2>&1 1>/dev/null; then
+      if ${RUNTIME} manifest inspect ${IMAGE} 2>&1 1>/dev/null; then
         echo -e "${RED}${BOLD}Cannot overwrite production image ${IMAGE_PREFIX}${PKG} since it already exists${RESET}"
         exit 1
       fi
     fi
 
-    docker push ${REGISTRY}${REGISTRY_ORG}/${IMAGE_PREFIX}${PKG}:${PKG_VERSION}
+    ${RUNTIME} push ${REGISTRY}${REGISTRY_ORG}/${IMAGE_PREFIX}${PKG}:${PKG_VERSION}
   fi
+}
+
+# Build the container image
+pushd ${TMP}/container > /dev/null
+echo -e "${CYAN}Building container image ...${RESET}"
+
+if [ ! -z "${REGISTRY}" ]; then
+  package
 fi
 
 popd > /dev/null

package/scripts/extension/helm/scripts/package

@@ -5,8 +5,8 @@ source $(dirname $0)/version
 
 cd $(dirname $0)/..
 
-if [[ -z ${ORG} ]] || [[ -z ${REPO} ]] || [[ -z ${TAG} ]]; then
-    echo "Usage: [REGISTRY=] ORG= REPO= TAG= ./scripts/package"
+if [[ -z ${ORG} ]] || [[ -z ${REPO} ]] || [[ -z ${TAG} ]] || [[ -z ${RUNTIME} ]]; then
+    echo "Usage: [REGISTRY=] ORG= REPO= TAG= RUNTIME= ./scripts/package"
     exit 1
 fi
 
@@ -19,5 +19,13 @@ if [ -e ${DOCKERFILE}.${ARCH} ]; then
     DOCKERFILE=${DOCKERFILE}.${ARCH}
 fi
 
-docker build -f ${DOCKERFILE} -t ${IMAGE} .
+BUILD="${RUNTIME} build -f ${DOCKERFILE} -t ${IMAGE}"
+
+if [[ ${RUNTIME} == "podman" ]]; then
+    BUILD="$BUILD -v /var/lib/containers:/var/lib/containers ."
+else
+    BUILD="$BUILD ."
+fi
+
+$BUILD
 echo Built ${IMAGE}

package/scripts/extension/publish

@@ -17,6 +17,7 @@ IMAGE_PREFIX="ui-extension-"
 FORCE="false"
 GITHUB_BUILD="true"
 GITHUB_RELEASE_TAG=""
+PODMAN_CONTAINER="false"
 
 GITHUB_SOURCE=$(git config --get remote.origin.url | sed -e 's/^git@.*:\([[:graph:]]*\).git/\1/')
 GITHUB_BRANCH="main"
@@ -33,10 +34,11 @@ usage() {
   echo "  -r <name>    Specify destination container registry for built images"
   echo "  -o <name>    Specify destination container registry organization for built images"
   echo "  -i <prefix>  Specify prefix for the built container image (default: 'ui-extension-')"
+  echo "  -l           Specify Podman container build"
   exit 1
 }
 
-while getopts "hvr:o:pi:fcb:t:s:" opt; do
+while getopts "hvr:o:pi:fcb:t:s:l" opt; do
   case $opt in
     h)
       usage
@@ -70,6 +72,9 @@ while getopts "hvr:o:pi:fcb:t:s:" opt; do
     t)
       GITHUB_RELEASE_TAG="${OPTARG}"
       ;;
+    l)
+      PODMAN_CONTAINER="true"
+      ;;
     *)
       usage
       ;;
@@ -126,7 +131,11 @@ fi
 
 COMMANDS=("node" "jq" "yq" "git" "helm" "yarn")
 if [ "${GITHUB_BUILD}" == "false" ]; then
-  COMMANDS+=("docker")
+  if [ "${PODMAN_CONTAINER}" == "true" ]; then
+    COMMANDS+=("podman")
+  else
+    COMMANDS+=("docker")
+  fi
 fi
 
 HAVE_COMMANDS="true"
@@ -172,10 +181,12 @@ if [ "${GITHUB_BUILD}" == "false" ]; then
     exit 1
   fi
 
-  docker images > /dev/null
-  if [ $? -ne 0 ]; then
-    echo "docker is not running - this is required to build container images for the UI Plugins"
-    exit 1
+  if [ "${PODMAN_CONTAINER}" == "false" ]; then
+    docker images > /dev/null
+    if [ $? -ne 0 ]; then
+      echo "docker is not running - this is required to build container images for the UI Plugins"
+      exit 1
+    fi
   fi
 fi
 
@@ -354,8 +365,8 @@ if [ "${GITHUB_BUILD}" == "false" ]; then
   echo -e "${CYAN}Base extension: ${BASE_EXT}${RESET}"
   echo -e "${CYAN}Extension version: ${EXT_VERSION}${RESET}"
 
-  # Build the docker image
-  ${SCRIPT_DIR}/bundle ${BASE_EXT} ${EXT_VERSION} ${REGISTRY} ${REGISTRY_ORG} ${IMAGE_PREFIX} ${PUSH}
+  # Build the container image
+  ${SCRIPT_DIR}/bundle "${BASE_EXT}" "${EXT_VERSION}" "${REGISTRY}" "${REGISTRY_ORG}" "${IMAGE_PREFIX}" "${PUSH}" "${PODMAN_CONTAINER}"
 else
   rm -rf ${CHART_TEMPLATE}
 fi
@@ -386,5 +397,5 @@ fi
 rm -rf ${CHART_TMP}
 
 if [ "${GITHUB_BUILD}" == "false" ]; then
-  rm -rf ${TMP}
+  rm -rf ${TMP} ${ASSETS} ${CHARTS} ${BASE_DIR}/extensions ${BASE_DIR}/dist-pkg ${ROOT_INDEX}
 fi