Improve provider table in app edit page.

web/src/ProviderListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Table, Tooltip} from 'antd';
+import {Button, Popconfirm, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as ProviderBackend from "./backend/ProviderBackend";
@@ -146,22 +146,7 @@ class ProviderListPage extends React.Component {
         align: 'center',
         sorter: (a, b) => a.type.localeCompare(b.type),
         render: (text, record, index) => {
-          const url = Provider.getProviderUrl(record);
-          if (url !== "") {
-            return (
-              <Tooltip title={record.type}>
-                <a target="_blank" rel="noreferrer" href={Provider.getProviderUrl(record)}>
-                  <img width={36} height={36} src={Provider.getProviderLogo(record)} alt={record.displayName} />
-                </a>
-              </Tooltip>
-            )
-          } else {
-            return (
-              <Tooltip title={record.type}>
-                <img width={36} height={36} src={Provider.getProviderLogo(record)} alt={record.displayName} />
-              </Tooltip>
-            )
-          }
+          return Provider.getProviderLogoWidget(record);
         }
       },
       {

web/src/ProviderTable.js

@@ -17,6 +17,7 @@ import {DownOutlined, DeleteOutlined, UpOutlined} from '@ant-design/icons';
 import {Button, Col, Row, Select, Switch, Table, Tooltip} from 'antd';
 import * as Setting from "./Setting";
 import i18next from "i18next";
+import * as Provider from "./auth/Provider";
 
 const { Option } = Select;
 
@@ -83,6 +84,26 @@ class ProviderTable extends React.Component {
           )
         }
       },
+      {
+        title: i18next.t("provider:Category"),
+        dataIndex: 'category',
+        key: 'category',
+        width: '100px',
+        render: (text, record, index) => {
+          const provider = Setting.getArrayItem(this.props.providers, "name", record.name);
+          return provider?.category;
+        }
+      },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: 'type',
+        key: 'type',
+        width: '80px',
+        render: (text, record, index) => {
+          const provider = Setting.getArrayItem(this.props.providers, "name", record.name);
+          return Provider.getProviderLogoWidget(provider);
+        }
+      },
       {
         title: i18next.t("provider:canSignUp"),
         dataIndex: 'canSignUp',

web/src/auth/Provider.js

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from "react";
+import {Tooltip} from "antd";
 import * as Util from "./Util";
 import {StaticBaseUrl} from "../Setting";
 
@@ -130,6 +132,29 @@ export function getProviderUrl(provider) {
   }
 }
 
+export function getProviderLogoWidget(provider) {
+  if (provider === undefined) {
+    return null;
+  }
+
+  const url = getProviderUrl(provider);
+  if (url !== "") {
+    return (
+      <Tooltip title={provider.type}>
+        <a target="_blank" rel="noreferrer" href={getProviderUrl(provider)}>
+          <img width={36} height={36} src={getProviderLogo(provider)} alt={provider.displayName} />
+        </a>
+      </Tooltip>
+    )
+  } else {
+    return (
+      <Tooltip title={provider.type}>
+        <img width={36} height={36} src={getProviderLogo(provider)} alt={provider.displayName} />
+      </Tooltip>
+    )
+  }
+}
+
 export function getAuthUrl(application, provider, method) {
   if (application === null || provider === null) {
     return "";