From 3ccf2e1eba9e049eecc7baf92d8fc7b79464e2bf Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Tue, 5 Nov 2024 13:53:43 +0900
Subject: [PATCH] fix: remove tag when DoubleTag's label has empty children

---
 react/src/components/AgentList.tsx            | 29 ++++++-----
 .../src/components/AliasedImageDoubleTags.tsx | 14 ++----
 react/src/components/BAIIntervalText.tsx      | 13 -----
 react/src/components/BAIIntervalView.tsx      | 21 ++++++++
 .../BatchSessionScheduledTimeSetting.tsx      |  4 +-
 .../SessionReservation.tsx                    | 35 +++++++------
 react/src/components/CustomizedImageList.tsx  |  2 +-
 react/src/components/DoubleTag.tsx            | 27 ++++++----
 .../ImageEnvironmentSelectFormItems.tsx       | 50 ++++---------------
 react/src/components/ImageList.tsx            | 13 ++---
 react/src/components/ImageTags.tsx            | 26 +++-------
 .../components/LoginSessionExtendButton.tsx   |  6 +--
 react/src/components/SessionList.tsx          | 33 ++++++------
 react/src/index.tsx                           |  4 +-
 react/src/pages/SessionLauncherPage.tsx       |  4 +-
 15 files changed, 125 insertions(+), 156 deletions(-)
 delete mode 100644 react/src/components/BAIIntervalText.tsx
 create mode 100644 react/src/components/BAIIntervalView.tsx

diff --git a/react/src/components/AgentList.tsx b/react/src/components/AgentList.tsx
index 7e7b228e6e..a87665057a 100644
--- a/react/src/components/AgentList.tsx
+++ b/react/src/components/AgentList.tsx
@@ -10,7 +10,7 @@ import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOption
 import { useThemeMode } from '../hooks/useThemeMode';
 import AgentDetailModal from './AgentDetailModal';
 import AgentSettingModal from './AgentSettingModal';
-import BAIIntervalText from './BAIIntervalText';
+import BAIIntervalView from './BAIIntervalView';
 import BAIProgressWithLabel from './BAIProgressWithLabel';
 import BAIPropertyFilter from './BAIPropertyFilter';
 import DoubleTag from './DoubleTag';
@@ -247,16 +247,21 @@ const AgentList: React.FC<AgentListProps> = ({
         return (
           <Flex direction="column">
             <Typography.Text>{dayjs(value).format('ll LTS')}</Typography.Text>
-            <DoubleTag
-              values={[
-                t('agent.Running'),
-                <BAIIntervalText
-                  callback={() => {
-                    return baiClient.utils.elapsedTime(value, Date.now());
-                  }}
-                  delay={1000}
-                />,
-              ]}
+            <BAIIntervalView
+              callback={() => {
+                return baiClient.utils.elapsedTime(value, Date.now());
+              }}
+              delay={1000}
+              render={(intervalValue) => (
+                <DoubleTag
+                  values={[
+                    { label: t('agent.Running') },
+                    {
+                      label: intervalValue,
+                    },
+                  ]}
+                />
+              )}
             />
           </Flex>
         );
@@ -640,7 +645,7 @@ const AgentList: React.FC<AgentListProps> = ({
               values={[
                 { label: 'Agent' },
                 {
-                  label: record?.version,
+                  label: record?.version || '',
                   color:
                     value === 'ALIVE'
                       ? 'green'
diff --git a/react/src/components/AliasedImageDoubleTags.tsx b/react/src/components/AliasedImageDoubleTags.tsx
index 841d31a399..af503a3323 100644
--- a/react/src/components/AliasedImageDoubleTags.tsx
+++ b/react/src/components/AliasedImageDoubleTags.tsx
@@ -2,7 +2,6 @@ import { preserveDotStartCase } from '../helper';
 import { useBackendAIImageMetaData } from '../hooks';
 import DoubleTag, { DoubleTagObjectValue } from './DoubleTag';
 import Flex from './Flex';
-import TextHighlighter from './TextHighlighter';
 import { AliasedImageDoubleTagsFragment$key } from './__generated__/AliasedImageDoubleTagsFragment.graphql';
 import { Tag } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
@@ -54,21 +53,14 @@ const AliasedImageDoubleTags: React.FC<AliasedImageDoubleTagsProps> = ({
         ) ? (
           <DoubleTag
             key={tag.key}
+            highlightKeyword={highlightKeyword}
             values={[
               {
-                label: (
-                  <TextHighlighter keyword={highlightKeyword} key={tag.key}>
-                    {tagAlias(tag.key)}
-                  </TextHighlighter>
-                ),
+                label: tagAlias(tag.key),
                 color: isCustomized ? 'cyan' : doubleTagProps.color,
               },
               {
-                label: (
-                  <TextHighlighter keyword={highlightKeyword} key={tagValue}>
-                    {tagValue}
-                  </TextHighlighter>
-                ),
+                label: tagValue ?? '',
                 color: isCustomized ? 'cyan' : doubleTagProps.color,
               },
             ]}
diff --git a/react/src/components/BAIIntervalText.tsx b/react/src/components/BAIIntervalText.tsx
deleted file mode 100644
index 26bdbe91f3..0000000000
--- a/react/src/components/BAIIntervalText.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useIntervalValue } from '../hooks/useIntervalValue';
-import React from 'react';
-
-const BAIIntervalText: React.FC<{
-  callback: () => any;
-  delay: number;
-  triggerKey?: string;
-}> = ({ callback, delay, triggerKey }) => {
-  const value = useIntervalValue(callback, delay, triggerKey);
-  return value;
-};
-
-export default BAIIntervalText;
diff --git a/react/src/components/BAIIntervalView.tsx b/react/src/components/BAIIntervalView.tsx
new file mode 100644
index 0000000000..36786c7b96
--- /dev/null
+++ b/react/src/components/BAIIntervalView.tsx
@@ -0,0 +1,21 @@
+import { useIntervalValue } from '../hooks/useIntervalValue';
+import _ from 'lodash';
+import React from 'react';
+
+type RenderProp<T> = (data: T) => React.ReactNode;
+const BAIIntervalView = <T,>({
+  callback,
+  render,
+  delay,
+  triggerKey,
+}: {
+  callback: () => T;
+  render?: RenderProp<T>;
+  delay: number;
+  triggerKey?: string;
+}) => {
+  const value = useIntervalValue(callback, delay, triggerKey);
+  return _.isUndefined(render) ? value : render(value);
+};
+
+export default BAIIntervalView;
diff --git a/react/src/components/BatchSessionScheduledTimeSetting.tsx b/react/src/components/BatchSessionScheduledTimeSetting.tsx
index 89a30da568..27399a6763 100644
--- a/react/src/components/BatchSessionScheduledTimeSetting.tsx
+++ b/react/src/components/BatchSessionScheduledTimeSetting.tsx
@@ -1,4 +1,4 @@
-import BAIIntervalText from './BAIIntervalText';
+import BAIIntervalView from './BAIIntervalView';
 import DatePickerISO, { DatePickerISOProps } from './DatePickerISO';
 import { useWebComponentInfo } from './DefaultProviders';
 import Flex from './Flex';
@@ -86,7 +86,7 @@ const BatchSessionScheduledTimeSetting: React.FC<Props> = ({
                 style={{ fontSize: token.fontSizeSM - 2 }}
               >
                 ({t('session.launcher.StartAfter')}
-                <BAIIntervalText
+                <BAIIntervalView
                   callback={() => {
                     return dayjs(scheduleTime).fromNow();
                   }}
diff --git a/react/src/components/ComputeSessionNodeItems/SessionReservation.tsx b/react/src/components/ComputeSessionNodeItems/SessionReservation.tsx
index 68d775d7e8..9f0d9aed9f 100644
--- a/react/src/components/ComputeSessionNodeItems/SessionReservation.tsx
+++ b/react/src/components/ComputeSessionNodeItems/SessionReservation.tsx
@@ -1,5 +1,5 @@
 import { useSuspendedBackendaiClient } from '../../hooks';
-import BAIIntervalText from '../BAIIntervalText';
+import BAIIntervalView from '../BAIIntervalView';
 import DoubleTag from '../DoubleTag';
 import { SessionReservationFragment$key } from './__generated__/SessionReservationFragment.graphql';
 import graphql from 'babel-plugin-relay/macro';
@@ -26,21 +26,24 @@ const SessionReservation: React.FC<{
   return (
     <>
       {dayjs(session.created_at).format('lll')}
-      <DoubleTag
-        values={[
-          t('session.ElapsedTime'),
-          <BAIIntervalText
-            callback={() => {
-              return session?.created_at
-                ? baiClient.utils.elapsedTime(
-                    session.created_at,
-                    session?.terminated_at,
-                  )
-                : '-';
-            }}
-            delay={1000}
-          />,
-        ]}
+      <BAIIntervalView
+        callback={() => {
+          return session?.created_at
+            ? baiClient.utils.elapsedTime(
+                session.created_at,
+                session?.terminated_at,
+              )
+            : '-';
+        }}
+        delay={1000}
+        render={(intervalValue) => (
+          <DoubleTag
+            values={[
+              { label: t('session.ElapsedTime') },
+              { label: intervalValue },
+            ]}
+          />
+        )}
       />
     </>
   );
diff --git a/react/src/components/CustomizedImageList.tsx b/react/src/components/CustomizedImageList.tsx
index dc7de913fe..101fab86ca 100644
--- a/react/src/components/CustomizedImageList.tsx
+++ b/react/src/components/CustomizedImageList.tsx
@@ -266,8 +266,8 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
       render: (text: Array<{ key: string; value: string }>, row) => (
         <AliasedImageDoubleTags
           imageFrgmt={row}
-          label={undefined}
           highlightKeyword={imageSearch}
+          label={''}
         />
       ),
     },
diff --git a/react/src/components/DoubleTag.tsx b/react/src/components/DoubleTag.tsx
index 289d145dd3..1ce882141f 100644
--- a/react/src/components/DoubleTag.tsx
+++ b/react/src/components/DoubleTag.tsx
@@ -1,19 +1,20 @@
 import Flex from './Flex';
+import TextHighlighter from './TextHighlighter';
 import { Tag } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 
 export type DoubleTagObjectValue = {
-  label: ValueType;
+  label: string;
   color?: string;
 };
 
-type ValueType = string | React.ReactNode;
 const DoubleTag: React.FC<{
-  values?: ValueType[] | DoubleTagObjectValue[];
-}> = ({ values = [] }) => {
+  values?: Array<string> | Array<DoubleTagObjectValue>;
+  highlightKeyword?: string;
+}> = ({ values = [], highlightKeyword }) => {
   if (values.length === 0) return null;
-  let objectValues: DoubleTagObjectValue[];
+  let objectValues: Array<DoubleTagObjectValue>;
   if (
     values[0] &&
     (typeof values[0] === 'string' || React.isValidElement(values[0]))
@@ -31,8 +32,8 @@ const DoubleTag: React.FC<{
 
   return (
     <Flex direction="row">
-      {_.map(objectValues, (objValue, idx) => {
-        return !_.isEmpty(objValue.label) ? (
+      {_.map(objectValues, (objValue, idx) =>
+        !_.isEmpty(objValue.label) ? (
           <Tag
             key={idx}
             style={
@@ -42,10 +43,16 @@ const DoubleTag: React.FC<{
             }
             color={objValue.color}
           >
-            {objValue.label}
+            {!_.isUndefined(highlightKeyword) ? (
+              <TextHighlighter keyword={highlightKeyword}>
+                {objValue.label}
+              </TextHighlighter>
+            ) : (
+              objValue.label
+            )}
           </Tag>
-        ) : null;
-      })}
+        ) : null,
+      )}
     </Flex>
   );
 };
diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx
index f88114e07d..9a88b890f5 100644
--- a/react/src/components/ImageEnvironmentSelectFormItems.tsx
+++ b/react/src/components/ImageEnvironmentSelectFormItems.tsx
@@ -640,14 +640,10 @@ const ImageEnvironmentSelectFormItems: React.FC<
                             ':',
                           ).map((str) => {
                             extraFilterValues.push(str);
-                            return (
-                              <TextHighlighter
-                                keyword={versionSearch}
-                                key={str}
-                              >
-                                {str}
-                              </TextHighlighter>
-                            );
+                            return {
+                              label: str,
+                              highlightKeyword: versionSearch,
+                            };
                           })}
                         />
                       ))
@@ -671,27 +667,14 @@ const ImageEnvironmentSelectFormItems: React.FC<
                         requirementTags.push(
                           <DoubleTag
                             key={requirementTags.length + 1}
+                            highlightKeyword={versionSearch}
                             values={[
                               {
-                                label: (
-                                  <TextHighlighter
-                                    keyword={versionSearch}
-                                    key="Customized"
-                                  >
-                                    Customized
-                                  </TextHighlighter>
-                                ),
+                                label: 'Customized',
                                 color: 'cyan',
                               },
                               {
-                                label: (
-                                  <TextHighlighter
-                                    keyword={versionSearch}
-                                    key={tag}
-                                  >
-                                    {tag}
-                                  </TextHighlighter>
-                                ),
+                                label: tag ?? '',
                                 color: 'cyan',
                               },
                             ]}
@@ -743,27 +726,14 @@ const ImageEnvironmentSelectFormItems: React.FC<
                                   ) ? (
                                     <DoubleTag
                                       key={tag.key}
+                                      highlightKeyword={versionSearch}
                                       values={[
                                         {
-                                          label: (
-                                            <TextHighlighter
-                                              keyword={versionSearch}
-                                              key={tag.key}
-                                            >
-                                              {tagAlias(tag.key)}
-                                            </TextHighlighter>
-                                          ),
+                                          label: tagAlias(tag.key),
                                           color: isCustomized ? 'cyan' : 'blue',
                                         },
                                         {
-                                          label: (
-                                            <TextHighlighter
-                                              keyword={versionSearch}
-                                              key={tagValue}
-                                            >
-                                              {tagValue}
-                                            </TextHighlighter>
-                                          ),
+                                          label: tagValue ?? '',
                                           color: isCustomized ? 'cyan' : 'blue',
                                         },
                                       ]}
diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
index 241d066495..d147916e18 100644
--- a/react/src/components/ImageList.tsx
+++ b/react/src/components/ImageList.tsx
@@ -227,21 +227,14 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
               ) ? (
                 <DoubleTag
                   key={tag.key}
+                  highlightKeyword={imageSearch}
                   values={[
                     {
-                      label: (
-                        <TextHighlighter keyword={imageSearch} key={tag.key}>
-                          {tagAlias(tag.key)}
-                        </TextHighlighter>
-                      ),
+                      label: tagAlias(tag.key),
                       color: isCustomized ? 'cyan' : 'blue',
                     },
                     {
-                      label: (
-                        <TextHighlighter keyword={imageSearch} key={tagValue}>
-                          {tagValue}
-                        </TextHighlighter>
-                      ),
+                      label: tagValue ?? '',
                       color: isCustomized ? 'cyan' : 'blue',
                     },
                   ]}
diff --git a/react/src/components/ImageTags.tsx b/react/src/components/ImageTags.tsx
index 5dd03ec0e8..6e867ee665 100644
--- a/react/src/components/ImageTags.tsx
+++ b/react/src/components/ImageTags.tsx
@@ -121,21 +121,14 @@ export const ConstraintTags: React.FC<ConstraintTagsProps> = ({
       {!_.isEmpty(constraints?.[1]) ? (
         <DoubleTag
           color="cyan"
+          highlightKeyword={highlightKeyword}
           values={[
             {
-              label: (
-                <TextHighlighter keyword={highlightKeyword}>
-                  Customized
-                </TextHighlighter>
-              ),
+              label: 'Customized',
               color: 'cyan',
             },
             {
-              label: (
-                <TextHighlighter keyword={highlightKeyword}>
-                  {constraints[1]}
-                </TextHighlighter>
-              ),
+              label: constraints[1],
               color: 'cyan',
             },
           ]}
@@ -188,21 +181,14 @@ export const ImageTags: React.FC<ImageTagsProps> = ({
         ) ? (
           <DoubleTag
             key={tag.key}
+            highlightKeyword={highlightKeyword}
             values={[
               {
-                label: (
-                  <TextHighlighter keyword={highlightKeyword}>
-                    {tagAlias(tag.key)}
-                  </TextHighlighter>
-                ),
+                label: tagAlias(tag.key),
                 color: isCustomized ? 'cyan' : 'blue',
               },
               {
-                label: (
-                  <TextHighlighter keyword={highlightKeyword} key={index}>
-                    {tag.value}
-                  </TextHighlighter>
-                ),
+                label: tag.value,
                 color: isCustomized ? 'cyan' : 'blue',
               },
             ]}
diff --git a/react/src/components/LoginSessionExtendButton.tsx b/react/src/components/LoginSessionExtendButton.tsx
index c9b1e987e2..b37679ce10 100644
--- a/react/src/components/LoginSessionExtendButton.tsx
+++ b/react/src/components/LoginSessionExtendButton.tsx
@@ -1,7 +1,7 @@
 import { useBaiSignedRequestWithPromise } from '../helper';
 import { useUpdatableState } from '../hooks';
 import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
-import BAIIntervalText from './BAIIntervalText';
+import BAIIntervalView from './BAIIntervalView';
 import Flex from './Flex';
 import { ClockCircleOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
@@ -37,7 +37,7 @@ const LoginSessionExtendButton: React.FC<
       <Tooltip title={t('general.RemainingLoginSessionTime')}>
         <Flex gap={'xxs'}>
           <ClockCircleOutlined />
-          <BAIIntervalText
+          <BAIIntervalView
             callback={() => {
               const diff = dayjs(data?.expires).diff(dayjs(), 'seconds');
               const duration = dayjs.duration(Math.max(0, diff), 'seconds');
@@ -54,7 +54,7 @@ const LoginSessionExtendButton: React.FC<
               return `${days ? days + 'd ' : ''}${duration.format('HH:mm:ss')}`;
             }}
             delay={100}
-          ></BAIIntervalText>
+          ></BAIIntervalView>
         </Flex>
       </Tooltip>
       <Button
diff --git a/react/src/components/SessionList.tsx b/react/src/components/SessionList.tsx
index 9577aed30d..4d29437226 100644
--- a/react/src/components/SessionList.tsx
+++ b/react/src/components/SessionList.tsx
@@ -1,6 +1,6 @@
 import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
 import { useBackendAIImageMetaData } from '../hooks';
-import BAIIntervalText from './BAIIntervalText';
+import BAIIntervalView from './BAIIntervalView';
 import DoubleTag from './DoubleTag';
 import Flex from './Flex';
 import ImageMetaIcon from './ImageMetaIcon';
@@ -268,19 +268,24 @@ const SessionList: React.FC<SessionListProps> = ({
               return (
                 <Flex direction="column" gap="xs">
                   {localeStringDate}
-                  <DoubleTag
-                    values={[
-                      t('session.ElapsedTime'),
-                      <BAIIntervalText
-                        callback={() => {
-                          return baiClient.utils.elapsedTime(
-                            value,
-                            record.terminated_at,
-                          );
-                        }}
-                        delay={1000}
-                      />,
-                    ]}
+                  <BAIIntervalView
+                    callback={() => {
+                      return baiClient.utils.elapsedTime(
+                        value,
+                        record.terminated_at,
+                      );
+                    }}
+                    delay={1000}
+                    render={(intervalValue) => (
+                      <DoubleTag
+                        values={[
+                          { label: t('session.ElapsedTime') },
+                          {
+                            label: intervalValue,
+                          },
+                        ]}
+                      />
+                    )}
                   />
                 </Flex>
               );
diff --git a/react/src/index.tsx b/react/src/index.tsx
index ad18878cd4..171cc7ef88 100644
--- a/react/src/index.tsx
+++ b/react/src/index.tsx
@@ -1,5 +1,5 @@
 import App from './App';
-import BAIIntervalText from './components/BAIIntervalText';
+import BAIIntervalView from './components/BAIIntervalView';
 import { jotaiStore, useWebComponentInfo } from './components/DefaultProviders';
 import Flex from './components/Flex';
 import FlexActivityIndicator from './components/FlexActivityIndicator';
@@ -334,7 +334,7 @@ const ReservationTimeCounter = (props: ReactWebComponentProps) => {
           borderBottomRightRadius: token.borderRadiusSM,
         }}
       >
-        <BAIIntervalText
+        <BAIIntervalView
           callback={() => {
             return baiClient.utils.elapsedTime(
               parsedValue.starts_at,
diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
index dccfa01c85..8f61025719 100644
--- a/react/src/pages/SessionLauncherPage.tsx
+++ b/react/src/pages/SessionLauncherPage.tsx
@@ -1,5 +1,5 @@
 import BAICard from '../BAICard';
-import BAIIntervalText from '../components/BAIIntervalText';
+import BAIIntervalView from '../components/BAIIntervalView';
 import DatePickerISO from '../components/DatePickerISO';
 import DoubleTag from '../components/DoubleTag';
 import EnvVarFormList, {
@@ -855,7 +855,7 @@ const SessionLauncherPage = () => {
                               'scheduleDate',
                             ]);
                             return (
-                              <BAIIntervalText
+                              <BAIIntervalView
                                 delay={1000}
                                 callback={() => {
                                   const scheduleDate = form.getFieldValue([