feat: support add providers inside the Organization scope (#1250)

* feat: support add providers inside the Organization scope

Signed-off-by: magicwind <2814461814@qq.com>

* Update ProviderListPage.js

* fix: gloabal admin can see all providers

* fix: table fixed column warning

* fix: edit application page can get all providers

Signed-off-by: magicwind <2814461814@qq.com>
Co-authored-by: hsluoyz <hsluoyz@qq.com>

web/src/AdapterListPage.js

@@ -70,21 +70,6 @@ class AdapterListPage extends BaseListPage {
 
   renderTable(adapters) {
     const columns = [
-      {
-        title: i18next.t("general:Organization"),
-        dataIndex: "organization",
-        key: "organization",
-        width: "120px",
-        sorter: true,
-        ...this.getColumnSearchProps("organization"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/organizations/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
       {
         title: i18next.t("general:Name"),
         dataIndex: "name",
@@ -101,6 +86,21 @@ class AdapterListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",

web/src/App.js

@@ -420,13 +420,6 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
-      res.push(
-        <Menu.Item key="/providers">
-          <Link to="/providers">
-            {i18next.t("general:Providers")}
-          </Link>
-        </Menu.Item>
-      );
       res.push(
         <Menu.Item key="/applications">
           <Link to="/applications">
@@ -437,6 +430,13 @@ class App extends Component {
     }
 
     if (Setting.isLocalAdminUser(this.state.account)) {
+      res.push(
+        <Menu.Item key="/providers">
+          <Link to="/providers">
+            {i18next.t("general:Providers")}
+          </Link>
+        </Menu.Item>
+      );
       res.push(
         <Menu.Item key="/resources">
           <Link to="/resources">
@@ -566,6 +566,7 @@ class App extends Component {
           <Route exact path="/adapters/:organizationName/:adapterName" render={(props) => this.renderLoginIfNotLoggedIn(<AdapterEditPage account={this.state.account} {...props} />)} />
           <Route exact path="/providers" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderListPage account={this.state.account} {...props} />)} />
           <Route exact path="/providers/:providerName" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/providers/:organizationName/:providerName" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderEditPage account={this.state.account} {...props} />)} />
           <Route exact path="/applications" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationListPage account={this.state.account} {...props} />)} />
           <Route exact path="/applications/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationEditPage account={this.state.account} {...props} />)} />
           <Route exact path="/resources" render={(props) => this.renderLoginIfNotLoggedIn(<ResourceListPage account={this.state.account} {...props} />)} />

web/src/ApplicationEditPage.js

@@ -91,6 +91,7 @@ class ApplicationEditPage extends React.Component {
     super(props);
     this.state = {
       classes: props,
+      owner: props.account.owner,
       applicationName: props.match.params.applicationName,
       application: null,
       organizations: [],
@@ -141,12 +142,21 @@ class ApplicationEditPage extends React.Component {
   }
 
   getProviders() {
-    ProviderBackend.getProviders("admin")
-      .then((res) => {
-        this.setState({
-          providers: res,
+    if (Setting.isAdminUser(this.props.account)) {
+      ProviderBackend.getGlobalProviders()
+        .then((res) => {
+          this.setState({
+            providers: res,
+          });
         });
-      });
+    } else {
+      ProviderBackend.getProviders(this.state.owner)
+        .then((res) => {
+          this.setState({
+            providers: res,
+          });
+        });
+    }
   }
 
   getSamlMetadata() {

web/src/ModelListPage.js

@@ -63,21 +63,6 @@ class ModelListPage extends BaseListPage {
 
   renderTable(models) {
     const columns = [
-      {
-        title: i18next.t("general:Organization"),
-        dataIndex: "owner",
-        key: "owner",
-        width: "120px",
-        sorter: true,
-        ...this.getColumnSearchProps("owner"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/organizations/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
       {
         title: i18next.t("general:Name"),
         dataIndex: "name",
@@ -94,6 +79,21 @@ class ModelListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "owner",
+        key: "owner",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("owner"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",

web/src/PaymentListPage.js

@@ -76,6 +76,38 @@ class PaymentListPage extends BaseListPage {
 
   renderTable(payments) {
     const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "180px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/payments/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Provider"),
+        dataIndex: "provider",
+        key: "provider",
+        width: "150px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("provider"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/providers/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Organization"),
         dataIndex: "organization",
@@ -106,22 +138,7 @@ class PaymentListPage extends BaseListPage {
           );
         },
       },
-      {
-        title: i18next.t("general:Name"),
-        dataIndex: "name",
-        key: "name",
-        width: "180px",
-        fixed: "left",
-        sorter: true,
-        ...this.getColumnSearchProps("name"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/payments/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
+
       {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",
@@ -140,22 +157,6 @@ class PaymentListPage extends BaseListPage {
       //   sorter: true,
       //   ...this.getColumnSearchProps('displayName'),
       // },
-      {
-        title: i18next.t("general:Provider"),
-        dataIndex: "provider",
-        key: "provider",
-        width: "150px",
-        fixed: "left",
-        sorter: true,
-        ...this.getColumnSearchProps("provider"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/providers/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
       {
         title: i18next.t("payment:Type"),
         dataIndex: "type",

web/src/PermissionListPage.js

@@ -77,21 +77,7 @@ class PermissionListPage extends BaseListPage {
 
   renderTable(permissions) {
     const columns = [
-      {
-        title: i18next.t("general:Organization"),
-        dataIndex: "owner",
-        key: "owner",
-        width: "120px",
-        sorter: true,
-        ...this.getColumnSearchProps("owner"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/organizations/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
+      // https://github.com/ant-design/ant-design/issues/22184
       {
         title: i18next.t("general:Name"),
         dataIndex: "name",
@@ -108,6 +94,21 @@ class PermissionListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "owner",
+        key: "owner",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("owner"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",

web/src/ProviderEditPage.js

@@ -32,6 +32,7 @@ class ProviderEditPage extends React.Component {
     this.state = {
       classes: props,
       providerName: props.match.params.providerName,
+      owner: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
       provider: null,
       mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
@@ -42,7 +43,7 @@ class ProviderEditPage extends React.Component {
   }
 
   getProvider() {
-    ProviderBackend.getProvider("admin", this.state.providerName)
+    ProviderBackend.getProvider(this.state.owner, this.state.providerName)
       .then((provider) => {
         this.setState({
           provider: provider,

web/src/ProviderListPage.js

@@ -23,10 +23,25 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 
 class ProviderListPage extends BaseListPage {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      owner: Setting.isAdminUser(props.account) ? "admin" : props.account.organization.name,
+      data: [],
+      pagination: {
+        current: 1,
+        pageSize: 10,
+      },
+      loading: false,
+      searchText: "",
+      searchedColumn: "",
+    };
+  }
   newProvider() {
     const randomName = Setting.getRandomName();
     return {
-      owner: "admin", // this.props.account.providername,
+      owner: this.state.owner,
       name: `provider_${randomName}`,
       createdTime: moment().format(),
       displayName: `New Provider - ${randomName}`,
@@ -46,7 +61,7 @@ class ProviderListPage extends BaseListPage {
     const newProvider = this.newProvider();
     ProviderBackend.addProvider(newProvider)
       .then((res) => {
-        this.props.history.push({pathname: `/providers/${newProvider.name}`, mode: "add"});
+        this.props.history.push({pathname: `/providers/${newProvider.owner}/${newProvider.name}`, mode: "add"});
       }
       )
       .catch(error => {
@@ -177,7 +192,7 @@ class ProviderListPage extends BaseListPage {
         render: (text, record, index) => {
           return (
             <div>
-              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/providers/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/providers/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete provider: ${record.name} ?`}
                 onConfirm={() => this.deleteProvider(index)}
@@ -224,7 +239,8 @@ class ProviderListPage extends BaseListPage {
       value = params.type;
     }
     this.setState({loading: true});
-    ProviderBackend.getProviders("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+    (Setting.isAdminUser(this.props.account) ? ProviderBackend.getGlobalProviders(params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+      : ProviderBackend.getProviders(this.state.owner, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder))
       .then((res) => {
         if (res.status === "ok") {
           this.setState({

web/src/RoleListPage.js

@@ -65,21 +65,6 @@ class RoleListPage extends BaseListPage {
 
   renderTable(roles) {
     const columns = [
-      {
-        title: i18next.t("general:Organization"),
-        dataIndex: "owner",
-        key: "owner",
-        width: "120px",
-        sorter: true,
-        ...this.getColumnSearchProps("owner"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/organizations/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
       {
         title: i18next.t("general:Name"),
         dataIndex: "name",
@@ -96,6 +81,21 @@ class RoleListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "owner",
+        key: "owner",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("owner"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",

web/src/SyncerListPage.js

@@ -88,21 +88,6 @@ class SyncerListPage extends BaseListPage {
 
   renderTable(syncers) {
     const columns = [
-      {
-        title: i18next.t("general:Organization"),
-        dataIndex: "organization",
-        key: "organization",
-        width: "120px",
-        sorter: true,
-        ...this.getColumnSearchProps("organization"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/organizations/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
       {
         title: i18next.t("general:Name"),
         dataIndex: "name",
@@ -119,6 +104,21 @@ class SyncerListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",

web/src/WebhookListPage.js

@@ -67,21 +67,6 @@ class WebhookListPage extends BaseListPage {
 
   renderTable(webhooks) {
     const columns = [
-      {
-        title: i18next.t("general:Organization"),
-        dataIndex: "organization",
-        key: "organization",
-        width: "110px",
-        sorter: true,
-        ...this.getColumnSearchProps("organization"),
-        render: (text, record, index) => {
-          return (
-            <Link to={`/organizations/${text}`}>
-              {text}
-            </Link>
-          );
-        },
-      },
       {
         title: i18next.t("general:Name"),
         dataIndex: "name",
@@ -98,6 +83,21 @@ class WebhookListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "110px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",

web/src/backend/ProviderBackend.js

@@ -24,6 +24,16 @@ export function getProviders(owner, page = "", pageSize = "", field = "", value
   }).then(res => res.json());
 }
 
+export function getGlobalProviders(page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+  return fetch(`${Setting.ServerUrl}/api/get-global-providers?p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
 export function getProvider(owner, name) {
   return fetch(`${Setting.ServerUrl}/api/get-provider?id=${owner}/${encodeURIComponent(name)}`, {
     method: "GET",