Feature/project release management

locales/en.json

@@ -641,6 +641,7 @@
     "ok": "ok",
     "on": "on",
     "one key all read": "one key all read",
+    "one click to clear": "one click to clear",
     "open": "open",
     "operate": "operate",
     "operated successfully": "operated successfully",
@@ -779,6 +780,7 @@
     "required": "required",
     "requirement": "requirement",
     "requirement & task": "requirement & task",
+    "return to previous page": "return to previous page",
     "reset": "reset",
     "reset Password": "reset Password",
     "reset account password": "reset account password",
@@ -825,7 +827,7 @@
     "select template": "select template",
     "select the existing": "select the existing",
     "selected template": "selected template",
-    "selected {xx}": "selected {xx}",
+    "selected {name}": "selected {name}",
     "separated by comma, start with letters and can contain": "multiple use, separate, start with a letter and can contain: numbers / _ - . $ # @ *, * only available in last",
     "service": "service",
     "service name": "Service Name",

locales/zh.json

@@ -641,6 +641,7 @@
     "ok": "确定",
     "on": "开",
     "one key all read": "一键已读",
+    "one click to clear": "一键清空",
     "open": "开启",
     "operate": "操作",
     "operated successfully": "操作成功",
@@ -779,6 +780,7 @@
     "required": "必需",
     "requirement": "需求",
     "requirement & task": "需求与任务",
+    "return to previous page": "返回上一页面",
     "reset": "重置",
     "reset Password": "重置密码",
     "reset account password": "重置账户密码",
@@ -825,7 +827,7 @@
     "select template": "选择模板",
     "select the existing": "选择已有",
     "selected template": "已选模板",
-    "selected {xx}": "已选择 {xx}",
+    "selected {name}": "已选择 {name}",
     "separated by comma, start with letters and can contain": "多个用,分隔，字母开头，可包含:数字 _ - . / $ # @ *， *只能放在末尾",
     "service": "服务",
     "service name": "服务名称",

shell/app/common/__tests__/components/list-select/list-select.test.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { ListSelect } from 'common';
+import { mount } from 'enzyme';
+
+const list = [{ id: '1-1', title: 'test1-1', pid: '1' }];
+const menus = [{ id: '1', title: 'test1' }];
+const value = [{ id: '1-1', title: 'test1-1', pid: '1' }];
+const renderSelectedItem = (item: { id: string; title: string; pid: string }) => (
+  <div className="render-selected-item">{item.title}</div>
+);
+const renderItem = (item: { id: string; title: string; pid: string }) => (
+  <div className="render-item">{item.title}</div>
+);
+
+describe('list-select', () => {
+  it('empty render should be ok', () => {
+    const wrapper = mount(
+      <ListSelect
+        label="test"
+        list={list}
+        menus={menus}
+        rowKey="id"
+        parentKey="pid"
+        menuRowKey="id"
+        renderSelectedItem={renderSelectedItem}
+        renderItem={renderItem}
+      />,
+    );
+    const listDom = wrapper.find('.render-item');
+    expect(listDom).toHaveHTML('test1-1');
+  });
+
+  it('render should be ok', () => {
+    const wrapper = mount(
+      <ListSelect
+        value={value}
+        label="test"
+        list={list}
+        menus={menus}
+        rowKey="id"
+        parentKey="pid"
+        menuRowKey="id"
+        renderSelectedItem={renderSelectedItem}
+        renderItem={renderItem}
+      />,
+    );
+    const listDom = wrapper.find('.render-selected-item');
+    expect(listDom).toHaveHTML('test1-1');
+  });
+});

shell/app/common/components/configurable-filter/index.scss

@@ -361,10 +361,5 @@
       /* Mozilla Firefox 19+ */
       color: rgba($white, 0.3);
     }
-
-    &:-ms-input-placeholder {
-      /* Internet Explorer 10+ */
-      color: rgba($white, 0.3);
-    }
   }
 }

shell/app/common/components/configurable-filter/index.tsx

@@ -30,6 +30,7 @@ export interface IProps {
   value?: Obj;
   onConfigChange?: (config: ConfigData) => void;
   processField?: (field: Field) => IFormItem;
+  hideSave?: boolean;
 }
 
 interface Field {
@@ -116,6 +117,7 @@ const ConfigurableFilter = ({
   onDeleteFilter,
   onSaveFilter,
   processField,
+  hideSave,
 }: IProps) => {
   const [form] = Form.useForm();
   const [visible, setVisible] = React.useState(false);
@@ -185,15 +187,17 @@ const ConfigurableFilter = ({
   const content = (
     <div className="erda-configurable-filter-content">
       <div className="erda-configurable-filter-header flex justify-start">
-        <ConfigSelector
-          list={configList}
-          value={currentConfig}
-          isNew={isNew}
-          defaultValue={defaultConfig}
-          onChange={onConfigChange}
-          onDeleteFilter={onDeleteFilter}
-          onSaveFilter={saveFilter}
-        />
+        {!hideSave ? (
+          <ConfigSelector
+            list={configList}
+            value={currentConfig}
+            isNew={isNew}
+            defaultValue={defaultConfig}
+            onChange={onConfigChange}
+            onDeleteFilter={onDeleteFilter}
+            onSaveFilter={saveFilter}
+          />
+        ) : null}
 
         <div className="flex-1 flex justify-end">
           <ErdaIcon
@@ -207,7 +211,7 @@ const ConfigurableFilter = ({
         </div>
       </div>
 
-      <div className="erda-configurable-filter-body mt-3">
+      <div className={`erda-configurable-filter-body ${!hideSave ? 'mt-3' : ''}`}>
         <Form form={form} layout="vertical" onValuesChange={onValuesChange}>
           <Row>
             {fieldsList?.map((item, index: number) => {

shell/app/common/components/list-select/index.scss

@@ -0,0 +1,164 @@
+.erda-list-select {
+  &-btn {
+    background-color: rgba($color-purple-deep, 0.1);
+    color: $color-purple-deep;
+    transition: all 0.5s;
+
+    &.ant-dropdown-open {
+      background-color: $color-purple-deep;
+      color: $white;
+    }
+  }
+
+  .result-list {
+    background-color: rgba($color-default, 0.01);
+    color: $color-default;
+
+    .desc {
+      color: rgba($color-default, 0.6);
+    }
+
+    .erda-list-select-selected-item-delete {
+      color: $color-default-4;
+      visibility: hidden;
+    }
+
+    .erda-list-select-selected-item:hover {
+      .text-hover {
+        color: $color-purple-deep !important;
+      }
+
+      .erda-list-select-selected-item-delete {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+.erda-list-select-overlay {
+  width: 1120px;
+  height: 400px;
+  background-color: $color-default;
+
+  .selected-num {
+    padding: 1px 6px;
+    background-color: rgba($white, 0.08);
+    color: $color-white-8;
+  }
+
+  .erda-list-select-selected-list {
+    height: calc(100% - 100px);
+    color: rgba($white, 9);
+
+    .desc {
+      color: $color-white-6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      background-color: $color-default;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: $color-white-1;
+    }
+  }
+
+  .erda-list-select-selected-item-delete {
+    visibility: hidden;
+  }
+
+  .erda-list-select-selected-item:hover {
+    .text-hover {
+      color: $color-purple-deep !important;
+    }
+
+    .erda-list-select-selected-item-delete {
+      visibility: visible;
+    }
+  }
+
+  .erda-list-select-right-content {
+    height: calc(100% - 66px);
+  }
+
+  .erda-list-select-menus {
+    width: 160px;
+    overflow-y: auto;
+    flex-shrink: 0;
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      background-color: $color-default;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: $color-white-1;
+    }
+
+    .erda-list-select-menu-item {
+      padding: 5px 8px;
+      color: rgba($white, 0.9);
+      border-radius: 2px;
+      cursor: pointer;
+    }
+
+    .active {
+      background-color: $color-purple-deep !important;
+    }
+  }
+
+  .erda-list-select-list {
+    height: calc(100% - 40px);
+
+    & > div {
+      &::-webkit-scrollbar {
+        width: 10px;
+        background-color: $color-default;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background-color: $color-white-1;
+      }
+    }
+  }
+
+  .erda-pagination {
+    color: $color-white-6;
+
+    .bg-hover:hover {
+      color: $white;
+    }
+  }
+
+  .ant-btn {
+    background-color: $color-white-2;
+    border: none;
+    color: $white;
+
+    &.ant-btn-primary {
+      background-color: $color-purple-deep;
+      border-color: $color-purple-deep;
+    }
+  }
+
+  .ant-input-prefix {
+    color: $color-white-3;
+  }
+
+  input {
+    background-color: transparent;
+    color: $color-white-6;
+
+    &::-webkit-input-placeholder {
+      /* WebKit browsers */
+      color: $color-white-3;
+    }
+
+    &::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      color: $color-white-3;
+    }
+  }
+}