Merge pull request #1439 from collinbarrett/ant4

update to Antd v4

web/package.json

@@ -11,7 +11,7 @@
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "@types/react-router-dom": "^5.1.3",
-    "antd": "^3.26.13",
+    "antd": "^4.0.3",
     "babel-plugin-import": "^1.13.0",
     "customize-cra": "^0.9.1",
     "react": "^16.13.0",

web/src/App.tsx

@@ -1,4 +1,11 @@
-import { Icon, Layout, Menu, Tag } from "antd";
+import {
+  ApiOutlined,
+  DollarOutlined,
+  GithubOutlined,
+  TeamOutlined,
+  TwitterOutlined
+} from "@ant-design/icons";
+import { Layout, Menu, Tag } from "antd";
 import React from "react";
 import {
   BrowserRouter as Router,
@@ -93,7 +100,7 @@ const Twitter = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="twitter" /> Twitter
+      <TwitterOutlined /> Twitter
     </a>
   </Tag>
 );
@@ -106,7 +113,7 @@ const Community = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="team" /> Community
+      <TeamOutlined /> Community
     </a>
   </Tag>
 );
@@ -119,7 +126,7 @@ const GitHub = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="github" /> GitHub
+      <GithubOutlined /> GitHub
     </a>
   </Tag>
 );
@@ -132,7 +139,7 @@ const Api = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="api" /> API
+      <ApiOutlined /> API
     </a>
   </Tag>
 );
@@ -145,7 +152,7 @@ const Donate = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="dollar" /> Donate
+      <DollarOutlined /> Donate
     </a>
   </Tag>
 );

web/src/components/LinkButton.tsx

@@ -7,7 +7,7 @@ interface Props {
   text: string;
   title?: string;
   type?: ButtonType;
-  icon?: string;
+  icon?: React.ReactNode;
 }
 
 export const LinkButton = (props: Props) =>

web/src/components/ListInfoButton.tsx

@@ -1,4 +1,5 @@
-import { Button, Icon } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Button } from "antd";
 import React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import slugify from "slugify";
@@ -21,7 +22,7 @@ export const ListInfoButton = (props: RouteComponentProps & Props) => {
           : props.history.push(listPath)
       }
     >
-      <Icon type="info-circle" />
+      <InfoCircleOutlined />
     </Button>
   );
 };

web/src/components/SubscribeButtons.tsx

@@ -1,3 +1,4 @@
+import { ImportOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 import { ButtonType } from "antd/lib/button";
 import React from "react";
@@ -52,7 +53,7 @@ const SubscribeButton = (props: SubscribeButtonProps) => {
     <Button
       disabled={buttonProps.disabled}
       block
-      icon="import"
+      icon={<ImportOutlined />}
       type={buttonProps.type}
       href={buttonProps.href}
       title={buttonProps.title}

web/src/components/listInfoDrawer/ListInfoDrawer.tsx

@@ -1,26 +1,37 @@
 import "./listInfoDrawer.css";
 
 import { Divider, Drawer } from "antd";
-import ButtonGroup from "antd/lib/button/button-group";
+import {
+  DollarOutlined,
+  FileExclamationOutlined,
+  FormOutlined,
+  GithubOutlined,
+  HomeOutlined,
+  MailOutlined,
+  MessageOutlined,
+  SearchOutlined,
+  TeamOutlined
+} from "@ant-design/icons";
 import React, { useEffect, useState } from "react";
-import { RouteComponentProps } from "react-router-dom";
 
-import { Language } from "../../interfaces/Language";
-import { License } from "../../interfaces/License";
-import { List } from "../../interfaces/List";
-import { Maintainer } from "../../interfaces/Maintainer";
-import { Software } from "../../interfaces/Software";
-import { Syntax } from "../../interfaces/Syntax";
-import { Tag } from "../../interfaces/Tag";
+import ButtonGroup from "antd/lib/button/button-group";
 import { Description } from "../Description";
+import { Language } from "../../interfaces/Language";
 import { LanguageCloud } from "../languageCloud";
+import { License } from "../../interfaces/License";
 import { LicenseTag } from "../LicenseTag";
 import { LinkButton } from "../LinkButton";
+import { List } from "../../interfaces/List";
+import { Maintainer } from "../../interfaces/Maintainer";
 import { Maintainers } from "../maintainers";
 import { PublishedDate } from "../PublishedDate";
+import { RouteComponentProps } from "react-router-dom";
+import { Software } from "../../interfaces/Software";
 import { SoftwareCloud } from "../softwareCloud";
 import { SubscribeButtons } from "../SubscribeButtons";
+import { Syntax } from "../../interfaces/Syntax";
 import { SyntaxTag } from "../SyntaxTag";
+import { Tag } from "../../interfaces/Tag";
 import { TagCloud } from "../tagCloud";
 
 interface Props {
@@ -87,57 +98,57 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
           url={props.list.viewUrl}
           text="View"
           title={`View ${props.list.name} in its raw format`}
-          icon="search"
+          icon={<SearchOutlined />}
         />
         <LinkButton
           url={props.list.homeUrl}
           text="Home"
           title={`View ${props.list.name}'s homepage.`}
-          icon="home"
+          icon={<HomeOutlined />}
         />
         <LinkButton
           url={props.list.policyUrl}
           text="Policy"
           title={`View the types of rules that ${props.list.name} includes.`}
-          icon="file-exclamation"
+          icon={<FileExclamationOutlined />}
         />
         {props.list.emailAddress && (
           <LinkButton
             url={`mailto:${props.list.emailAddress}`}
             text="Email"
             title={`Email ${props.list.name}.`}
-            icon="mail"
+            icon={<MailOutlined />}
           />
         )}
         <LinkButton
           url={props.list.issuesUrl}
           text="GitHub Issues"
           title={`View the GitHub Issues for ${props.list.name}.`}
-          icon="github"
+          icon={<GithubOutlined />}
         />
         <LinkButton
           url={props.list.submissionUrl}
           text="Submit a Rule"
           title={`Submit a new rule to be included in ${props.list.name}.`}
-          icon="form"
+          icon={<FormOutlined />}
         />
         <LinkButton
           url={props.list.forumUrl}
           text="Forum"
           title={`View the forum for ${props.list.name}.`}
-          icon="team"
+          icon={<TeamOutlined />}
         />
         <LinkButton
           url={props.list.chatUrl}
           text="Chat"
           title={`Enter the chat room for ${props.list.name}.`}
-          icon="message"
+          icon={<MessageOutlined />}
         />
         <LinkButton
           url={props.list.donateUrl}
           text="Donate"
           title={`Donate to the maintainer of ${props.list.name}.`}
-          icon="dollar"
+          icon={<DollarOutlined />}
         />
       </ButtonGroup>
     </Drawer>

web/src/components/listsTable/ListsTable.tsx

@@ -1,32 +1,33 @@
 import "./listsTable.css";
 
-import { Table, Tag } from "antd";
 import {
-  PaginationConfig,
+  Key,
   SorterResult,
   TableCurrentDataSource
-} from "antd/lib/table";
+} from "antd/lib/table/interface";
 import React, { useEffect, useState } from "react";
-import { RouteComponentProps } from "react-router";
-
+import { SoftwareCloud, SoftwareIcon } from "../softwareCloud";
+import { Table, Tag } from "antd";
 import { useSearchColumnFilter, useTablePageSizer } from "../../hooks";
+
+import { Description } from "../Description";
 import { Language } from "../../interfaces/Language";
+import { LanguageCloud } from "../languageCloud";
 import { License } from "../../interfaces/License";
+import { LicenseTag } from "../LicenseTag";
 import { List } from "../../interfaces/List";
+import { ListInfoButton } from "../ListInfoButton";
 import { Maintainer } from "../../interfaces/Maintainer";
+import { MaintainerCloud } from "../maintainerCloud";
+import { PaginationConfig } from "antd/lib/pagination";
+import { RouteComponentProps } from "react-router";
 import { Software } from "../../interfaces/Software";
 import { Syntax } from "../../interfaces/Syntax";
-import { Tag as TagInterface } from "../../interfaces/Tag";
-import { nameof } from "../../utils";
-import { Description } from "../Description";
-import { LanguageCloud } from "../languageCloud";
-import { LicenseTag } from "../LicenseTag";
-import { ListInfoButton } from "../ListInfoButton";
-import { MaintainerCloud } from "../maintainerCloud";
-import { SoftwareCloud, SoftwareIcon } from "../softwareCloud";
 import { SyntaxTag } from "../SyntaxTag";
 import { TagCloud } from "../tagCloud";
+import { Tag as TagInterface } from "../../interfaces/Tag";
 import { arraySorter } from "./arraySorter";
+import { nameof } from "../../utils";
 import styles from "./ListsTable.module.css";
 
 interface Props {
@@ -78,8 +79,8 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
       }}
       onChange={(
         _pagination: PaginationConfig,
-        _filters: Partial<Record<keyof List, string[]>>,
-        _sorter: SorterResult<List>,
+        _filters: Record<string, Key[] | null>,
+        _sorter: SorterResult<List> | SorterResult<List>[],
         extra: TableCurrentDataSource<List>
       ) => setVisibleLists(extra.currentDataSource)}
     >
@@ -87,7 +88,7 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
         title="Info"
         key="Info"
         dataIndex={nameof<List>("id")}
-        width={tablePageSize.isNarrowWindow ? 43 : undefined}
+        width={62}
         className={styles.nogrow}
         fixed={tablePageSize.isNarrowWindow ? undefined : "left"}
         render={(_id: number, list: List) => (

web/src/components/maintainers/Maintainers.tsx

@@ -1,6 +1,8 @@
 import "./maintainers.css";
 
-import { Card, Icon } from "antd";
+import { HomeOutlined, MailOutlined, TwitterOutlined } from "@ant-design/icons";
+
+import { Card } from "antd";
 import React from "react";
 
 import { Maintainer } from "../../interfaces/Maintainer";
@@ -33,7 +35,7 @@ const MaintainerComponent = (props: MaintainerComponentProps) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Icon type="home" key="home" />
+        <HomeOutlined key="home" />
       </a>
     );
   }
@@ -45,7 +47,7 @@ const MaintainerComponent = (props: MaintainerComponentProps) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Icon type="mail" key="mail" />
+        <MailOutlined key="mail" />
       </a>
     );
   }
@@ -57,7 +59,7 @@ const MaintainerComponent = (props: MaintainerComponentProps) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Icon type="twitter" key="twitter" />
+        <TwitterOutlined key="twitter" />
       </a>
     );
   }

web/src/hooks/useSearchColumnFilter.tsx

@@ -1,6 +1,7 @@
-import { Button, Icon, Input } from "antd";
-import { FilterDropdownProps } from "antd/lib/table";
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input } from "antd";
 import React, { useEffect, useState } from "react";
+import { FilterDropdownProps } from "antd/lib/table/interface";
 
 interface FilterPropsState<T> {
   filterDropdown?:
@@ -45,7 +46,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
           <Button
             type="primary"
             onClick={() => handleSearch(confirm)}
-            icon="search"
+            icon={<SearchOutlined />}
             size="small"
             style={{ width: 90, marginRight: 8 }}
           >
@@ -61,10 +62,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
         </div>
       ),
       filterIcon: filtered => (
-        <Icon
-          type="search"
-          style={{ color: filtered ? "#1890ff" : undefined }}
-        />
+        <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
       ),
       onFilter: (value, record) => {
         const searchValue = (record as any)[dataIndex];