fix web minor bugs (#243)

* feat: feedback pre wrap (#236)

* fix: css

* fix: min width in issue table

* fix: tooltip, feedback space and newline and disable key in field setting (#223)

* fix: remote portal in tooltip, add whitespace-pre-lin in feedback detail

* fix: disable key in field setting

* fix feedback table search bugs

* fix muti-select option order in feedback table

apps/web/src/components/etc/ExpandableText/ExpandableText.tsx

@@ -14,17 +14,19 @@
  * under the License.
  */
 
+import classNames from 'classnames';
+
 interface IProps extends React.PropsWithChildren {
   isExpanded?: boolean;
 }
 
 const ExpandableText: React.FC<IProps> = ({ children, isExpanded }) => {
   return (
     <p
-      className={
-        'cursor-text ' +
-        (isExpanded ? 'whitespace-normal break-all' : 'truncate')
-      }
+      className={classNames('cursor-text', {
+        'whitespace-pre-wrap break-all': isExpanded,
+        truncate: !isExpanded,
+      })}
     >
       {children}
     </p>

apps/web/src/containers/setting-menu/FieldSetting/FieldSettingPopover.tsx

@@ -88,11 +88,10 @@ interface IProps extends React.PropsWithChildren {
   data?: FieldRowType;
   disabled?: boolean;
   fieldRows: FieldRowType[];
-  isInput?: boolean;
 }
 
 const FieldSettingPopover: React.FC<IProps> = (props) => {
-  const { onSave, data, disabled, fieldRows, isInput } = props;
+  const { onSave, data, disabled, fieldRows } = props;
 
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
@@ -224,7 +223,7 @@ const FieldSettingPopover: React.FC<IProps> = (props) => {
             <Input
               label="Key"
               {...register('key')}
-              disabled={isInput && data?.type === 'API'}
+              disabled={isOriginalData}
               isSubmitted={formState.isSubmitted}
               isSubmitting={formState.isSubmitting}
               isValid={!formState.errors.key}

apps/web/src/containers/tables/FeedbackTable/FeedbackCell/FeedbackCell.tsx

@@ -36,6 +36,11 @@ const FeedbackCell: React.FC<IProps> = memo((props) => {
         dayjs(value as string).format(DATE_TIME_FORMAT)
       ) : field.format === 'multiSelect' ? (
         (value as string[])
+          .sort(
+            (aKey, bKey) =>
+              (field.options ?? []).findIndex((option) => option.key === aKey) -
+              (field.options ?? []).findIndex((option) => option.key === bKey),
+          )
           .map(
             (key) =>
               field.options?.find((option) => option.key === key)?.name ??

apps/web/src/containers/tables/FeedbackTable/FeedbackDetail/FeedbackDetailCell.tsx

@@ -14,6 +14,7 @@
  * under the License.
  */
 import { useRef } from 'react';
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 
 import { Icon } from '@ufb/ui';
@@ -31,9 +32,10 @@ const FeedbackDetailCell: React.FC<IProps> = ({ children }) => {
   return (
     <td className="pl-2" colSpan={3}>
       <div
-        className={`font-14-regular text-primary break-words break-all align-top ${
-          !isShowingMore && 'line-clamp-6'
-        }`}
+        className={clsx(
+          'font-14-regular text-primary whitespace-pre-wrap break-words break-all align-top',
+          { 'line-clamp-6': !isShowingMore },
+        )}
         ref={ref}
       >
         {children}

apps/web/src/containers/tables/FeedbackTable/FeedbackTable.tsx

@@ -119,6 +119,9 @@ const FeedbackTable: React.FC<IFeedbackTableProps> = (props) => {
               if (field.format === 'number') {
                 draft[key] = Number(value);
               }
+              if (field.format === 'multiSelect') {
+                draft[key] = [String(value)];
+              }
             }
           });
         }

apps/web/src/containers/tables/IssueTable/IssueTable.tsx

@@ -116,7 +116,7 @@ const getColumns = (t: TFunction, issueTracker?: IssueTrackerType) => [
     header: 'Feedback Count',
     cell: ({ getValue }) => getValue().toLocaleString(),
     size: 160,
-    minSize: 150,
+    minSize: 100,
   }),
   columnHelper.accessor('description', {
     header: 'Description',
@@ -127,6 +127,7 @@ const getColumns = (t: TFunction, issueTracker?: IssueTrackerType) => [
     ),
     enableSorting: false,
     size: 300,
+    minSize: 100,
   }),
   columnHelper.accessor('status', {
     header: 'Status',

packages/ufb-ui/src/Tooltip/Tooltip.tsx

@@ -19,7 +19,6 @@ import {
   autoUpdate,
   flip,
   FloatingArrow,
-  FloatingPortal,
   offset,
   shift,
   useDismiss,
@@ -208,27 +207,24 @@ export const TooltipContent = React.forwardRef<
     }, [color]);
 
   if (!context.open) return null;
-
   return (
-    <FloatingPortal>
-      <div
-        ref={ref}
-        style={{ ...context.floatingStyles, ...style }}
-        className={[
-          'font-12-regular z-40 min-w-[50px] rounded p-2',
-          bgCN,
-          textCN,
-          className,
-        ].join(' ')}
-        {...context.getFloatingProps(props)}
-      >
-        {props.children}
-        <FloatingArrow
-          ref={context.arrowRef}
-          context={context.context}
-          className={arrowCN}
-        />
-      </div>
-    </FloatingPortal>
+    <div
+      ref={ref}
+      style={{ ...context.floatingStyles, ...style }}
+      className={[
+        'font-12-regular z-40 min-w-[50px] rounded p-2',
+        bgCN,
+        textCN,
+        className,
+      ].join(' ')}
+      {...context.getFloatingProps(props)}
+    >
+      {props.children}
+      <FloatingArrow
+        ref={context.arrowRef}
+        context={context.context}
+        className={arrowCN}
+      />
+    </div>
   );
 });