@prorobotech/openapi-k8s-toolkit 0.0.1-alpha.124 → 0.0.1-alpha.125

package/dist/openapi-k8s-toolkit.es.js

@@ -1,8 +1,8 @@
 import o, { useRef, useContext, useDebugValue, createElement, useState, useLayoutEffect, useEffect, Fragment, createContext, useMemo, isValidElement, cloneElement, useCallback, useInsertionEffect, useSyncExternalStore, memo, Suspense } from 'react';
 import { Input, Tree, Modal, Alert, theme, Select, Tag, Breadcrumb, Spin, Menu, Tooltip, Space, Button, Flex, Typography, Card, Row, Col, Tabs, Form, Popover, notification, Table, Slider, InputNumber, Switch, Dropdown, Result, Progress, Checkbox } from 'antd';
-import { LoadingOutlined, ExclamationCircleFilled, CloseCircleFilled, CheckCircleFilled, CaretDownOutlined, CaretRightOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined, SearchOutlined, EditOutlined, DeleteOutlined, CheckOutlined, CloseOutlined, BugOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
+import { LoadingOutlined, ExclamationCircleFilled, CloseCircleFilled, CheckCircleFilled, CaretDownOutlined, CaretRightOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined, SearchOutlined, EditOutlined, DeleteOutlined, CheckOutlined, CloseOutlined, BugOutlined, PlusOutlined, EllipsisOutlined, ClearOutlined } from '@ant-design/icons';
 import { useQuery, useQueries, useQueryClient } from '@tanstack/react-query';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 function getDefaultExportFromCjs$1 (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -8431,6 +8431,17 @@ const ResumeCircleIcon = () => {
   ) });
 };
 
+const LookingGlassIcon = ({ width, height }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: width ?? 36, height: height ?? 37, viewBox: "0 0 36 37", fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M35.7507 33.7958L24.1569 22.202C25.9561 19.8761 26.9293 17.0324 26.9293 14.0413C26.9293 10.4609 25.5319 7.10379 23.0052 4.57254C20.4784 2.04129 17.1123 0.648438 13.5364 0.648438C9.96052 0.648438 6.59445 2.04576 4.06766 4.57254C1.53641 7.09933 0.143555 10.4609 0.143555 14.0413C0.143555 17.6172 1.54088 20.9833 4.06766 23.51C6.59445 26.0413 9.95605 27.4342 13.5364 27.4342C16.5275 27.4342 19.3668 26.4609 21.6927 24.6663L33.2864 36.2556C33.3204 36.2896 33.3608 36.3166 33.4052 36.335C33.4496 36.3534 33.4972 36.3629 33.5453 36.3629C33.5934 36.3629 33.6411 36.3534 33.6855 36.335C33.7299 36.3166 33.7703 36.2896 33.8043 36.2556L35.7507 34.3136C35.7847 34.2796 35.8117 34.2393 35.8301 34.1948C35.8485 34.1504 35.858 34.1028 35.858 34.0547C35.858 34.0066 35.8485 33.959 35.8301 33.9146C35.8117 33.8701 35.7847 33.8298 35.7507 33.7958ZM20.6078 21.1127C18.715 23.0011 16.2061 24.0413 13.5364 24.0413C10.8668 24.0413 8.35784 23.0011 6.46498 21.1127C4.57659 19.2199 3.53641 16.7109 3.53641 14.0413C3.53641 11.3717 4.57659 8.85826 6.46498 6.96987C8.35784 5.08147 10.8668 4.04129 13.5364 4.04129C16.2061 4.04129 18.7194 5.07701 20.6078 6.96987C22.4962 8.86272 23.5364 11.3717 23.5364 14.0413C23.5364 16.7109 22.4962 19.2243 20.6078 21.1127Z",
+      fill: "currentColor",
+      fillOpacity: "0.88"
+    }
+  ) });
+};
+
 const ContentContainer = st$1.div`
   border: 1px solid ${({ $borderColor }) => $borderColor};
   border-radius: 6px;
@@ -36882,8 +36893,8 @@ const pickInRange = (u32, min, max) => min + u32 % (max - min + 1);
 const hslFromString = (value, theme) => {
   const hash = fnv1a32(value);
   const hue = hash % 345;
-  const [sMin, sMax] = theme === "light" ? [90, 100] : [80, 100];
-  const [lMin, lMax] = theme === "light" ? [78, 80] : [35, 50];
+  const [sMin, sMax] = theme === "light" ? [90, 100] : [78, 80];
+  const [lMin, lMax] = theme === "light" ? [78, 80] : [35, 40];
   const s = pickInRange(hash >>> 8, sMin, sMax);
   const l = pickInRange(hash >>> 16, lMin, lMax);
   return `hsl(${hue}, ${s}%, ${l}%)`;
@@ -49724,6 +49735,7 @@ const MaxTagPlacheolderLength = st$1.span`
   padding-left: 4px;
   border: 1px solid ${({ $colorBorder }) => $colorBorder};
   border-radius: 20px;
+  margin-right: 8px;
 `;
 const OptionLabelKind = st$1.div`
   font-size: 14px;
@@ -49740,14 +49752,16 @@ const OptionLabelVersion = st$1.div`
 const BackgroundContainer = st$1.div`
   width: 100%;
   gap: 8px;
-  border: 1px solid ${({ $colorBorder }) => $colorBorder};
+  border: 1px solid
+    ${({ $visibleBackground, $colorBorder }) => $visibleBackground && $colorBorder ? $colorBorder : "transparent"};
   border-radius: 6px;
-  background: ${({ $colorBgLayout }) => $colorBgLayout};
+  background: ${({ $visibleBackground, $colorBgLayout }) => $visibleBackground && $colorBgLayout ? $colorBgLayout : "initial"};
   padding: 8px;
 `;
 const FormContainer = st$1.div`
   display: grid;
-  grid-template-columns: 3fr 9fr;
+  /* grid-template-columns: 3fr 9fr; */
+  grid-template-columns: 3fr 130px 9fr;
   gap: 8px;
 `;
 const ResetedFormItem = st$1(Form.Item)`
@@ -49756,41 +49770,38 @@ const ResetedFormItem = st$1(Form.Item)`
 const HideableContainer = st$1.div`
   display: ${({ $isHidden }) => $isHidden ? "none" : "initial"};
 `;
-const CompoundItem = st$1.div`
+const BottomTagsContainer = st$1.div`
   display: grid;
-  grid-template-columns: 130px 1fr;
+  grid-template-columns: 1fr 50px;
+  gap: 8px;
+  margin-top: 8px;
 `;
-const LeftSideSelect = st$1(Select)`
-  /* stylelint-disable declaration-no-important */
-
-  .ant-select-selector {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    border-right-width: 0 !important;
-    height: 32px !important;
-  }
+const OptionsFlex = st$1.div`
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
 `;
-const RightSideInput = st$1(Input)`
-  &&&.ant-input-outlined {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-left-width: 0 !important;
-    height: 32px !important;
-  }
+const BottomTagsRow = st$1.div`
+  display: grid;
+  grid-template-columns: 45px 1fr;
+  gap: 4px;
 `;
-const RightSideSelect = st$1(Select)`
-  .ant-select-selector {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-left-width: 0 !important;
-    height: 32px !important;
-  }
+const BottomTagsRowText = st$1.div`
+  color: ${({ $colorDescription }) => $colorDescription};
+  font-size: 12px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 14px; /* 116.667% */
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  height: 100%;
+  padding-top: 5px;
 `;
 const BottomTagsHolder = st$1.div`
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
-  margin-top: 8px;
 `;
 const CustomTag = st$1(Tag)`
   font-size: 14px;
@@ -49800,13 +49811,14 @@ const CustomTag = st$1(Tag)`
 const Abbr = st$1.span`
   background-color: ${({ $bgColor }) => $bgColor};
   border-radius: 13px;
-  padding: 2px 5px;
+  padding: 1px 5px;
+  font-size: 13px;
   height: min-content;
+  margin-right: 4px;
 `;
 const ClearButtonHolder = st$1.div`
   display: flex;
   justify-content: flex-end;
-  margin-top: 8px;
 `;
 const Styled = {
   SelectTag,
@@ -49819,10 +49831,14 @@ const Styled = {
   FormContainer,
   ResetedFormItem,
   HideableContainer,
-  CompoundItem,
-  LeftSideSelect,
-  RightSideInput,
-  RightSideSelect,
+  // CompoundItem,
+  // LeftSideSelect,
+  // RightSideInput,
+  // RightSideSelect,
+  BottomTagsContainer,
+  OptionsFlex,
+  BottomTagsRow,
+  BottomTagsRowText,
   BottomTagsHolder,
   CustomTag,
   Abbr,
@@ -49831,6 +49847,7 @@ const Styled = {
 
 const Search = ({ theme: theme$1, form, constants, kindsWithVersion }) => {
   const { token } = theme.useToken();
+  const [sp, setSearchParams] = useSearchParams();
   const { FIELD_NAME, FIELD_NAME_STRING, FIELD_NAME_LABELS, FIELD_NAME_FIELDS, TYPE_SELECTOR } = constants;
   const watchedKinds = Form.useWatch(FIELD_NAME, form);
   const watchedName = Form.useWatch(FIELD_NAME_STRING, form);
@@ -49839,7 +49856,7 @@ const Search = ({ theme: theme$1, form, constants, kindsWithVersion }) => {
   const watchedTypedSelector = Form.useWatch(TYPE_SELECTOR, form);
   const options = kindsWithVersion.filter(({ version }) => version.verbs && version.verbs.includes("list")).map(({ kind, group, version }) => {
     const abbr = getUppercase(kind);
-    const bgColor = kind && kind.length ? hslFromString(abbr, theme$1) : "";
+    const bgColor = kind && kind.length ? hslFromString(kind, theme$1) : "";
     return {
       label: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: 8, align: "center", children: [
         bgColor.length && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.Abbr, { $bgColor: bgColor, children: abbr }),
@@ -49893,199 +49910,214 @@ const Search = ({ theme: theme$1, form, constants, kindsWithVersion }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: option.label })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.BackgroundContainer, { $colorBorder: token.colorBorder, $colorBgLayout: token.colorBgLayout, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Form, { form, layout: "vertical", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.FormContainer, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ResetedFormItem, { name: FIELD_NAME, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Select,
-        {
-          mode: "multiple",
-          placeholder: "Select",
-          options,
-          filterOption: (input, option) => (option?.value || "").toString().toLowerCase().includes(input.toLowerCase()),
-          allowClear: true,
-          showSearch: true,
-          maxTagCount: 0,
-          maxTagPlaceholder,
-          tagRender: maxTagTagRender,
-          menuItemSelectedIcon: null,
-          optionRender: kindOptionRender
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.CompoundItem, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ResetedFormItem, { name: TYPE_SELECTOR, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled.LeftSideSelect,
-          {
-            placeholder: "Select",
-            options: [
-              { label: "Name", value: "name" },
-              { label: "Labels", value: "labels" },
-              { label: "Fields", value: "fields" }
-            ],
-            defaultValue: "name",
-            filterOption: filterSelectOptions,
-            showSearch: true
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled.HideableContainer,
-          {
-            $isHidden: watchedTypedSelector === "labels" || watchedTypedSelector === "fields",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ResetedFormItem, { name: FIELD_NAME_STRING, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.RightSideInput, { allowClear: true, placeholder: "Name", disabled: !watchedKinds || !watchedKinds.length }) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled.HideableContainer,
-          {
-            $isHidden: watchedTypedSelector === "name" || watchedTypedSelector === "fields" || watchedTypedSelector === void 0,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Styled.ResetedFormItem,
-              {
-                name: FIELD_NAME_LABELS,
-                validateTrigger: "onBlur",
-                rules: [
-                  () => ({
-                    validator(_, value) {
-                      if (Array.isArray(value) && value.every((str) => typeof str === "string" && str.includes("=") && !str.startsWith("="))) {
-                        return Promise.resolve();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Styled.BackgroundContainer,
+    {
+      $colorBorder: token.colorBorder,
+      $colorBgLayout: token.colorBgLayout,
+      $visibleBackground: Boolean(
+        watchedKinds && watchedKinds.length || watchedName && watchedName.length || watchedLabels && watchedLabels.length || watchedFields && watchedFields.length
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Form, { form, layout: "vertical", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.FormContainer, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ResetedFormItem, { name: FIELD_NAME, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Select,
+            {
+              mode: "multiple",
+              placeholder: "Select kinds",
+              options,
+              filterOption: (input, option) => (option?.value || "").toString().toLowerCase().includes(input.toLowerCase()),
+              allowClear: true,
+              showSearch: true,
+              maxTagCount: 0,
+              maxTagPlaceholder,
+              tagRender: maxTagTagRender,
+              menuItemSelectedIcon: null,
+              optionRender: kindOptionRender
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ResetedFormItem, { name: TYPE_SELECTOR, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Select,
+            {
+              placeholder: "Select",
+              options: [
+                { label: "Name", value: "name" },
+                { label: "Labels", value: "labels" },
+                { label: "Fields", value: "fields" }
+              ],
+              defaultValue: "name",
+              filterOption: filterSelectOptions,
+              showSearch: true
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.HideableContainer, { $isHidden: watchedTypedSelector === "labels" || watchedTypedSelector === "fields", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ResetedFormItem, { name: FIELD_NAME_STRING, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { allowClear: true, placeholder: "Name", disabled: !watchedKinds || !watchedKinds.length }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Styled.HideableContainer,
+            {
+              $isHidden: watchedTypedSelector === "name" || watchedTypedSelector === "fields" || watchedTypedSelector === void 0,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Styled.ResetedFormItem,
+                {
+                  name: FIELD_NAME_LABELS,
+                  validateTrigger: "onBlur",
+                  rules: [
+                    () => ({
+                      validator(_, value) {
+                        if (Array.isArray(value) && value.every((str) => typeof str === "string" && str.includes("=") && !str.startsWith("="))) {
+                          return Promise.resolve();
+                        }
+                        return Promise.reject(new Error("Please enter key=value style"));
                       }
-                      return Promise.reject(new Error("Please enter key=value style"));
+                    })
+                  ],
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Select,
+                    {
+                      mode: "tags",
+                      allowClear: true,
+                      placeholder: "Key=Value",
+                      tokenSeparators: [",", " ", "	"],
+                      suffixIcon: null,
+                      filterOption: filterSelectOptions,
+                      tagRender,
+                      maxTagCount: "responsive",
+                      disabled: !watchedKinds || !watchedKinds.length
                     }
-                  })
-                ],
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Styled.RightSideSelect,
-                  {
-                    mode: "tags",
-                    allowClear: true,
-                    placeholder: "Key=Value",
-                    tokenSeparators: [",", " ", "	"],
-                    suffixIcon: null,
-                    filterOption: filterSelectOptions,
-                    tagRender,
-                    maxTagCount: "responsive",
-                    disabled: !watchedKinds || !watchedKinds.length
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled.HideableContainer,
-          {
-            $isHidden: watchedTypedSelector === "name" || watchedTypedSelector === "labels" || watchedTypedSelector === void 0,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Styled.ResetedFormItem,
-              {
-                name: FIELD_NAME_FIELDS,
-                validateTrigger: "onBlur",
-                rules: [
-                  () => ({
-                    validator(_, value) {
-                      if (Array.isArray(value) && value.every((str) => typeof str === "string" && str.includes("=") && !str.startsWith("="))) {
-                        return Promise.resolve();
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Styled.HideableContainer,
+            {
+              $isHidden: watchedTypedSelector === "name" || watchedTypedSelector === "labels" || watchedTypedSelector === void 0,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Styled.ResetedFormItem,
+                {
+                  name: FIELD_NAME_FIELDS,
+                  validateTrigger: "onBlur",
+                  rules: [
+                    () => ({
+                      validator(_, value) {
+                        if (Array.isArray(value) && value.every((str) => typeof str === "string" && str.includes("=") && !str.startsWith("="))) {
+                          return Promise.resolve();
+                        }
+                        return Promise.reject(new Error("Please enter key=value style"));
                       }
-                      return Promise.reject(new Error("Please enter key=value style"));
+                    })
+                  ],
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Select,
+                    {
+                      mode: "tags",
+                      allowClear: true,
+                      placeholder: "Key=Value",
+                      tokenSeparators: [",", " ", "	"],
+                      suffixIcon: null,
+                      filterOption: filterSelectOptions,
+                      tagRender,
+                      maxTagCount: "responsive",
+                      disabled: !watchedKinds || !watchedKinds.length
                     }
-                  })
-                ],
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Styled.RightSideSelect,
+                  )
+                }
+              )
+            }
+          )
+        ] }) }),
+        watchedKinds && watchedKinds.length || watchedName && watchedName.length || watchedLabels && watchedLabels.length || watchedFields && watchedFields.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.BottomTagsContainer, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.OptionsFlex, { children: [
+            watchedKinds && watchedKinds.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.BottomTagsRow, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsRowText, { $colorDescription: token.colorTextDescription, children: "Kinds:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsHolder, { children: watchedKinds.map((fullKindName) => {
+                const kind = getKindByGvr(fullKindName);
+                const abbr = getUppercase(kind && kind.length ? kind : "Loading");
+                const bgColor = kind && kind.length ? hslFromString(kind, theme$1) : "";
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  Styled.CustomTag,
                   {
-                    mode: "tags",
-                    allowClear: true,
-                    placeholder: "Key=Value",
-                    tokenSeparators: [",", " ", "	"],
-                    suffixIcon: null,
-                    filterOption: filterSelectOptions,
-                    tagRender,
-                    maxTagCount: "responsive",
-                    disabled: !watchedKinds || !watchedKinds.length
-                  }
-                )
-              }
-            )
-          }
-        )
-      ] })
-    ] }) }),
-    watchedKinds && watchedKinds.length || watchedName && watchedName.length || watchedLabels && watchedLabels.length || watchedFields && watchedFields.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.BottomTagsHolder, { children: [
-        watchedKinds && watchedKinds.map((fullKindName) => {
-          const kind = getKindByGvr(fullKindName);
-          const abbr = getUppercase(kind && kind.length ? kind : "Loading");
-          const bgColor = kind && kind.length ? hslFromString(abbr, theme$1) : "";
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Styled.CustomTag,
+                    onClose: (e) => {
+                      e.preventDefault();
+                      removeKind(fullKindName);
+                    },
+                    closable: true,
+                    children: [
+                      kind && kind.length && bgColor.length && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.Abbr, { $bgColor: bgColor, children: abbr }),
+                      kind
+                    ]
+                  },
+                  fullKindName
+                );
+              }) })
+            ] }),
+            watchedName && watchedName.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.BottomTagsRow, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsRowText, { $colorDescription: token.colorTextDescription, children: "Name:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsHolder, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Styled.CustomTag,
+                {
+                  onClose: (e) => {
+                    e.preventDefault();
+                    clearName();
+                  },
+                  closable: true,
+                  children: watchedName
+                }
+              ) })
+            ] }),
+            watchedLabels && watchedLabels.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.BottomTagsRow, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsRowText, { $colorDescription: token.colorTextDescription, children: "Labels:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsHolder, { children: watchedLabels.map((label) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Styled.CustomTag,
+                {
+                  onClose: (e) => {
+                    e.preventDefault();
+                    removeLabel(label);
+                  },
+                  closable: true,
+                  children: label
+                },
+                label
+              )) })
+            ] }),
+            watchedFields && watchedFields.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled.BottomTagsRow, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsRowText, { $colorDescription: token.colorTextDescription, children: "Fields:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.BottomTagsHolder, { children: watchedFields.map((field) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Styled.CustomTag,
+                {
+                  onClose: (e) => {
+                    e.preventDefault();
+                    removeField(field);
+                  },
+                  closable: true,
+                  children: field
+                },
+                field
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ClearButtonHolder, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
             {
-              onClose: (e) => {
-                e.preventDefault();
-                removeKind(fullKindName);
+              type: "primary",
+              onClick: () => {
+                setSearchParams(new URLSearchParams());
+                form.setFieldsValue({
+                  [FIELD_NAME]: [],
+                  [FIELD_NAME_STRING]: "",
+                  [FIELD_NAME_LABELS]: [],
+                  [FIELD_NAME_FIELDS]: [],
+                  [TYPE_SELECTOR]: "name"
+                  // reset selector to default
+                });
               },
-              closable: true,
-              children: [
-                kind && kind.length && bgColor.length && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.Abbr, { $bgColor: bgColor, children: abbr }),
-                kind
-              ]
-            },
-            fullKindName
-          );
-        }),
-        watchedName && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled.CustomTag,
-          {
-            onClose: (e) => {
-              e.preventDefault();
-              clearName();
-            },
-            closable: true,
-            children: watchedName
-          }
-        ),
-        watchedLabels && watchedLabels.map((label) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled.CustomTag,
-          {
-            onClose: (e) => {
-              e.preventDefault();
-              removeLabel(label);
-            },
-            closable: true,
-            children: label
-          },
-          label
-        )),
-        watchedFields && watchedFields.map((field) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled.CustomTag,
-          {
-            onClose: (e) => {
-              e.preventDefault();
-              removeField(field);
-            },
-            closable: true,
-            children: field
-          },
-          field
-        ))
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled.ClearButtonHolder, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          type: "primary",
-          onClick: () => {
-            form.setFieldsValue({
-              [FIELD_NAME]: [],
-              [FIELD_NAME_STRING]: "",
-              [FIELD_NAME_LABELS]: [],
-              [FIELD_NAME_FIELDS]: [],
-              [TYPE_SELECTOR]: "name"
-              // reset selector to default
-            });
-          },
-          children: "Clear"
-        }
-      ) })
-    ] }) : void 0
-  ] });
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClearOutlined, {})
+            }
+          ) })
+        ] }) : void 0
+      ]
+    }
+  );
 };
 
 const isLeafNode = (value) => {
@@ -50668,5 +50700,5 @@ const useCrdData = ({
   });
 };
 
-export { BackToDefaultIcon, BlackholeForm, BlackholeFormDataProvider, ContentCard$1 as ContentCard, CursorDefaultDiv, CursorPointerTag, CustomSelect$4 as CustomSelect, DeleteIcon, DeleteModal, DeleteModalMany, DownIcon, DynamicComponents, DynamicRenderer, DynamicRendererWithProviders, EditIcon, EnrichedTable, EnrichedTableProvider, FlexGrow, LockedIcon, ManageableBreadcrumbs, ManageableBreadcrumbsWithDataProvider, ManageableSidebar, ManageableSidebarWithDataProvider, MarketPlace, MarketplaceCard, MinusIcon, NodeTerminal, PauseCircleIcon, PlusIcon, PodLogs, PodLogsMonaco, PodTerminal, ProjectInfoCard, ResumeCircleIcon, Search, Spacer$1 as Spacer, SuccessIcon, TreeWithSearch, UncontrolledSelect, UnlockedIcon, UpIcon, YamlEditorSingleton, checkIfApiInstanceNamespaceScoped, checkIfBuiltInInstanceNamespaceScoped, checkPermission, createContextFactory, createNewEntry, deepMerge, deleteEntry, feedbackIcons, filterIfApiInstanceNamespaceScoped, filterIfBuiltInInstanceNamespaceScoped, filterSelectOptions, floorToDecimal, getAllPathsFromObj, getApiResourceSingle, getApiResourceTypes, getApiResourceTypesByApiGroup, getApiResources, getBuiltinResourceSingle, getBuiltinResourceTypes, getBuiltinResources, getBuiltinTreeData, getClusterList, getCrdData, getCrdResourceSingle, getCrdResources, getDirectUnknownResource, getEnrichedColumns, getEnrichedColumnsWithControls, getGroupsByCategory, getKinds, getObjectFormItemsDraft, getPrefixSubarrays, getSortedKinds, getStringByName, getSwagger, getUppercase, groupsToTreeData, hslFromString, isFlatObject, kindByGvr, namespacedByGvr, normalizeValuesForQuotasToNumber, parseQuotaValue, parseQuotaValueCpu, parseQuotaValueMemoryAndStorage, prepareDataForManageableBreadcrumbs, prepareDataForManageableSidebar, prepareTemplate, prepareUrlsToFetchForDynamicRenderer, updateEntry, useApiResourceSingle, useApiResourceTypesByGroup, useApiResources, useApisResourceTypes, useBuiltinResourceSingle, useBuiltinResourceTypes, useBuiltinResources, useClusterList, useCrdData, useCrdResourceSingle, useCrdResources, useDirectUnknownResource, usePermissions };
+export { BackToDefaultIcon, BlackholeForm, BlackholeFormDataProvider, ContentCard$1 as ContentCard, CursorDefaultDiv, CursorPointerTag, CustomSelect$4 as CustomSelect, DeleteIcon, DeleteModal, DeleteModalMany, DownIcon, DynamicComponents, DynamicRenderer, DynamicRendererWithProviders, EditIcon, EnrichedTable, EnrichedTableProvider, FlexGrow, LockedIcon, LookingGlassIcon, ManageableBreadcrumbs, ManageableBreadcrumbsWithDataProvider, ManageableSidebar, ManageableSidebarWithDataProvider, MarketPlace, MarketplaceCard, MinusIcon, NodeTerminal, PauseCircleIcon, PlusIcon, PodLogs, PodLogsMonaco, PodTerminal, ProjectInfoCard, ResumeCircleIcon, Search, Spacer$1 as Spacer, SuccessIcon, TreeWithSearch, UncontrolledSelect, UnlockedIcon, UpIcon, YamlEditorSingleton, checkIfApiInstanceNamespaceScoped, checkIfBuiltInInstanceNamespaceScoped, checkPermission, createContextFactory, createNewEntry, deepMerge, deleteEntry, feedbackIcons, filterIfApiInstanceNamespaceScoped, filterIfBuiltInInstanceNamespaceScoped, filterSelectOptions, floorToDecimal, getAllPathsFromObj, getApiResourceSingle, getApiResourceTypes, getApiResourceTypesByApiGroup, getApiResources, getBuiltinResourceSingle, getBuiltinResourceTypes, getBuiltinResources, getBuiltinTreeData, getClusterList, getCrdData, getCrdResourceSingle, getCrdResources, getDirectUnknownResource, getEnrichedColumns, getEnrichedColumnsWithControls, getGroupsByCategory, getKinds, getObjectFormItemsDraft, getPrefixSubarrays, getSortedKinds, getStringByName, getSwagger, getUppercase, groupsToTreeData, hslFromString, isFlatObject, kindByGvr, namespacedByGvr, normalizeValuesForQuotasToNumber, parseQuotaValue, parseQuotaValueCpu, parseQuotaValueMemoryAndStorage, prepareDataForManageableBreadcrumbs, prepareDataForManageableSidebar, prepareTemplate, prepareUrlsToFetchForDynamicRenderer, updateEntry, useApiResourceSingle, useApiResourceTypesByGroup, useApiResources, useApisResourceTypes, useBuiltinResourceSingle, useBuiltinResourceTypes, useBuiltinResources, useClusterList, useCrdData, useCrdResourceSingle, useCrdResources, useDirectUnknownResource, usePermissions };
 //# sourceMappingURL=openapi-k8s-toolkit.es.js.map