fix: display instance type spec

src/components/label-selector/index.tsx

@@ -8,6 +8,7 @@ interface LabelSelectorProps {
   label?: string;
   btnText?: string;
   description?: React.ReactNode;
+  disabled?: boolean;
   onChange?: (labels: Record<string, any>) => void;
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
@@ -18,6 +19,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   onChange,
   onBlur,
   onDelete,
+  disabled,
   label,
   btnText,
   description
@@ -81,6 +83,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
 
   return (
     <Inner
+      disabled={disabled}
       label={label}
       btnText={btnText}
       description={
@@ -97,4 +100,4 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   );
 };
 
-export default React.memo(LabelSelector);
+export default LabelSelector;

src/components/label-selector/inner.tsx

@@ -14,6 +14,7 @@ interface LabelSelectorProps {
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
   description?: React.ReactNode;
+  disabled?: boolean;
 }
 
 const Inner: React.FC<LabelSelectorProps> = ({
@@ -24,6 +25,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
   onPaste,
   onBlur,
   onDelete,
+  disabled,
   label,
   btnText,
   description
@@ -75,12 +77,14 @@ const Inner: React.FC<LabelSelectorProps> = ({
       label={label}
       description={description}
       onAdd={handleAddLabel}
+      disabled={disabled}
       btnText={btnText}
     >
       <>
         {labelList?.map((item: any, index: number) => {
           return (
             <LabelItem
+              disabled={disabled}
               key={index}
               label={item}
               seperator=":"

src/components/label-selector/label-item.tsx

@@ -15,8 +15,9 @@ interface LabelItemProps {
   keyAddon?: React.ReactNode;
   valueAddon?: React.ReactNode;
   seperator?: string;
-  onDelete?: () => void;
   labelList: { key: string; value: string }[];
+  disabled?: boolean;
+  onDelete?: () => void;
   onChange?: (params: { key: string; value: string }) => void;
   onPaste?: (e: any) => void;
   onBlur?: (e: any, type: string) => void;
@@ -27,6 +28,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
   seperator,
   keyAddon,
   valueAddon,
+  disabled,
   onChange,
   onDelete,
   onPaste,
@@ -82,6 +84,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
             title={intl.formatMessage({ id: 'resources.table.key.tips' })}
           >
             <SealInput.Input
+              disabled={disabled}
               checkStatus="success"
               label={intl.formatMessage({ id: 'common.input.key' })}
               value={label.key}
@@ -96,6 +99,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
       <div className="label-value">
         {valueAddon ?? (
           <SealInput.Input
+            disabled={disabled}
             checkStatus={label.value ? 'success' : ''}
             label={intl.formatMessage({ id: 'common.input.value' })}
             value={label.value}
@@ -104,15 +108,17 @@ const LabelItem: React.FC<LabelItemProps> = ({
           ></SealInput.Input>
         )}
       </div>
-      <Button
-        size="small"
-        className="btn"
-        type="default"
-        shape="circle"
-        onClick={onDelete}
-      >
-        <MinusOutlined />
-      </Button>
+      {!disabled && (
+        <Button
+          size="small"
+          className="btn"
+          type="default"
+          shape="circle"
+          onClick={onDelete}
+        >
+          <MinusOutlined />
+        </Button>
+      )}
     </div>
   );
 };

src/components/label-selector/wrapper.tsx

@@ -11,6 +11,7 @@ interface WrapperProps {
   labelExtra?: React.ReactNode;
   children: React.ReactNode;
   btnText?: string;
+  disabled?: boolean;
   onAdd?: () => void;
   button?: React.ReactNode;
 }
@@ -44,6 +45,7 @@ const Wrapper: React.FC<WrapperProps> = ({
   labelExtra,
   onAdd,
   btnText,
+  disabled,
   button
 }) => {
   const intl = useIntl();
@@ -59,17 +61,19 @@ const Wrapper: React.FC<WrapperProps> = ({
         </span>
       )}
       {children}
-      <ButtonWrapper>
-        {button || (
-          <Button variant="filled" color="default" block onClick={onAdd}>
-            <PlusOutlined className="font-size-14" />
-            {btnText ||
-              intl.formatMessage({
-                id: 'common.button.addSelector'
-              })}
-          </Button>
-        )}
-      </ButtonWrapper>
+      {!disabled && (
+        <ButtonWrapper>
+          {button || (
+            <Button variant="filled" color="default" block onClick={onAdd}>
+              <PlusOutlined className="font-size-14" />
+              {btnText ||
+                intl.formatMessage({
+                  id: 'common.button.addSelector'
+                })}
+            </Button>
+          )}
+        </ButtonWrapper>
+      )}
     </Container>
   );
 };