Upgrade antd #811

baurine · 2020-11-24T09:53:02Z

close #803 , close #711
upgrade antd from 4.2.5 to 4.8.5

ui/lib/apps/ClusterInfo/pages/List.module.less

breezewish · 2020-11-24T15:52:04Z

A kind reminder: I previously found that Tab+Table will have problems, table inside is lazily resized.. Maybe you can try it out and find out how to avoid this issue..

baurine · 2020-11-25T02:09:46Z

A kind reminder: I previously found that Tab+Table will have problems, table inside is lazily resized.. Maybe you can try it out and find out how to avoid this issue..

Got, let me try it.

baurine · 2020-11-25T04:04:01Z

A kind reminder: I previously found that Tab+Table will have problems, table inside is lazily resized.. Maybe you can try it out and find out how to avoid this issue..

I found this depends on the screen width, the old CardTabs implementation has this problem as well. When the screen is wide, the old implementation is lazily resized at the table end while the new implementation is lazily resized at the first column of the table. (not captured as gif)

While the screen is narrow, the old implementation is lazily resized at the first column while the new implementation doesn't resize.

When the screen is narrow, the old CardTabs:

the new implementation:

I guess it may be caused by the container width, will continue to dig it.

baurine · 2020-11-25T06:16:16Z

Hard to dig, but I found an workaround, just use the Tab as the indicator, not the container:

    <ScrollablePane style={{ height: '100vh' }}>
      <Card>
        <CardTabs
          defaultActiveKey={tabKey}
          onChange={(key) => {
            navigate(`/cluster_info/${key}`)
          }}
          renderTabBar={renderTabBar}
          animated={false}
        >
          <CardTabs.TabPane
            tab={t('cluster_info.list.instance_table.title')}
            key="instance"
          ></CardTabs.TabPane>
          <CardTabs.TabPane
            tab={t('cluster_info.list.host_table.title')}
            key="host"
          ></CardTabs.TabPane>
          <CardTabs.TabPane
            tab={t('cluster_info.list.store_topology.title')}
            key="store_topology"
          ></CardTabs.TabPane>
        </CardTabs>
        {tabKey === 'instance' && <InstanceTable />}
        {tabKey === 'host' && <HostTable />}
        {tabKey === 'store_topology' && <StoreLocation />}
      </Card>
    </ScrollablePane>

Not sure whether it is fine.

baurine · 2020-11-25T06:52:46Z

ui/lib/apps/ClusterInfo/pages/List.module.less

+  padding-left: @padding-page; // 48px
+  height: @padding-page; // 48px
+  margin-bottom: @padding-md; // 16px
+  border-bottom: 1px solid @gray-4;


Although 1px and solid also have variables, I think here using the value may be more direct and explicit.

baurine · 2020-11-25T06:55:39Z

Final effect:

baurine · 2020-11-25T07:00:23Z

hi @breeswish PTAL, thanks!

breezewish · 2020-11-25T07:33:24Z

Fantastic! I will try with this PR later this week.

unbyte · 2020-11-25T07:35:55Z

To avoid potential problems, I think it's better to check for changes in the changelog of antd. https://github.com/ant-design/ant-design/blob/master/CHANGELOG.zh-CN.md

baurine · 2020-11-25T07:42:35Z

To avoid potential problems, I think it's better to check for changes in the changelog of antd. https://github.com/ant-design/ant-design/blob/master/CHANGELOG.zh-CN.md

I did, but too many 😂, and I noticed that it said the Tabs components have been totally rewritten in 4.3.0

🔥 重做 Tabs 以提升多标签在不同环境下的用户体验，DOM 结构完全重写，请注意覆盖样式丢失的问题。

breezewish · 2020-11-26T08:03:21Z

Hard to dig, but I found an workaround, just use the Tab as the indicator, not the container:

    <ScrollablePane style={{ height: '100vh' }}>
      <Card>
        <CardTabs
          defaultActiveKey={tabKey}
          onChange={(key) => {
            navigate(`/cluster_info/${key}`)
          }}
          renderTabBar={renderTabBar}
          animated={false}
        >
          <CardTabs.TabPane
            tab={t('cluster_info.list.instance_table.title')}
            key="instance"
          ></CardTabs.TabPane>
          <CardTabs.TabPane
            tab={t('cluster_info.list.host_table.title')}
            key="host"
          ></CardTabs.TabPane>
          <CardTabs.TabPane
            tab={t('cluster_info.list.store_topology.title')}
            key="store_topology"
          ></CardTabs.TabPane>
        </CardTabs>
        {tabKey === 'instance' && <InstanceTable />}
        {tabKey === 'host' && <HostTable />}
        {tabKey === 'store_topology' && <StoreLocation />}
      </Card>
    </ScrollablePane>

Not sure whether it is fine.

Nice dig, can we encapsulate this logic into our own components, in order to avoid writing this hack everywhere? Or is there "detached tabs" available in Antd?

baurine · 2020-11-26T09:07:05Z

Nice dig, can we encapsulate this logic into our own components, in order to avoid writing this hack everywhere? Or is there "detached tabs" available in Antd?

Let me try it.

breezewish · 2020-11-27T06:26:43Z

ui/lib/components/CardTabs/index.module.less

@@ -3,7 +3,7 @@
  margin-right: -@padding-page;

  :global {
-    .ant-tabs-bar {
+    .ant-tabs-nav {


Maybe better to find some way to remove this rule (which depends on the internal implementation of Antd's Tab).

I'm not sure renderTabBar could be useful.

ok, let me try it.

It works, awesome!

baurine · 2020-11-27T07:19:43Z

ui/lib/components/CardTabs/index.tsx

 }

-function CardTabs({ className, children, ...restProps }: ICardTabsProps) {
+function CardTabs({


hi @breeswish , refactor the CardTabs like this, is it ok?

unbyte · 2020-12-01T03:30:13Z

LGTM

breezewish · 2020-12-14T05:06:05Z

/merge

ti-chi-bot · 2020-12-14T05:06:08Z

@breeswish: adding 'status/can-merge' to this PR must have 1 LGTMs

In response to this:

/merge

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the tidb-community-bots/ti-community-prow repository.

ti-chi-bot · 2020-12-14T05:06:18Z

@breeswish: adding 'status/can-merge' to this PR must have 1 LGTMs

In response to this:

/merge

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the tidb-community-bots/ti-community-prow repository.

breezewish · 2020-12-14T05:11:24Z

/merge

ti-chi-bot · 2020-12-14T05:11:27Z

Can merge label has been added.

Git tree hash: 5c971d3

* *: upgrade antd from 4.2.5 to 4.8.5 * yarn upgrade dayjs --latest * fix tabs style * fix tabs style * wip * only use CardTabs as the indicator * use variables in less * refine * refactor CardTabs * refine style Co-authored-by: Wenxuan <hi@breeswish.org>

* ui: increasing precision for metric chart y axis (#823) * build(deps): bump ini from 1.3.5 to 1.3.8 in /ui (#824) * build(deps): bump ini from 1.3.5 to 1.3.8 in /ui/tests (#825) * Upgrade antd (#811) * Upgrade ahooks (#814) * fix issue of query topn statement get error (#827) * ui: show indents for slow query detail time more elegantly (#830) * differ tikv and tiflash nodes (#834) * Release v2021.01.04.1

baurine added 4 commits November 24, 2020 14:22

*: upgrade antd from 4.2.5 to 4.8.5

9beb749

yarn upgrade dayjs --latest

5559a6f

fix tabs style

d17157b

fix tabs style

200a03f

baurine marked this pull request as draft November 24, 2020 09:53

breezewish reviewed Nov 24, 2020

View reviewed changes

ui/lib/apps/ClusterInfo/pages/List.module.less Outdated Show resolved Hide resolved

ui/lib/apps/ClusterInfo/pages/List.module.less Outdated Show resolved Hide resolved

ui/lib/apps/ClusterInfo/pages/List.module.less Outdated Show resolved Hide resolved

wip

19ca772

baurine added 3 commits November 25, 2020 14:38

only use CardTabs as the indicator

6292e6b

use variables in less

eeda84f

refine

cc32cf6

baurine commented Nov 25, 2020

View reviewed changes

baurine marked this pull request as ready for review November 25, 2020 06:55

baurine changed the title ~~[wip] Upgrade antd~~ Upgrade antd Nov 25, 2020

Merge remote-tracking branch 'origin/master' into upgrade-antd

a9aad8f

Merge remote-tracking branch 'origin/master' into upgrade-antd

4312b78

baurine mentioned this pull request Nov 26, 2020

Upgrade ahooks #814

Merged

baurine mentioned this pull request Nov 26, 2020

clusterinfo: Refine #815

Merged

Merge remote-tracking branch 'origin/master' into upgrade-antd

edde0c1

breezewish reviewed Nov 27, 2020

View reviewed changes

refactor CardTabs

18d2747

baurine commented Nov 27, 2020

View reviewed changes

refine style

e68c6ba

breezewish approved these changes Dec 14, 2020

View reviewed changes

ti-chi-bot added the status/LGT1 label Dec 14, 2020

Merge branch 'master' into upgrade-antd

5c971d3

ti-chi-bot added the status/can-merge label Dec 14, 2020

ti-chi-bot merged commit 39e4d0c into pingcap:master Dec 14, 2020

baurine deleted the upgrade-antd branch December 16, 2020 14:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade antd #811

Upgrade antd #811

baurine commented Nov 24, 2020 •

edited

Loading

breezewish commented Nov 24, 2020

baurine commented Nov 25, 2020

baurine commented Nov 25, 2020 •

edited

Loading

baurine commented Nov 25, 2020 •

edited

Loading

baurine Nov 25, 2020 •

edited

Loading

baurine commented Nov 25, 2020

baurine commented Nov 25, 2020

breezewish commented Nov 25, 2020

unbyte commented Nov 25, 2020

baurine commented Nov 25, 2020 •

edited

Loading

breezewish commented Nov 26, 2020

baurine commented Nov 26, 2020 •

edited

Loading

breezewish Nov 27, 2020 •

edited

Loading

baurine Nov 27, 2020

baurine Nov 27, 2020 •

edited

Loading

baurine Nov 27, 2020

unbyte commented Dec 1, 2020

breezewish commented Dec 14, 2020

ti-chi-bot commented Dec 14, 2020

ti-chi-bot commented Dec 14, 2020

breezewish commented Dec 14, 2020

ti-chi-bot commented Dec 14, 2020

Upgrade antd #811

Upgrade antd #811

Conversation

baurine commented Nov 24, 2020 • edited Loading

breezewish commented Nov 24, 2020

baurine commented Nov 25, 2020

baurine commented Nov 25, 2020 • edited Loading

baurine commented Nov 25, 2020 • edited Loading

baurine Nov 25, 2020 • edited Loading

Choose a reason for hiding this comment

baurine commented Nov 25, 2020

baurine commented Nov 25, 2020

breezewish commented Nov 25, 2020

unbyte commented Nov 25, 2020

baurine commented Nov 25, 2020 • edited Loading

breezewish commented Nov 26, 2020

baurine commented Nov 26, 2020 • edited Loading

breezewish Nov 27, 2020 • edited Loading

Choose a reason for hiding this comment

baurine Nov 27, 2020

Choose a reason for hiding this comment

baurine Nov 27, 2020 • edited Loading

Choose a reason for hiding this comment

baurine Nov 27, 2020

Choose a reason for hiding this comment

unbyte commented Dec 1, 2020

breezewish commented Dec 14, 2020

ti-chi-bot commented Dec 14, 2020

ti-chi-bot commented Dec 14, 2020

breezewish commented Dec 14, 2020

ti-chi-bot commented Dec 14, 2020

baurine commented Nov 24, 2020 •

edited

Loading

baurine commented Nov 25, 2020 •

edited

Loading

baurine commented Nov 25, 2020 •

edited

Loading

baurine Nov 25, 2020 •

edited

Loading

baurine commented Nov 25, 2020 •

edited

Loading

baurine commented Nov 26, 2020 •

edited

Loading

breezewish Nov 27, 2020 •

edited

Loading

baurine Nov 27, 2020 •

edited

Loading