Merge branch 'main' into 24.03

lablup · May 31, 2024 · 267c41a · 267c41a
2 parents 6926a38 + bfb86e5
commit 267c41a
Show file tree

Hide file tree

Showing 56 changed files with 2,377 additions and 1,082 deletions.
diff --git a/react/data/schema.graphql b/react/data/schema.graphql
diff --git a/react/src/components/BAIModal.tsx b/react/src/components/BAIModal.tsx
@@ -43,6 +43,7 @@ const BAIModal: React.FC<BAIModalProps> = ({ styles, ...modalProps }) => {
     <>
       <style>{rawBAIModalCss}</style>
       <Modal
+        keyboard={false}
         {...modalProps}
         centered={modalProps.centered ?? true}
         className="bai-modal"

diff --git a/react/src/components/BAINotificationItem.tsx b/react/src/components/BAINotificationItem.tsx
@@ -56,14 +56,21 @@ const BAINotificationItem: React.FC<{
             style={{
               fontWeight: 500,
             }}
-            ellipsis={{ rows: 3 }}
           >
-            {notification.message}
+            {_.isString(notification.message)
+              ? _.truncate(notification.message, {
+                  length: 200,
+                })
+              : notification.message}
           </Typography.Paragraph>
         </Flex>
         <Flex direction="row" align="end" gap={'xxs'} justify="between">
-          <Typography.Paragraph ellipsis={{ rows: 3, expandable: true }}>
-            {notification.description}
+          <Typography.Paragraph>
+            {_.isString(notification.description)
+              ? _.truncate(notification.description, {
+                  length: 300,
+                })
+              : notification.description}
           </Typography.Paragraph>
           {notification.to ? (
             <Flex>

diff --git a/react/src/components/BAIPropertyFilter.tsx b/react/src/components/BAIPropertyFilter.tsx
@@ -149,43 +149,45 @@ const BAIPropertyFilter: React.FC<BAIPropertyFilterProps> = ({
           {...otherProps}
         />
       </Flex>
-      <Flex
-        direction="row"
-        gap={'xs'}
-        wrap="wrap"
-        style={{ alignSelf: 'stretch' }}
-      >
-        {_.map(list, (item, index) => {
-          return (
-            <Tag
-              key={getKey(index)}
-              closable
-              onClose={() => {
-                remove(index);
-              }}
-              style={{ margin: 0 }}
-            >
-              {item.propertyLabel}: {trimFilterValue(item.value)}
-            </Tag>
-          );
-        })}
-        {list.length > 1 && (
-          <Tooltip title={t('propertyFilter.ResetFilter')}>
-            <Button
-              size="small"
-              icon={
-                <CloseCircleOutlined
-                  style={{ color: token.colorTextSecondary }}
-                />
-              }
-              type="text"
-              onClick={() => {
-                resetList([]);
-              }}
-            />
-          </Tooltip>
-        )}
-      </Flex>
+      {list.length > 0 && (
+        <Flex
+          direction="row"
+          gap={'xs'}
+          wrap="wrap"
+          style={{ alignSelf: 'stretch' }}
+        >
+          {_.map(list, (item, index) => {
+            return (
+              <Tag
+                key={getKey(index)}
+                closable
+                onClose={() => {
+                  remove(index);
+                }}
+                style={{ margin: 0 }}
+              >
+                {item.propertyLabel}: {trimFilterValue(item.value)}
+              </Tag>
+            );
+          })}
+          {list.length > 1 && (
+            <Tooltip title={t('propertyFilter.ResetFilter')}>
+              <Button
+                size="small"
+                icon={
+                  <CloseCircleOutlined
+                    style={{ color: token.colorTextSecondary }}
+                  />
+                }
+                type="text"
+                onClick={() => {
+                  resetList([]);
+                }}
+              />
+            </Tooltip>
+          )}
+        </Flex>
+      )}
     </Flex>
   );
 };

diff --git a/react/src/components/DefaultProviders.tsx b/react/src/components/DefaultProviders.tsx
@@ -5,7 +5,7 @@ import { useCustomThemeConfig } from '../helper/customThemeConfig';
 import { ReactWebComponentProps } from '../helper/react-to-webcomponent';
 import { ThemeModeProvider, useThemeMode } from '../hooks/useThemeMode';
 import { StyleProvider, createCache } from '@ant-design/cssinjs';
-import { App, ConfigProvider, theme } from 'antd';
+import { App, AppProps, ConfigProvider, theme } from 'antd';
 import en_US from 'antd/locale/en_US';
 import ko_KR from 'antd/locale/ko_KR';
 import dayjs from 'dayjs';
@@ -130,6 +130,12 @@ export const useCurrentLanguage = () => {
   return [lang] as const;
 };
 
+const commonAppProps: AppProps = {
+  message: {
+    duration: 4,
+  },
+};
+
 const DefaultProvidersForWebComponent: React.FC<DefaultProvidersProps> = ({
   children,
   value,
@@ -187,7 +193,7 @@ const DefaultProvidersForWebComponent: React.FC<DefaultProvidersProps> = ({
                           : theme.defaultAlgorithm,
                       }}
                     >
-                      <App>
+                      <App {...commonAppProps}>
                         <StyleProvider container={shadowRoot} cache={cache}>
                           <Suspense fallback="">
                             <BrowserRouter>
@@ -278,7 +284,7 @@ export const DefaultProvidersForReactRoot: React.FC<
                   : theme.defaultAlgorithm,
               }}
             >
-              <App>
+              <App {...commonAppProps}>
                 {/* <StyleProvider container={shadowRoot} cache={cache}> */}
                 <Suspense>
                   {/* <BrowserRouter> */}

diff --git a/react/src/components/DynamicStepInputNumber.tsx b/react/src/components/DynamicStepInputNumber.tsx
@@ -1,7 +1,8 @@
+import { useUpdatableState } from '../hooks';
 import { useControllableValue } from 'ahooks';
 import { InputNumber, InputNumberProps } from 'antd';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 export interface DynamicInputNumberProps
   extends Omit<InputNumberProps, 'step' | 'value' | 'onChange'> {
@@ -24,9 +25,19 @@ const DynamicInputNumber: React.FC<DynamicInputNumberProps> = ({
     defaultValue: dynamicSteps[0],
   });
 
+  // FIXME: this is a workaround to fix the issue that the value is not updated when the value is controlled
+  const [key, updateKey] = useUpdatableState('first');
+  useEffect(() => {
+    setTimeout(() => {
+      updateKey(value);
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <InputNumber
       {...inputNumberProps}
+      key={key}
       value={value}
       onChange={(newValue) => {
         // @ts-ignore

diff --git a/react/src/components/DynamicUnitInputNumberWithSlider.tsx b/react/src/components/DynamicUnitInputNumberWithSlider.tsx
@@ -1,4 +1,5 @@
 import { compareNumberWithUnits, iSizeToSize } from '../helper';
+import { useUpdatableState } from '../hooks';
 import DynamicUnitInputNumber, {
   DynamicUnitInputNumberProps,
 } from './DynamicUnitInputNumber';
@@ -7,7 +8,7 @@ import { useControllableValue } from 'ahooks';
 import { Slider, theme } from 'antd';
 import { SliderMarks } from 'antd/es/slider';
 import _ from 'lodash';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 export interface DynamicUnitInputNumberWithSliderProps
   extends DynamicUnitInputNumberProps {
@@ -45,6 +46,16 @@ const DynamicUnitInputNumberWithSlider: React.FC<
   //     : undefined;
   // }, [warn, maxGiB?.number]);
   // console.log('##marks', marks);
+
+  // FIXME: this is a workaround to fix the issue that the value is not updated when the value is controlled
+  const [key, updateKey] = useUpdatableState('first');
+  useEffect(() => {
+    setTimeout(() => {
+      updateKey(value);
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <Flex direction="row" gap={'md'}>
       <Flex
@@ -54,6 +65,7 @@ const DynamicUnitInputNumberWithSlider: React.FC<
       >
         <DynamicUnitInputNumber
           {...otherProps}
+          key={key}
           min={min}
           max={max}
           units={units}

diff --git a/react/src/components/FormItemWithUnlimited.tsx b/react/src/components/FormItemWithUnlimited.tsx
@@ -1,26 +1,18 @@
 import Flex from './Flex';
-import { Form, Checkbox } from 'antd';
+import { Form, Checkbox, FormItemProps } from 'antd';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
-import { NamePath } from 'antd/es/form/interface';
-import React, {
-  cloneElement,
-  PropsWithChildren,
-  useEffect,
-  useState,
-} from 'react';
+import React, { cloneElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-interface FormItemWithUnlimitedProps extends PropsWithChildren {
-  name: NamePath;
+interface FormItemWithUnlimitedProps extends FormItemProps {
   unlimitedValue?: number | string;
-  label?: string;
 }
 
 const FormItemWithUnlimited: React.FC<FormItemWithUnlimitedProps> = ({
   name,
   unlimitedValue,
-  label,
   children,
+  ...formItemPropsWithoutNameAndChildren
 }) => {
   const { t } = useTranslation();
   const [isUnlimited, setIsUnlimited] = useState<boolean>(false);
@@ -51,14 +43,17 @@ const FormItemWithUnlimited: React.FC<FormItemWithUnlimitedProps> = ({
     <Flex direction="column" align="start">
       <Form.Item
         style={{ margin: 0 }}
-        label={label}
         name={name}
         hidden={isUnlimited}
+        {...formItemPropsWithoutNameAndChildren}
       >
         {childrenWithProps}
       </Form.Item>
       {isUnlimited ? (
-        <Form.Item style={{ margin: 0 }} label={label}>
+        <Form.Item
+          style={{ margin: 0 }}
+          {...formItemPropsWithoutNameAndChildren}
+        >
           {childrenWithUndefinedValue}
         </Form.Item>
       ) : null}

diff --git a/react/src/components/InputNumberWithSlider.tsx b/react/src/components/InputNumberWithSlider.tsx
@@ -1,3 +1,4 @@
+import { useUpdatableState } from '../hooks';
 import Flex from './Flex';
 import { useControllableValue } from 'ahooks';
 import { InputNumber, Slider, InputNumberProps, SliderSingleProps } from 'antd';
@@ -37,6 +38,16 @@ const InputNumberWithSlider: React.FC<InputNumberWithSliderProps> = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [step]);
+
+  // FIXME: this is a workaround to fix the issue that the value is not updated when the value is controlled
+  const [key, updateKey] = useUpdatableState('first');
+  useEffect(() => {
+    setTimeout(() => {
+      updateKey(value);
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <Flex direction="row" gap={'md'}>
       <Flex
@@ -45,6 +56,7 @@ const InputNumberWithSlider: React.FC<InputNumberWithSliderProps> = ({
         direction="column"
       >
         <InputNumber
+          key={key}
           ref={inputRef}
           max={max}
           min={min}

diff --git a/react/src/components/KeypairResourcePolicyList.tsx b/react/src/components/KeypairResourcePolicyList.tsx
@@ -1,4 +1,4 @@
-import { localeCompare } from '../helper';
+import { localeCompare, numberSorterWithInfinityValue } from '../helper';
 import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
 import Flex from './Flex';
 import KeypairResourcePolicySettingModal, {
@@ -158,9 +158,11 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
       dataIndex: 'max_session_lifetime',
       key: 'max_session_lifetime',
       sorter: (a, b) =>
-        a?.max_session_lifetime && b?.max_session_lifetime
-          ? a.max_session_lifetime - b.max_session_lifetime
-          : 1,
+        numberSorterWithInfinityValue(
+          a?.max_session_lifetime,
+          b?.max_session_lifetime,
+          0,
+        ),
       render: (text) => (text ? text : '∞'),
     },
     {