From 6e47d143df59d16cdade38ef59930e4a595628b4 Mon Sep 17 00:00:00 2001
From: lepdou <ledouzhang@tencent.com>
Date: Thu, 20 Jan 2022 22:36:24 +0800
Subject: [PATCH 1/3] optimize create namespace page

---
 CHANGES.md                                    |  1 +
 .../src/main/resources/static/namespace.html  | 89 ++++++++++---------
 .../scripts/controller/NamespaceController.js |  4 +-
 3 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index d77090ad800..15d17e92982 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -35,6 +35,7 @@ Apollo 2.0.0
 * [The release history of namespaces that are not properties will also show comments and release times](https://github.com/apolloconfig/apollo/pull/4198)
 * [Add unit tests for Utils](https://github.com/apolloconfig/apollo/pull/4193)
 * [Change Copy Right year to 2022](https://github.com/apolloconfig/apollo/pull/4202)
+* [Optimize create namespace page](https://github.com/apolloconfig/apollo/pull/4213)
 * [Allow disable apollo client cache](https://github.com/apolloconfig/apollo/pull/4199)
 * [Make password check not hardcoded](https://github.com/apolloconfig/apollo/pull/4207)
 
diff --git a/apollo-portal/src/main/resources/static/namespace.html b/apollo-portal/src/main/resources/static/namespace.html
index cebefc5b126..3cd4913567c 100644
--- a/apollo-portal/src/main/resources/static/namespace.html
+++ b/apollo-portal/src/main/resources/static/namespace.html
@@ -75,26 +75,47 @@
                                 <li>{{'Namespace.CreatePrivate.Tips4' | translate }}</li>
                             </ul>
                         </div>
-                        <div class="row text-right" style="padding-right: 20px;">
-                            <div class="btn-group btn-group-sm" role="group" aria-label="...">
-                                <button type="button" class="btn btn-default" ng-class="{active:type=='link'}"
-                                    ng-click="switchType('link')">{{'Namespace.AssociationPublicNamespace' | translate }}
-                                </button>
-                                <button type="button" class="btn btn-default" ng-class="{active:type=='create'}"
-                                    ng-click="switchType('create')">{{'Namespace.CreateNamespace' | translate }}
-                                </button>
-                            </div>
-                        </div>
-
 
                         <form class="form-horizontal" name="namespaceForm" valdr-type="AppNamespace"
                             style="margin-top: 30px;" ng-show="step == 1" ng-submit="createNamespace()">
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">
+                                </label>
+
+                                <div class="col-sm-5">
+                                    <div class="btn-group btn-group-sm" role="group" aria-label="...">
+                                        <button type="button" class="btn btn-default" ng-class="{active:type=='create'}"
+                                                ng-click="switchType('create')">{{'Namespace.CreateNamespace' | translate }}
+                                        </button>
+                                        <button type="button" class="btn btn-default" ng-class="{active:type=='link'}"
+                                                ng-click="switchType('link')">{{'Namespace.AssociationPublicNamespace' | translate }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
                             <div class="form-group">
                                 <label class="col-sm-3 control-label">{{'Common.AppId' | translate }}</label>
                                 <div class="col-sm-6" valdr-form-group>
                                     <label class="form-control-static" ng-bind="appId"></label>
                                 </div>
                             </div>
+                            <div class="form-group"
+                                 ng-show="type == 'create' && (pageSetting.canAppAdminCreatePrivateNamespace || hasRootPermission)">
+                                <label class="col-sm-3 control-label">
+                                    <apollorequiredfield></apollorequiredfield>
+                                    {{'Namespace.NamespaceType' | translate }}
+                                </label>
+                                <div class="col-sm-5" valdr-form-group>
+                                    <label class="radio-inline">
+                                        <input type="radio" name="namespaceType" value="false" ng-value="false"
+                                               ng-model="appNamespace.isPublic"> {{'Namespace.NamespaceType.Private' | translate }}
+                                    </label>
+                                    <label class="radio-inline">
+                                        <input type="radio" name="namespaceType" value="true" ng-value="true"
+                                               ng-model="appNamespace.isPublic"> {{'Namespace.NamespaceType.Public' | translate }}
+                                    </label>
+                                </div>
+                            </div>
                             <div class="form-horizontal" ng-show="type == 'link'">
                                 <div class="form-group">
                                     <label class="col-sm-3 control-label">
@@ -107,6 +128,20 @@
                                     </div>
                                 </div>
                             </div>
+                            <div class="form-group" ng-show="type == 'create' && appNamespace.isPublic">
+                                <label class="col-sm-3 control-label">
+                                    {{'Namespace.AutoAddDepartmentPrefix' | translate }}
+                                </label>
+                                <div class="col-sm-6" valdr-form-group>
+                                    <div>
+                                        <label class="checkbox-inline">
+                                            <input type="checkbox" ng-model="appendNamespacePrefix" />
+                                            {{appBaseInfo.namespacePrefix}}
+                                        </label>
+                                    </div>
+                                    <small>{{'Namespace.AutoAddDepartmentPrefixTips' | translate }}</small>
+                                </div>
+                            </div>
                             <div class="form-group" ng-show="type == 'create'">
                                 <label class="col-sm-3 control-label">
                                     <apollorequiredfield></apollorequiredfield>
@@ -138,38 +173,6 @@
                                     ng-bind="concatNamespace()" style="line-height: 34px;"></span>
                             </div>
 
-                            <div class="form-group" ng-show="type == 'create' && appNamespace.isPublic">
-                                <label class="col-sm-3 control-label">
-                                    {{'Namespace.AutoAddDepartmentPrefix' | translate }}
-                                </label>
-                                <div class="col-sm-6" valdr-form-group>
-                                    <div>
-                                        <label class="checkbox-inline">
-                                            <input type="checkbox" ng-model="appendNamespacePrefix" />
-                                            {{appBaseInfo.namespacePrefix}}
-                                        </label>
-                                    </div>
-                                    <small>{{'Namespace.AutoAddDepartmentPrefixTips' | translate }}</small>
-                                </div>
-                            </div>
-
-                            <div class="form-group"
-                                ng-show="type == 'create' && (pageSetting.canAppAdminCreatePrivateNamespace || hasRootPermission)">
-                                <label class="col-sm-3 control-label">
-                                    <apollorequiredfield></apollorequiredfield>
-                                    {{'Namespace.NamespaceType' | translate }}
-                                </label>
-                                <div class="col-sm-4" valdr-form-group>
-                                    <label class="radio-inline">
-                                        <input type="radio" name="namespaceType" value="true" ng-value="true"
-                                            ng-model="appNamespace.isPublic"> {{'Namespace.NamespaceType.Public' | translate }}
-                                    </label>
-                                    <label class="radio-inline">
-                                        <input type="radio" name="namespaceType" value="false" ng-value="false"
-                                            ng-model="appNamespace.isPublic"> {{'Namespace.NamespaceType.Private' | translate }}
-                                    </label>
-                                </div>
-                            </div>
                             <div class="form-group" ng-show="type == 'create'" valdr-form-group>
                                 <label class="col-sm-3 control-label">{{'Namespace.Remark' | translate }}</label>
                                 <div class="col-sm-7" valdr-form-group>
diff --git a/apollo-portal/src/main/resources/static/scripts/controller/NamespaceController.js b/apollo-portal/src/main/resources/static/scripts/controller/NamespaceController.js
index 5198bd5145e..d33ef21922c 100644
--- a/apollo-portal/src/main/resources/static/scripts/controller/NamespaceController.js
+++ b/apollo-portal/src/main/resources/static/scripts/controller/NamespaceController.js
@@ -22,7 +22,7 @@ namespace_module.controller("LinkNamespaceController",
 
             var params = AppUtil.parseParams($location.$$url);
             $scope.appId = params.appid;
-            $scope.type = 'link';
+            $scope.type = 'create';
 
             $scope.step = 1;
 
@@ -66,7 +66,7 @@ namespace_module.controller("LinkNamespaceController",
                 appId: $scope.appId,
                 name: '',
                 comment: '',
-                isPublic: true,
+                isPublic: false,
                 format: 'properties'
             };
 

From c1cdd1374fea01497d4d39e0aabff08a46a66ac1 Mon Sep 17 00:00:00 2001
From: lepdou <ledouzhang@tencent.com>
Date: Mon, 24 Jan 2022 21:41:59 +0800
Subject: [PATCH 2/3] align the create namespace button group with the appid

---
 apollo-portal/src/main/resources/static/namespace.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apollo-portal/src/main/resources/static/namespace.html b/apollo-portal/src/main/resources/static/namespace.html
index 3cd4913567c..e4c4551d6e2 100644
--- a/apollo-portal/src/main/resources/static/namespace.html
+++ b/apollo-portal/src/main/resources/static/namespace.html
@@ -83,7 +83,7 @@
                                 </label>
 
                                 <div class="col-sm-5">
-                                    <div class="btn-group btn-group-sm" role="group" aria-label="...">
+                                    <div class="btn-group btn-group-sm" role="group" style="margin-left: -15px">
                                         <button type="button" class="btn btn-default" ng-class="{active:type=='create'}"
                                                 ng-click="switchType('create')">{{'Namespace.CreateNamespace' | translate }}
                                         </button>

From c9797c678f6c6b57277e7ea72052b34f6bbef65f Mon Sep 17 00:00:00 2001
From: lepdou <ledouzhang@tencent.com>
Date: Mon, 24 Jan 2022 21:50:36 +0800
Subject: [PATCH 3/3] make the appid field vertical alignment

---
 apollo-portal/src/main/resources/static/namespace.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apollo-portal/src/main/resources/static/namespace.html b/apollo-portal/src/main/resources/static/namespace.html
index e4c4551d6e2..6d5688ece18 100644
--- a/apollo-portal/src/main/resources/static/namespace.html
+++ b/apollo-portal/src/main/resources/static/namespace.html
@@ -95,7 +95,7 @@
                             </div>
                             <div class="form-group">
                                 <label class="col-sm-3 control-label">{{'Common.AppId' | translate }}</label>
-                                <div class="col-sm-6" valdr-form-group>
+                                <div class="col-sm-6" valdr-form-group style="margin-bottom:-15px">
                                     <label class="form-control-static" ng-bind="appId"></label>
                                 </div>
                             </div>