chore: refactor bundle alert

web-infra-dev · Dec 13, 2024 · d6b2597 · d6b2597
1 parent be221e7
commit d6b2597
Show file tree

Hide file tree

Showing 17 changed files with 676 additions and 284 deletions.
diff --git a/packages/components/src/components/Alert/package-relation.module.scss b/packages/components/src/components/Alert/package-relation.module.scss
@@ -0,0 +1,11 @@
+.dot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.filePath {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/packages/components/src/components/Alert/package-relation.tsx b/packages/components/src/components/Alert/package-relation.tsx
@@ -15,18 +15,28 @@ import {
   Empty,
   Popover,
   Grid,
+  Badge,
 } from 'antd';
 import { sumBy } from 'lodash-es';
-import { Rule, SDK } from '@rsdoctor/types';
-import { ExpandAltOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import {
+  ExpandAltOutlined,
+  InfoCircleOutlined,
+  DoubleRightOutlined,
+} from '@ant-design/icons';
+
 import { useRuleIndexNavigate, formatSize, useI18n } from '../../utils';
 import { TextDrawer } from '../TextDrawer';
 import { Title } from '../Title';
 import { Size, Color } from '../../constants';
 import { Badge as Bdg } from '../Badge';
-import { PackageRelationAlertProps } from './types';
 import { withServerAPI } from '../Manifest';
 
+import { Rule, SDK } from '@rsdoctor/types';
+
+import { PackageRelationAlertProps } from './types';
+
+import styles from './package-relation.module.scss';
+
 const TextDrawerWidth = '60%';
 
 export const PackageRelationReasons: React.FC<{
@@ -39,72 +49,55 @@ export const PackageRelationReasons: React.FC<{
   return (
     <Row gutter={Size.BasePadding} wrap={false} align="top">
       <Col span={20} style={{ height: '100%' }}>
-        <Card
-          title={`The reasons for importing this version`}
-          style={{ height: '100%' }}
-          extra={
-            <Popover
-              content={
-                <Typography.Text>
-                  {t('DuplicatePakCodeExplain')}
-                </Typography.Text>
-              }
-            >
-              <a href="#">Explain</a>
-            </Popover>
-          }
-          bodyStyle={{ overflow: 'scroll' }}
-        >
-          {data.length ? (
-            <React.Fragment>
-              <div style={{ marginBottom: Size.BasePadding }}>
-                <Typography.Text type="secondary" strong>
-                  Click the file path below to show the reason in code viewer.
-                </Typography.Text>
-              </div>
-              <Timeline>
-                {data.map((e, i) => {
-                  const { dependency, module, relativePath } = e!;
-                  const { statements } = dependency;
-                  const { start } = statements?.[0]?.position
-                    ? module.isPreferSource
-                      ? statements[0].position.source!
-                      : statements[0].position.transformed
-                    : { start: { line: 0, column: 0 } };
-                  const text = `${relativePath}:${start.line}:${
-                    start.column || 1
-                  }`;
+        {data.length ? (
+          <>
+            <div style={{ marginBottom: Size.BasePadding }}>
+              <Typography.Text type="secondary" strong>
+                Click the file path below to show the reason in code viewer.
+              </Typography.Text>
+            </div>
+            <Timeline>
+              {data.map((e, i) => {
+                const { dependency, module, relativePath } = e!;
+                const { statements } = dependency;
+                const { start } = statements?.[0]?.position
+                  ? module.isPreferSource
+                    ? statements[0].position.source!
+                    : statements[0].position.transformed
+                  : { start: { line: 0, column: 0 } };
+                const text = `${relativePath}:${start.line}:${
+                  start.column || 1
+                }`;
 
-                  return (
-                    <Timeline.Item
-                      key={text}
-                      style={{ cursor: 'pointer' }}
-                      dot={i === data.length - 1 ? undefined : '⬇️'}
+                return (
+                  <Timeline.Item key={text} style={{ cursor: 'default' }}>
+                    <Typography.Text
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setIndex(i);
+                      }}
+                      strong={i === index}
+                      style={{
+                        color: i === index ? Color.Blue : 'inherit',
+                        display: 'block',
+                      }}
                     >
-                      <Typography.Text
-                        copyable={{ text: relativePath }}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setIndex(i);
-                        }}
-                        strong={i === index}
-                        style={{
-                          color: i === index ? Color.Blue : 'inherit',
-                          display: 'block',
-                        }}
-                      >
+                      <div className={styles.filePath}>
                         {text}
-                      </Typography.Text>
-                    </Timeline.Item>
-                  );
-                })}
-              </Timeline>
-            </React.Fragment>
-          ) : (
-            <Empty description={'This package no dependencies'} />
-          )}
-        </Card>
+                        <Typography.Paragraph
+                          copyable={{ text: relativePath }}
+                        />
+                      </div>
+                    </Typography.Text>
+                  </Timeline.Item>
+                );
+              })}
+            </Timeline>
+          </>
+        ) : (
+          <Empty description={'This package no dependencies'} />
+        )}
       </Col>
     </Row>
   );

diff --git a/packages/components/src/components/Alerts/bundle-alert.module.scss b/packages/components/src/components/Alerts/bundle-alert.module.scss
@@ -0,0 +1,16 @@
+.card {
+  :global {
+    .ant-card-body {
+      padding: 0;
+    }
+
+    .ant-collapse {
+      border-radius: 0;
+      border: 0;
+    }
+
+    .ant-collapse-content {
+      border-radius: 0 !important;
+    }
+  }
+}
diff --git a/packages/components/src/components/Alerts/bundle-alert.tsx b/packages/components/src/components/Alerts/bundle-alert.tsx
@@ -0,0 +1,108 @@
+import { Typography, Tabs } from 'antd';
+import { Rule } from '@rsdoctor/types';
+
+import { ViewMode } from '../../constants';
+import { Card } from '../Card';
+import { Overview } from '../Overall/overview';
+import { AlertCollapse } from './collapse';
+import { CommonList } from './list';
+
+import { AlertProps } from '../Alert/types';
+
+import styles from './bundle-alert.module.scss';
+
+interface BundleAlertProps {
+  title: string;
+  cwd: string;
+  dataSource: Rule.RuleStoreDataItem[];
+  extraData: Omit<AlertProps, 'data'>;
+  viewMode: ViewMode;
+  setViewMode(mode: ViewMode): void;
+  extraCom?: JSX.Element | undefined;
+}
+
+export const BundleAlert: React.FC<BundleAlertProps> = ({
+  title,
+  dataSource,
+  extraData,
+}) => {
+  if (!dataSource.length) return null;
+
+  const tabData: Array<{
+    key: string;
+    label: string;
+    data: Array<Rule.RuleStoreDataItem>;
+  }> = [
+    {
+      key: 'E1001',
+      label: 'Duplicate Packages',
+      data: [],
+    },
+    {
+      key: 'E1002',
+      label: 'Default Import Check',
+      data: [],
+    },
+    {
+      key: 'E1003',
+      label: 'Loader Performance Optimization',
+      data: [],
+    },
+    {
+      key: 'E1004',
+      label: 'ECMA Version Check',
+      data: [],
+    },
+  ];
+
+  dataSource.forEach((data) => {
+    const target = tabData.find((td) => td.key === data.code)?.data;
+    target?.push(data);
+  });
+
+  const tabItems = tabData.map((td) => {
+    const LabelComponent = () => (
+      <Overview
+        key={td.key}
+        title={td.label}
+        description={td.data.length}
+        icon={<Typography.Text code>{td.key}</Typography.Text>}
+      />
+    );
+
+    let children;
+    switch (td.key) {
+      case 'E1001':
+        children = <AlertCollapse data={td.data} extraData={extraData} />;
+        break;
+      case 'E1002':
+        children = <CommonList data={[{ title: 'aaa' }]} />;
+        break;
+      case 'E1003':
+        children = <CommonList data={[{ title: 'bbb' }]} />;
+        break;
+      case 'E1004':
+        children = <>1004</>;
+        break;
+      default:
+        children = null;
+        break;
+    }
+
+    return {
+      key: td.key,
+      label: <LabelComponent />,
+      children: (
+        <Card className={styles.card} type="inner" title={td.label}>
+          {children}
+        </Card>
+      ),
+    };
+  });
+
+  return (
+    <Card title={title}>
+      <Tabs defaultActiveKey="E1002" items={tabItems} />
+    </Card>
+  );
+};
diff --git a/packages/components/src/components/Alerts/bundle.tsx b/packages/components/src/components/Alerts/bundle.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect } from 'react';
 import { Rule, SDK } from '@rsdoctor/types';
-import { hasViewModeFromStorage, useBundleAlertsByErrors, useViewMode } from '../../utils';
-import { CommonAlertsContainer } from './common';
+import {
+  hasViewModeFromStorage,
+  useBundleAlertsByErrors,
+  useViewMode,
+} from '../../utils';
+import { BundleAlert } from './bundle-alert';
 import { withServerAPI } from '../Manifest';
 import { ViewMode } from '../../constants';
 import { PackageRelationReasonsWithServer } from '../Alert/package-relation';
@@ -12,7 +16,10 @@ interface BundleAlertsProps {
   project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
 }
 
-export const BundleAlertsBase: React.FC<BundleAlertsProps> = ({ filter, project }) => {
+export const BundleAlertsBase: React.FC<BundleAlertsProps> = ({
+  filter,
+  project,
+}) => {
   const { errors, root: cwd } = project;
   const bundleAlerts = useBundleAlertsByErrors(errors);
   const { setBundleAlertsViewMode, viewMode, setViewMode } = useViewMode();
@@ -23,7 +30,8 @@ export const BundleAlertsBase: React.FC<BundleAlertsProps> = ({ filter, project
     if (!hasViewModeFromStorage()) {
       setViewMode(
         {
-          bundleAlerts: bundleAlerts.length >= 5 ? ViewMode.Group : ViewMode.List,
+          bundleAlerts:
+            bundleAlerts.length >= 5 ? ViewMode.Group : ViewMode.List,
         },
         false,
       );
@@ -37,17 +45,20 @@ export const BundleAlertsBase: React.FC<BundleAlertsProps> = ({ filter, project
           Alert: {
             colorInfoBg: '#e6f4ff57',
             colorInfoBorder: 'none',
-          }
-        }
+          },
+        },
       }}
     >
-      <CommonAlertsContainer
+      <BundleAlert
         title="Bundle Alerts"
         dataSource={dataSource}
         extraData={{
           cwd,
           getPackageRelationContentComponent: (res) => (
-            <PackageRelationReasonsWithServer body={{ id: res.data.id, target: res.package.target }} cwd={cwd} />
+            <PackageRelationReasonsWithServer
+              body={{ id: res.data.id, target: res.package.target }}
+              cwd={cwd}
+            />
           ),
         }}
         viewMode={viewMode.bundleAlerts}