feat: fix bug that initialize group children as empty array instead of empty string (#3620)

go.mod

@@ -1,6 +1,6 @@
 module github.com/casdoor/casdoor
 
-go 1.16
+go 1.18
 
 require (
 	github.com/Masterminds/squirrel v1.5.3
@@ -18,7 +18,6 @@ require (
 	github.com/casvisor/casvisor-go-sdk v1.4.0
 	github.com/dchest/captcha v0.0.0-20200903113550-03f5f0333e1f
 	github.com/denisenkom/go-mssqldb v0.9.0
-	github.com/elazarl/go-bindata-assetfs v1.0.1 // indirect
 	github.com/elimity-com/scim v0.0.0-20230426070224-941a5eac92f3
 	github.com/fogleman/gg v1.3.0
 	github.com/go-asn1-ber/asn1-ber v1.5.5
@@ -46,7 +45,6 @@ require (
 	github.com/russellhaering/gosaml2 v0.9.0
 	github.com/russellhaering/goxmldsig v1.2.0
 	github.com/sendgrid/sendgrid-go v3.14.0+incompatible
-	github.com/shiena/ansicolor v0.0.0-20200904210342-c7312218db18 // indirect
 	github.com/shirou/gopsutil v3.21.11+incompatible
 	github.com/siddontang/go-log v0.0.0-20190221022429-1e957dd83bed
 	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e
@@ -54,20 +52,179 @@ require (
 	github.com/stripe/stripe-go/v74 v74.29.0
 	github.com/tealeg/xlsx v1.0.5
 	github.com/thanhpk/randstr v1.0.4
-	github.com/tidwall/pretty v1.2.1 // indirect
-	github.com/tklauser/go-sysconf v0.3.10 // indirect
 	github.com/xorm-io/builder v0.3.13
 	github.com/xorm-io/core v0.7.4
 	github.com/xorm-io/xorm v1.1.6
-	github.com/yusufpapurcu/wmi v1.2.2 // indirect
 	golang.org/x/crypto v0.32.0
 	golang.org/x/net v0.34.0
 	golang.org/x/oauth2 v0.17.0
 	golang.org/x/text v0.21.0
 	google.golang.org/api v0.150.0
-	gopkg.in/ini.v1 v1.67.0 // indirect
 	gopkg.in/square/go-jose.v2 v2.6.0
 	layeh.com/radius v0.0.0-20221205141417-e7fbddd11d68
 	maunium.net/go/mautrix v0.16.0
 	modernc.org/sqlite v1.18.2
 )
+
+require (
+	cloud.google.com/go v0.110.8 // indirect
+	cloud.google.com/go/compute v1.23.1 // indirect
+	cloud.google.com/go/compute/metadata v0.2.3 // indirect
+	cloud.google.com/go/iam v1.1.3 // indirect
+	cloud.google.com/go/storage v1.35.1 // indirect
+	dario.cat/mergo v1.0.0 // indirect
+	github.com/Azure/azure-pipeline-go v0.2.3 // indirect
+	github.com/Azure/azure-storage-blob-go v0.15.0 // indirect
+	github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358 // indirect
+	github.com/BurntSushi/toml v0.3.1 // indirect
+	github.com/Knetic/govaluate v3.0.1-0.20171022003610-9aa49832a739+incompatible // indirect
+	github.com/Microsoft/go-winio v0.6.1 // indirect
+	github.com/ProtonMail/go-crypto v0.0.0-20230828082145-3c4c8a2d2371 // indirect
+	github.com/RocketChat/Rocket.Chat.Go.SDK v0.0.0-20221121042443-a3fd332d56d9 // indirect
+	github.com/SherClockHolmes/webpush-go v1.2.0 // indirect
+	github.com/aliyun/alibaba-cloud-sdk-go v1.62.545 // indirect
+	github.com/aliyun/aliyun-oss-go-sdk v2.2.2+incompatible // indirect
+	github.com/apistd/uni-go-sdk v0.0.2 // indirect
+	github.com/atc0005/go-teams-notify/v2 v2.6.1 // indirect
+	github.com/baidubce/bce-sdk-go v0.9.156 // indirect
+	github.com/beorn7/perks v1.0.1 // indirect
+	github.com/blinkbean/dingtalk v0.0.0-20210905093040-7d935c0f7e19 // indirect
+	github.com/boombuler/barcode v1.0.1-0.20190219062509-6c824513bacc // indirect
+	github.com/bwmarrin/discordgo v0.27.1 // indirect
+	github.com/casdoor/casdoor-go-sdk v0.50.0 // indirect
+	github.com/casdoor/go-reddit/v2 v2.1.0 // indirect
+	github.com/cenkalti/backoff/v4 v4.1.3 // indirect
+	github.com/cespare/xxhash/v2 v2.2.0 // indirect
+	github.com/cloudflare/circl v1.3.3 // indirect
+	github.com/cschomburg/go-pushbullet v0.0.0-20171206132031-67759df45fbb // indirect
+	github.com/cyphar/filepath-securejoin v0.2.4 // indirect
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/decred/dcrd/dcrec/secp256k1/v4 v4.2.0 // indirect
+	github.com/dghubble/oauth1 v0.7.2 // indirect
+	github.com/dghubble/sling v1.4.0 // indirect
+	github.com/di-wu/parser v0.2.2 // indirect
+	github.com/di-wu/xsd-datetime v1.0.0 // indirect
+	github.com/drswork/go-twitter v0.0.0-20221107160839-dea1b6ed53d7 // indirect
+	github.com/elazarl/go-bindata-assetfs v1.0.1 // indirect
+	github.com/emirpasic/gods v1.18.1 // indirect
+	github.com/fxamacker/cbor/v2 v2.4.0 // indirect
+	github.com/go-git/gcfg v1.5.1-0.20230307220236-3a3c6141e376 // indirect
+	github.com/go-git/go-billy/v5 v5.5.0 // indirect
+	github.com/go-lark/lark v1.9.0 // indirect
+	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/go-webauthn/revoke v0.1.6 // indirect
+	github.com/goccy/go-json v0.10.2 // indirect
+	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
+	github.com/golang-sql/civil v0.0.0-20190719163853-cb61b32ac6fe // indirect
+	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect
+	github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
+	github.com/golang/mock v1.6.0 // indirect
+	github.com/golang/protobuf v1.5.3 // indirect
+	github.com/golang/snappy v0.0.4 // indirect
+	github.com/gomodule/redigo v2.0.0+incompatible // indirect
+	github.com/google/go-querystring v1.1.0 // indirect
+	github.com/google/go-tpm v0.3.3 // indirect
+	github.com/google/s2a-go v0.1.7 // indirect
+	github.com/googleapis/enterprise-certificate-proxy v0.3.2 // indirect
+	github.com/googleapis/gax-go/v2 v2.12.0 // indirect
+	github.com/gorilla/websocket v1.5.0 // indirect
+	github.com/gregdel/pushover v1.2.1 // indirect
+	github.com/hashicorp/golang-lru v0.5.4 // indirect
+	github.com/jbenet/go-context v0.0.0-20150711004518-d14ea06fba99 // indirect
+	github.com/jmespath/go-jmespath v0.4.0 // indirect
+	github.com/jonboulle/clockwork v0.2.2 // indirect
+	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
+	github.com/kevinburke/ssh_config v1.2.0 // indirect
+	github.com/lann/builder v0.0.0-20180802200727-47ae307949d0 // indirect
+	github.com/lann/ps v0.0.0-20150810152359-62de8c46ede0 // indirect
+	github.com/lestrrat-go/backoff/v2 v2.0.8 // indirect
+	github.com/lestrrat-go/blackmagic v1.0.2 // indirect
+	github.com/lestrrat-go/httpcc v1.0.1 // indirect
+	github.com/lestrrat-go/iter v1.0.2 // indirect
+	github.com/lestrrat-go/option v1.0.1 // indirect
+	github.com/line/line-bot-sdk-go v7.8.0+incompatible // indirect
+	github.com/markbates/going v1.0.0 // indirect
+	github.com/mattermost/xml-roundtrip-validator v0.1.0 // indirect
+	github.com/mattn/go-colorable v0.1.12 // indirect
+	github.com/mattn/go-ieproxy v0.0.1 // indirect
+	github.com/mattn/go-isatty v0.0.16 // indirect
+	github.com/matttproud/golang_protobuf_extensions v1.0.1 // indirect
+	github.com/mileusna/viber v1.0.1 // indirect
+	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
+	github.com/modern-go/reflect2 v1.0.2 // indirect
+	github.com/mrjones/oauth v0.0.0-20180629183705-f4e24b6d100c // indirect
+	github.com/opentracing/opentracing-go v1.2.1-0.20220228012449-10b1cf09e00b // indirect
+	github.com/pingcap/errors v0.11.5-0.20210425183316-da1aaba5fb63 // indirect
+	github.com/pingcap/log v0.0.0-20210625125904-98ed8e2eb1c7 // indirect
+	github.com/pingcap/tidb/parser v0.0.0-20221126021158-6b02a5d8ba7d // indirect
+	github.com/pjbgf/sha1cd v0.3.0 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
+	github.com/prometheus/common v0.30.0 // indirect
+	github.com/prometheus/procfs v0.7.3 // indirect
+	github.com/qiniu/go-sdk/v7 v7.12.1 // indirect
+	github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0 // indirect
+	github.com/rs/zerolog v1.30.0 // indirect
+	github.com/scim2/filter-parser/v2 v2.2.0 // indirect
+	github.com/sendgrid/rest v2.6.9+incompatible // indirect
+	github.com/sergi/go-diff v1.1.0 // indirect
+	github.com/shiena/ansicolor v0.0.0-20200904210342-c7312218db18 // indirect
+	github.com/shopspring/decimal v0.0.0-20180709203117-cd690d0c9e24 // indirect
+	github.com/siddontang/go v0.0.0-20180604090527-bdc77568d726 // indirect
+	github.com/sirupsen/logrus v1.9.0 // indirect
+	github.com/skeema/knownhosts v1.2.1 // indirect
+	github.com/slack-go/slack v0.12.3 // indirect
+	github.com/stretchr/objx v0.5.2 // indirect
+	github.com/syndtr/goleveldb v1.0.0 // indirect
+	github.com/technoweenie/multipartstreamer v1.0.1 // indirect
+	github.com/tencentcloud/tencentcloud-sdk-go/tencentcloud/common v1.0.744 // indirect
+	github.com/tencentcloud/tencentcloud-sdk-go/tencentcloud/sms v1.0.744 // indirect
+	github.com/tidwall/gjson v1.16.0 // indirect
+	github.com/tidwall/match v1.1.1 // indirect
+	github.com/tidwall/pretty v1.2.1 // indirect
+	github.com/tidwall/sjson v1.2.5 // indirect
+	github.com/tklauser/go-sysconf v0.3.10 // indirect
+	github.com/tklauser/numcpus v0.4.0 // indirect
+	github.com/twilio/twilio-go v1.13.0 // indirect
+	github.com/ucloud/ucloud-sdk-go v0.22.5 // indirect
+	github.com/utahta/go-linenotify v0.5.0 // indirect
+	github.com/volcengine/volc-sdk-golang v1.0.117 // indirect
+	github.com/x448/float16 v0.8.4 // indirect
+	github.com/xanzy/ssh-agent v0.3.3 // indirect
+	github.com/yusufpapurcu/wmi v1.2.2 // indirect
+	go.mau.fi/util v0.0.0-20230805171708-199bf3eec776 // indirect
+	go.opencensus.io v0.24.0 // indirect
+	go.uber.org/atomic v1.9.0 // indirect
+	go.uber.org/multierr v1.7.0 // indirect
+	go.uber.org/zap v1.19.1 // indirect
+	golang.org/x/exp v0.0.0-20230810033253-352e893a4cad // indirect
+	golang.org/x/image v0.0.0-20190802002840-cff245a6509b // indirect
+	golang.org/x/mod v0.17.0 // indirect
+	golang.org/x/sync v0.10.0 // indirect
+	golang.org/x/sys v0.29.0 // indirect
+	golang.org/x/time v0.3.0 // indirect
+	golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d // indirect
+	golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2 // indirect
+	google.golang.org/appengine v1.6.8 // indirect
+	google.golang.org/genproto v0.0.0-20231016165738-49dd2c1f3d0b // indirect
+	google.golang.org/genproto/googleapis/api v0.0.0-20231016165738-49dd2c1f3d0b // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20231030173426-d783a09b4405 // indirect
+	google.golang.org/grpc v1.59.0 // indirect
+	google.golang.org/protobuf v1.32.0 // indirect
+	gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc // indirect
+	gopkg.in/ini.v1 v1.67.0 // indirect
+	gopkg.in/natefinch/lumberjack.v2 v2.2.1 // indirect
+	gopkg.in/warnings.v0 v0.1.2 // indirect
+	gopkg.in/yaml.v2 v2.4.0 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+	lukechampine.com/uint128 v1.1.1 // indirect
+	maunium.net/go/maulogger/v2 v2.4.1 // indirect
+	modernc.org/cc/v3 v3.37.0 // indirect
+	modernc.org/ccgo/v3 v3.16.9 // indirect
+	modernc.org/libc v1.18.0 // indirect
+	modernc.org/mathutil v1.5.0 // indirect
+	modernc.org/memory v1.3.0 // indirect
+	modernc.org/opt v0.1.1 // indirect
+	modernc.org/strutil v1.1.3 // indirect
+	modernc.org/token v1.0.1 // indirect
+)

init_data.json.template

@@ -434,7 +434,7 @@
       "isTopGroup": true,
       "title": "",
       "key": "",
-      "children": "",
+      "children": [],
       "isEnabled": true
     }
   ],

ldap/util.go

@@ -185,12 +185,9 @@ func buildUserFilterCondition(filter interface{}) (builder.Cond, error) {
 		attr := string(f.AttributeDesc())
 
 		if attr == ldapMemberOfAttr {
-			groupId := string(f.AssertionValue())
-			users, err := object.GetGroupUsers(groupId)
-			if err != nil {
-				return nil, err
-			}
 			var names []string
+			groupId := string(f.AssertionValue())
+			users := object.GetGroupUsersWithoutError(groupId)
 			for _, user := range users {
 				names = append(names, user.Name)
 			}
@@ -249,7 +246,7 @@ func buildSafeCondition(filter interface{}) builder.Cond {
 	condition, err := buildUserFilterCondition(filter)
 	if err != nil {
 		log.Printf("err = %v", err.Error())
-		return nil
+		return builder.And(builder.Expr("1 != 1"))
 	}
 	return condition
 }

object/group.go

@@ -83,19 +83,23 @@ func GetPaginationGroups(owner string, offset, limit int, field, value, sortFiel
 func GetGroupsHaveChildrenMap(groups []*Group) (map[string]*Group, error) {
 	groupsHaveChildren := []*Group{}
 	resultMap := make(map[string]*Group)
+	groupMap := map[string]*Group{}
 
 	groupIds := []string{}
 	for _, group := range groups {
+		groupMap[group.Name] = group
 		groupIds = append(groupIds, group.Name)
-		groupIds = append(groupIds, group.ParentId)
+		if !group.IsTopGroup {
+			groupIds = append(groupIds, group.ParentId)
+		}
 	}
 
 	err := ormer.Engine.Cols("owner", "name", "parent_id", "display_name").Distinct("parent_id").In("parent_id", groupIds).Find(&groupsHaveChildren)
 	if err != nil {
 		return nil, err
 	}
-	for _, group := range groups {
+	for _, group := range groupsHaveChildren {
-		resultMap[group.Name] = group
+		resultMap[group.ParentId] = groupMap[group.ParentId]
 	}
 	return resultMap, nil
 }
@@ -302,7 +306,10 @@ func GetPaginationGroupUsers(groupId string, offset, limit int, field, value, so
 
 func GetGroupUsers(groupId string) ([]*User, error) {
 	users := []*User{}
-	owner, _ := util.GetOwnerAndNameFromId(groupId)
+	owner, _, err := util.GetOwnerAndNameFromIdWithError(groupId)
+	if err != nil {
+		return nil, err
+	}
 	names, err := userEnforcer.GetUserNamesByGroupName(groupId)
 	if err != nil {
 		return nil, err
@@ -314,6 +321,11 @@ func GetGroupUsers(groupId string) ([]*User, error) {
 	return users, nil
 }
 
+func GetGroupUsersWithoutError(groupId string) []*User {
+	users, _ := GetGroupUsers(groupId)
+	return users
+}
+
 func ExtendGroupWithUsers(group *Group) error {
 	if group == nil {
 		return nil

routers/theme_filter.go

@@ -106,11 +106,14 @@ func getOrganizationThemeCookieFromUrlPath(ctx *context.Context, urlPath string)
 	}
 
 	organizationThemeCookie := &OrganizationThemeCookie{
-		application.ThemeData,
+		ThemeData:  application.ThemeData,
-		application.Logo,
+		LogoUrl:    application.Logo,
-		application.FooterHtml,
+		FooterHtml: application.FooterHtml,
-		organization.Favicon,
+	}
-		organization.DisplayName,
+
+	if organization != nil {
+		organizationThemeCookie.Favicon = organization.Favicon
+		organizationThemeCookie.DisplayName = organization.DisplayName
 	}
 
 	return organizationThemeCookie, nil

web/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/cssinjs": "^1.10.1",
+    "@ant-design/cssinjs": "^1.23.0",
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^5.6.1",
     "@craco/craco": "^6.4.5",
     "@crowdin/cli": "^3.7.10",
     "@ctrl/tinycolor": "^3.5.0",
@@ -23,8 +23,8 @@
     "@web3-onboard/sequence": "^2.0.8",
     "@web3-onboard/taho": "^2.0.5",
     "@web3-onboard/trust": "^2.0.4",
-    "antd": "5.2.3",
+    "antd": "5.24.1",
-    "antd-token-previewer": "^1.1.0-22",
+    "antd-token-previewer": "^2.0.8",
     "buffer": "^6.0.3",
     "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.1",

web/src/App.js

@@ -327,7 +327,7 @@ class App extends Component {
             isAiAssistantOpen: false,
           });
         }}
-        visible={this.state.isAiAssistantOpen}
+        open={this.state.isAiAssistantOpen}
       >
         <iframe id="iframeHelper" title={"iframeHelper"} src={`${Conf.AiAssistantUrl}/?isRaw=1`} width="100%" height="100%" scrolling="no" frameBorder="no" />
       </Drawer>

web/src/App.less

@@ -58,6 +58,16 @@ img {
   }
 }
 
+.org-select {
+  display: flex;
+  position: relative;
+  transform: translateY(50%);
+  margin: 0 10px !important;
+  float: right;
+  min-width: 120px;
+  max-width: 180px;
+}
+
 .rightDropDown {
   display: flex;
   align-items: center;

web/src/BaseListPage.js

@@ -73,7 +73,7 @@ class BaseListPage extends React.Component {
     this.fetch({pagination});
   }
 
-  getColumnSearchProps = dataIndex => ({
+  getColumnSearchProps = (dataIndex, customRender = null) => ({
     filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
       <div style={{padding: 8}}>
         <Input
@@ -121,13 +121,15 @@ class BaseListPage extends React.Component {
       record[dataIndex]
         ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
         : "",
-    onFilterDropdownOpenChange: visible => {
+    filterDropdownProps: {
-      if (visible) {
+      onOpenChange: visible => {
-        setTimeout(() => this.searchInput.select(), 100);
+        if (visible) {
-      }
+          setTimeout(() => this.searchInput.select(), 100);
+        }
+      },
     },
-    render: text =>
+    render: (text, record, index) => {
-      this.state.searchedColumn === dataIndex ? (
+      const highlightContent = this.state.searchedColumn === dataIndex ? (
         <Highlighter
           highlightStyle={{backgroundColor: "#ffc069", padding: 0}}
           searchWords={[this.state.searchText]}
@@ -136,7 +138,10 @@ class BaseListPage extends React.Component {
         />
       ) : (
         text
-      ),
+      );
+
+      return customRender ? customRender({text, record, index}, highlightContent) : highlightContent;
+    },
   });
 
   handleSearch = (selectedKeys, confirm, dataIndex) => {
@@ -170,7 +175,7 @@ class BaseListPage extends React.Component {
     const steps = TourConfig.getSteps();
     steps.map((item, index) => {
       if (!index) {
-        item.target = () => document.querySelector("table");
+        item.target = () => document.querySelector(".ant-table");
       } else {
         item.target = () => document.getElementById(item.id) || null;
       }

web/src/CasbinEditor.js

@@ -19,8 +19,6 @@ import {Tabs} from "antd";
 import i18next from "i18next";
 import Editor from "./common/Editor";
 
-const {TabPane} = Tabs;
-
 const CasbinEditor = ({model, onModelTextChange}) => {
   const [activeKey, setActiveKey] = useState("advanced");
   const iframeRef = useRef(null);
@@ -66,10 +64,15 @@ const CasbinEditor = ({model, onModelTextChange}) => {
 
   return (
     <div style={{height: "100%", width: "100%", display: "flex", flexDirection: "column"}}>
-      <Tabs activeKey={activeKey} onChange={handleTabChange} style={{flex: "0 0 auto", marginTop: "-10px"}}>
+      <Tabs
-        <TabPane tab={i18next.t("model:Basic Editor")} key="basic" />
+        activeKey={activeKey}
-        <TabPane tab={i18next.t("model:Advanced Editor")} key="advanced" />
+        onChange={handleTabChange}
-      </Tabs>
+        style={{flex: "0 0 auto", marginTop: "-10px"}}
+        items={[
+          {key: "basic", label: i18next.t("model:Basic Editor")},
+          {key: "advanced", label: i18next.t("model:Advanced Editor")},
+        ]}
+      />
       <div style={{flex: "1 1 auto", overflow: "hidden"}}>
         {activeKey === "advanced" ? (
           <IframeEditor

web/src/GroupListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Table} from "antd";
+import {Button, Table, Tooltip} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as GroupBackend from "./backend/GroupBackend";
@@ -202,12 +202,16 @@ class GroupListPage extends BaseListPage {
           return (
             <div>
               <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/groups/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
-              <PopconfirmModal
+              {
-                disabled={record.haveChildren}
+                record.haveChildren ? <Tooltip placement="topLeft" title={i18next.t("group:You need to delete all subgroups first. You can view the subgroups in the left group tree of the [Organizations] -> [Groups] page")}>
-                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                  <Button disabled type="primary" danger>{i18next.t("general:Delete")}</Button>
-                onConfirm={() => this.deleteGroup(index)}
+                </Tooltip> :
-              >
+                  <PopconfirmModal
-              </PopconfirmModal>
+                    title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                    onConfirm={() => this.deleteGroup(index)}
+                  >
+                  </PopconfirmModal>
+              }
             </div>
           );
         },

web/src/ManagementPage.js

@@ -206,11 +206,11 @@ function ManagementPage(props) {
                         <OrganizationSelect
                           initValue={Setting.getOrganization()}
                           withAll={true}
-                          style={{marginRight: "20px", width: "180px", display: !Setting.isMobile() ? "flex" : "none"}}
+                          className="org-select"
+                          style={{display: Setting.isMobile() ? "none" : "flex"}}
                           onChange={(value) => {
                             Setting.setOrganization(value);
                           }}
-                          className="select-box"
                         />
           }
         </React.Fragment>
@@ -459,7 +459,7 @@ function ManagementPage(props) {
       <Header style={{padding: "0", marginBottom: "3px", backgroundColor: props.themeAlgorithm.includes("dark") ? "black" : "white"}} >
         {props.requiredEnableMfa || (Setting.isMobile() ?
           <React.Fragment>
-            <Drawer title={i18next.t("general:Close")} placement="left" visible={menuVisible} onClose={onClose}>
+            <Drawer title={i18next.t("general:Close")} placement="left" open={menuVisible} onClose={onClose}>
               <Menu
                 items={getMenuItems()}
                 mode={"inline"}

web/src/PermissionListPage.js

@@ -113,8 +113,8 @@ class PermissionListPage extends BaseListPage {
 
     return (
       <Upload {...props}>
-        <Button id="upload-button" type="primary" size="small">
+        <Button icon={<UploadOutlined />} id="upload-button" type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+          {i18next.t("user:Upload (.xlsx)")}
         </Button></Upload>
     );
   }

web/src/RecordListPage.js

@@ -14,12 +14,12 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Switch, Table} from "antd";
+import {Button, Descriptions, Drawer, Switch, Table, Tooltip} from "antd";
 import * as Setting from "./Setting";
 import * as RecordBackend from "./backend/RecordBackend";
 import i18next from "i18next";
-import moment from "moment";
 import BaseListPage from "./BaseListPage";
+import Editor from "./common/Editor";
 
 class RecordListPage extends BaseListPage {
   UNSAFE_componentWillMount() {
@@ -28,21 +28,6 @@ class RecordListPage extends BaseListPage {
     this.fetch({pagination});
   }
 
-  newRecord() {
-    return {
-      owner: "built-in",
-      name: "1234",
-      id: "1234",
-      clientIp: "::1",
-      timestamp: moment().format(),
-      organization: "built-in",
-      username: "admin",
-      requestUri: "/api/get-account",
-      action: "login",
-      isTriggered: false,
-    };
-  }
-
   renderTable(records) {
     let columns = [
       {
@@ -65,16 +50,13 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("general:Client IP"),
         dataIndex: "clientIp",
         key: "clientIp",
-        width: "100px",
+        width: "120px",
         sorter: true,
-        ...this.getColumnSearchProps("clientIp"),
+        ...this.getColumnSearchProps("clientIp", (row, highlightContent) => (
-        render: (text, record, index) => {
+          <a target="_blank" rel="noreferrer" href={`https://db-ip.com/${row.text}`}>
-          return (
+            {highlightContent}
-            <a target="_blank" rel="noreferrer" href={`https://db-ip.com/${text}`}>
+          </a>
-              {text}
+        )),
-            </a>
-          );
-        },
       },
       {
         title: i18next.t("general:Timestamp"),
@@ -120,28 +102,28 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("general:Method"),
         dataIndex: "method",
         key: "method",
-        width: "110px",
+        width: "100px",
         sorter: true,
         filterMultiple: false,
         filters: [
-          {text: "GET", value: "GET"},
+          "GET", "HEAD", "POST", "PUT", "DELETE",
-          {text: "HEAD", value: "HEAD"},
+          "CONNECT", "OPTIONS", "TRACE", "PATCH",
-          {text: "POST", value: "POST"},
+        ].map(el => ({text: el, value: el})),
-          {text: "PUT", value: "PUT"},
-          {text: "DELETE", value: "DELETE"},
-          {text: "CONNECT", value: "CONNECT"},
-          {text: "OPTIONS", value: "OPTIONS"},
-          {text: "TRACE", value: "TRACE"},
-          {text: "PATCH", value: "PATCH"},
-        ],
       },
       {
         title: i18next.t("general:Request URI"),
         dataIndex: "requestUri",
         key: "requestUri",
-        // width: "300px",
+        width: "200px",
         sorter: true,
-        ...this.getColumnSearchProps("requestUri"),
+        ellipsis: {
+          showTitle: false,
+        },
+        ...this.getColumnSearchProps("requestUri", (row, highlightContent) => (
+          <Tooltip placement="topLeft" title={row.text}>
+            {highlightContent}
+          </Tooltip>
+        )),
       },
       {
         title: i18next.t("user:Language"),
@@ -155,7 +137,7 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("record:Status code"),
         dataIndex: "statusCode",
         key: "statusCode",
-        width: "90px",
+        width: "120px",
         sorter: true,
         ...this.getColumnSearchProps("statusCode"),
       },
@@ -163,16 +145,26 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("record:Response"),
         dataIndex: "response",
         key: "response",
-        width: "90px",
+        width: "220px",
         sorter: true,
-        ...this.getColumnSearchProps("response"),
+        ellipsis: {
+          showTitle: false,
+        },
+        ...this.getColumnSearchProps("response", (row, highlightContent) => (
+          <Tooltip placement="topLeft" title={row.text}>
+            {highlightContent}
+          </Tooltip>
+        )),
       },
       {
         title: i18next.t("record:Object"),
         dataIndex: "object",
         key: "object",
-        width: "90px",
+        width: "200px",
         sorter: true,
+        ellipsis: {
+          showTitle: false,
+        },
         ...this.getColumnSearchProps("object"),
       },
       {
@@ -191,7 +183,7 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("record:Is triggered"),
         dataIndex: "isTriggered",
         key: "isTriggered",
-        width: "140px",
+        width: "120px",
         sorter: true,
         fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
@@ -204,6 +196,24 @@ class RecordListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "action",
+        key: "action",
+        width: "80px",
+        sorter: true,
+        fixed: "right",
+        render: (text, record, index) => (
+          <Button type="link" onClick={() => {
+            this.setState({
+              detailRecord: record,
+              detailShow: true,
+            });
+          }}>
+            {i18next.t("general:Detail")}
+          </Button>
+        ),
+      },
     ];
 
     if (Setting.isLocalAdminUser(this.props.account)) {
@@ -220,7 +230,7 @@ class RecordListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "100%"}} columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Records")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -229,10 +239,79 @@ class RecordListPage extends BaseListPage {
           loading={this.state.loading}
           onChange={this.handleTableChange}
         />
+        {/* TODO: Should be packaged as a component after confirm it run correctly.*/}
+        <Drawer
+          title={i18next.t("general:Detail")}
+          width={Setting.isMobile() ? "100%" : 640}
+          placement="right"
+          destroyOnClose
+          onClose={() => this.setState({detailShow: false})}
+          open={this.state.detailShow}
+        >
+          <Descriptions bordered size="small" column={1} layout={Setting.isMobile() ? "vertical" : "horizontal"} style={{padding: "12px", height: "100%", overflowY: "auto"}}>
+            <Descriptions.Item label={i18next.t("general:ID")}>{this.getDetailField("id")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Client IP")}>{this.getDetailField("clientIp")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Timestamp")}>{this.getDetailField("createdTime")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Organization")}>
+              <Link to={`/organizations/${this.getDetailField("organization")}`}>
+                {this.getDetailField("organization")}
+              </Link>
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:User")}>
+              <Link to={`/users/${this.getDetailField("organization")}/${this.getDetailField("user")}`}>
+                {this.getDetailField("user")}
+              </Link>
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Method")}>{this.getDetailField("method")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Request URI")}>{this.getDetailField("requestUri")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("user:Language")}>{this.getDetailField("language")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("record:Status code")}>{this.getDetailField("statusCode")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Action")}>{this.getDetailField("action")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("record:Response")}>
+              <Editor
+                value={this.getDetailField("response")}
+                fillHeight
+                fillWidth
+                maxWidth={this.getEditorMaxWidth()}
+                dark
+                readOnly
+              />
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("record:Object")}>
+              <Editor
+                value={this.jsonStrFormatter(this.getDetailField("object"))}
+                lang="json"
+                fillHeight
+                fillWidth
+                maxWidth={this.getEditorMaxWidth()}
+                dark
+                readOnly
+              />
+            </Descriptions.Item>
+          </Descriptions>
+        </Drawer>
       </div>
     );
   }
 
+  getEditorMaxWidth = () => {
+    return Setting.isMobile() ? window.innerWidth - 60 : 475;
+  };
+
+  jsonStrFormatter = str => {
+    try {
+      return JSON.stringify(JSON.parse(str), null, 2);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      return str;
+    }
+  };
+
+  getDetailField = dataIndex => {
+    return this.state.detailRecord ? this.state.detailRecord?.[dataIndex] ?? "" : "";
+  };
+
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
     const sortField = params.sortField, sortOrder = params.sortOrder;
@@ -255,6 +334,8 @@ class RecordListPage extends BaseListPage {
             },
             searchText: params.searchText,
             searchedColumn: params.searchedColumn,
+            detailShow: false,
+            detailRecord: null,
           });
         } else {
           if (res.data.includes("Please login first")) {

web/src/RoleListPage.js

@@ -106,8 +106,8 @@ class RoleListPage extends BaseListPage {
 
     return (
       <Upload {...props}>
-        <Button type="primary" size="small">
+        <Button icon={<UploadOutlined />} type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+          {i18next.t("user:Upload (.xlsx)")}
         </Button>
       </Upload>
     );

web/src/TokenListPage.js

@@ -153,7 +153,7 @@ class TokenListPage extends BaseListPage {
         title: i18next.t("token:Authorization code"),
         dataIndex: "code",
         key: "code",
-        // width: '150px',
+        width: "180px",
         sorter: true,
         ...this.getColumnSearchProps("code"),
         render: (text, record, index) => {
@@ -164,7 +164,7 @@ class TokenListPage extends BaseListPage {
         title: i18next.t("token:Access token"),
         dataIndex: "accessToken",
         key: "accessToken",
-        // width: '150px',
+        width: "220px",
         sorter: true,
         ellipsis: true,
         ...this.getColumnSearchProps("accessToken"),
@@ -225,7 +225,7 @@ class TokenListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={tokens} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "100%"}} columns={columns} dataSource={tokens} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Tokens")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/UserListPage.js

@@ -188,8 +188,8 @@ class UserListPage extends BaseListPage {
 
     return (
       <Upload {...props}>
-        <Button id="upload-button" type="primary" size="small">
+        <Button icon={<UploadOutlined />} id="upload-button" type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+          {i18next.t("user:Upload (.xlsx)")}
         </Button>
       </Upload>
     );

web/src/auth/ForgetPage.js

@@ -471,9 +471,12 @@ class ForgetPage extends React.Component {
       <React.Fragment>
         <CustomGithubCorner />
         <div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
-          <Button type="text" style={{position: "relative", left: Setting.isMobile() ? "10px" : "-90px", top: 0}} size={"large"} onClick={() => {this.stepBack();}}>
+          <Button type="text"
-            <ArrowLeftOutlined style={{fontSize: "24px"}} />
+            style={{position: "relative", left: Setting.isMobile() ? "10px" : "-90px", top: 0}}
-          </Button>
+            icon={<ArrowLeftOutlined style={{fontSize: "24px"}} />}
+            size={"large"}
+            onClick={() => {this.stepBack();}}
+          />
           <Row>
             <Col span={24} style={{justifyContent: "center"}}>
               <Row>

web/src/auth/LoginPage.js

@@ -68,7 +68,7 @@ class LoginPage extends React.Component {
       this.state.applicationName = props.match?.params?.casApplicationName;
     }
 
-    localStorage.setItem("signinUrl", window.location.href);
+    localStorage.setItem("signinUrl", window.location.pathname + window.location.search);
 
     this.form = React.createRef();
   }
@@ -314,7 +314,7 @@ class LoginPage extends React.Component {
     }
 
     if (resp.data2) {
-      sessionStorage.setItem("signinUrl", window.location.href);
+      sessionStorage.setItem("signinUrl", window.location.pathname + window.location.search);
       Setting.goToLinkSoft(ths, `/forget/${application.name}`);
       return;
     }
@@ -454,7 +454,7 @@ class LoginPage extends React.Component {
 
             if (responseType === "login") {
               if (res.data2) {
-                sessionStorage.setItem("signinUrl", window.location.href);
+                sessionStorage.setItem("signinUrl", window.location.pathname + window.location.search);
                 Setting.goToLink(this, `/forget/${this.state.applicationName}`);
               }
               Setting.showMessage("success", i18next.t("application:Logged in successfully"));
@@ -463,7 +463,7 @@ class LoginPage extends React.Component {
               this.postCodeLoginAction(res);
             } else if (responseType === "token" || responseType === "id_token") {
               if (res.data2) {
-                sessionStorage.setItem("signinUrl", window.location.href);
+                sessionStorage.setItem("signinUrl", window.location.pathname + window.location.search);
                 Setting.goToLink(this, `/forget/${this.state.applicationName}`);
               }
               const amendatoryResponseType = responseType === "token" ? "access_token" : responseType;
@@ -530,9 +530,11 @@ class LoginPage extends React.Component {
       return null;
     }
 
+    const resultItemKey = `${application.organization}_${application.name}_${signinItem.name}`;
+
     if (signinItem.name === "Logo") {
       return (
-        <div className="login-logo-box">
+        <div key={resultItemKey} className="login-logo-box">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {
             Setting.renderHelmet(application)
@@ -544,7 +546,7 @@ class LoginPage extends React.Component {
       );
     } else if (signinItem.name === "Back button") {
       return (
-        <div className="back-button">
+        <div key={resultItemKey} className="back-button">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {
             this.renderBackButton()
@@ -562,14 +564,14 @@ class LoginPage extends React.Component {
       }
 
       return (
-        <div className="login-languages">
+        <div key={resultItemKey} className="login-languages">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <LanguageSelect languages={application.organizationObj.languages} />
         </div>
       );
     } else if (signinItem.name === "Signin methods") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {this.renderMethodChoiceBox()}
         </div>
@@ -577,7 +579,7 @@ class LoginPage extends React.Component {
       ;
     } else if (signinItem.name === "Username") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <Form.Item
             name="username"
@@ -654,14 +656,14 @@ class LoginPage extends React.Component {
       );
     } else if (signinItem.name === "Password") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {this.renderPasswordOrCodeInput(signinItem)}
         </div>
       );
     } else if (signinItem.name === "Forgot password?") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <div className="login-forget-password">
             <Form.Item name="autoSignin" valuePropName="checked" noStyle>
@@ -679,7 +681,7 @@ class LoginPage extends React.Component {
       return AgreementModal.isAgreementRequired(application) ? AgreementModal.renderAgreementFormItem(application, true, {}, this) : null;
     } else if (signinItem.name === "Login button") {
       return (
-        <Form.Item className="login-button-box">
+        <Form.Item key={resultItemKey} className="login-button-box">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <Button
             type="primary"
@@ -723,13 +725,13 @@ class LoginPage extends React.Component {
       }
 
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <Form.Item>
             {
               application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map((providerItem, id) => {
                 return (
-                  <span key ={id} onClick={(e) => {
+                  <span key={id} onClick={(e) => {
                     const agreementChecked = this.form.current.getFieldValue("agreement");
 
                     if (agreementChecked !== undefined && typeof agreementChecked === "boolean" && !agreementChecked) {
@@ -752,11 +754,11 @@ class LoginPage extends React.Component {
       );
     } else if (signinItem.name.startsWith("Text ") || signinItem?.isCustom) {
       return (
-        <div dangerouslySetInnerHTML={{__html: signinItem.customCss}} />
+        <div key={resultItemKey} dangerouslySetInnerHTML={{__html: signinItem.customCss}} />
       );
     } else if (signinItem.name === "Signup link") {
       return (
-        <div style={{width: "100%"}} className="login-signup-link">
+        <div key={resultItemKey} style={{width: "100%"}} className="login-signup-link">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {this.renderFooter(application, signinItem)}
         </div>

web/src/basic/Dashboard.js

@@ -167,25 +167,35 @@ const Dashboard = (props) => {
     };
     myChart.setOption(option);
 
+    const cardStyles = {
+      body: {
+        width: Setting.isMobile() ? "340px" : "100%",
+        height: Setting.isMobile() ? "100px" : "150px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+    };
+
     return (
       <Row id="statistic" gutter={80} justify={"center"}>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:Total users")} fontSize="100px" value={dashboardData.userCounts[30]} valueStyle={{fontSize: "30px"}} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:New users today")} fontSize="100px" value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 1]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:New users past 7 days")} value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 7]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:New users past 30 days")} value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 30]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>

web/src/basic/GridCards.js

@@ -31,7 +31,7 @@ const GridCards = (props) => {
 
   return (
     Setting.isMobile() ? (
-      <Card bodyStyle={{padding: 0}}>
+      <Card styles={{body: {padding: 0}}}>
         {items.map(item => <SingleCard key={item.link} logo={item.logo} link={item.link} title={item.name} desc={item.description} isSingle={items.length === 1} />)}
       </Card>
     ) : (

web/src/common/Editor.js

@@ -18,10 +18,33 @@ import {materialDark} from "@uiw/codemirror-theme-material";
 import {langs} from "@uiw/codemirror-extensions-langs";
 
 export const Editor = (props) => {
-  const fillHeight = props.fillHeight ? {
+  let style = {};
-    height: "100%",
+  let height = props.height;
-    style: {height: "100%"},
+  let width = props.width;
-  } : {};
+  const copy2StyleProps = [
+    "width", "maxWidth", "minWidth",
+    "height", "maxHeight", "minHeight",
+  ];
+  if (props.fillHeight) {
+    height = "100%";
+    style = {...style, height: "100%"};
+  }
+  if (props.fillWidth) {
+    width = "100%";
+    style = {...style, width: "100%"};
+  }
+  /**
+   * @uiw/react-codemirror style props sucha as "height" "width"
+   * may need to be configured with "style" in some scenarios to take effect
+   */
+  copy2StyleProps.forEach(el => {
+    if (["number", "string"].includes(typeof props[el])) {
+      style = {...style, [el]: props[el]};
+    }
+  });
+  if (props.style) {
+    style = {...style, ...props.style};
+  }
   let extensions = [];
   switch (props.lang) {
   case "javascript":
@@ -37,13 +60,18 @@ export const Editor = (props) => {
   case "xml":
     extensions = [langs.xml()];
     break;
+  case "json":
+    extensions = [langs.json()];
+    break;
   }
 
   return (
     <CodeMirror
       value={props.value}
-      height={props.height}
+      {...props}
-      {...fillHeight}
+      width={width}
+      height={height}
+      style={style}
       readOnly={props.readOnly}
       theme={props.dark ? materialDark : "light"}
       extensions={extensions}

web/src/common/select/OrganizationSelect.js

@@ -70,6 +70,7 @@ function OrganizationSelect(props) {
     <Select
       options={getOrganizationItems()}
       virtual={false}
+      popupMatchSelectWidth={false}
       placeholder={i18next.t("login:Please select an organization")}
       value={value}
       onChange={handleOnChange}

web/src/locales/en/data.json

@@ -241,6 +241,7 @@
     "Delete": "Delete",
     "Description": "Description",
     "Description - Tooltip": "Detailed description information for reference, Casdoor itself will not use it",
+    "Detail": "Detail",
     "Disable": "Disable",
     "Display name": "Display name",
     "Display name - Tooltip": "A user-friendly, easily readable name displayed publicly in the UI",

web/src/locales/zh/data.json

@@ -241,6 +241,7 @@
     "Delete": "删除",
     "Description": "描述信息",
     "Description - Tooltip": "供人参考的详细描述信息，Casdoor平台本身不会使用",
+    "Detail": "详情",
     "Disable": "关闭",
     "Display name": "显示名称",
     "Display name - Tooltip": "在界面里公开显示的、易读的名称",

web/src/pricing/PricingPage.js

@@ -147,7 +147,7 @@ class PricingPage extends React.Component {
 
     if (Setting.isMobile()) {
       return (
-        <Card style={{border: "none"}} bodyStyle={{padding: 0}}>
+        <Card style={{border: "none"}} styles={{body: {padding: 0}}}>
           {
             this.state.plans.map(item => {
               return item.period === this.state.selectedPeriod ? (