Feature: Add toggle approval (#26)

* feat: approval

Author: frankzhaopeng

.github/workflows/codeql-analysis.yml

@@ -48,11 +48,11 @@ jobs:
         # If you wish to specify custom queries, you can do so here or in a config file.
         # By default, queries listed here will override any specified in a config file.
         # Prefix the list here with "+" to use these queries and those in the config file.
-        
+
         # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
         # queries: security-extended,security-and-quality
 
-        
+
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
@@ -61,7 +61,7 @@ jobs:
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
     #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
     # - run: |

.github/workflows/publish-docker-image.yml

@@ -7,7 +7,7 @@ on:
 
 permissions:
   contents: read
-  
+
 jobs:
   buildx:
     runs-on: ubuntu-latest

src/components/CopyToClipboard/index.module.scss

@@ -1,5 +1,5 @@
 .icon-success {
-  color: #34C38F;
+  color: #34c38f;
   font-size: 20px !important;
   margin-right: 4px;
   vertical-align: middle;

src/components/FormItem/index.module.scss

@@ -4,7 +4,7 @@
 }
 
 .label-required {
-  color: #FF5F57;
+  color: #ff5f57;
   font-size: 20px;
   vertical-align: middle;
   margin-right: 4px;
@@ -13,7 +13,7 @@
 }
 
 .error-text {
-  color: #F46A6A;
+  color: #f46a6a;
   margin-top: -15px;
   margin-bottom: 15px;
   font-size: 12px;
@@ -23,7 +23,7 @@
 
 
 .tip-text {
-  color: #74788D;
+  color: #74788d;
   margin-top: -15px;
   margin-bottom: 15px;
   font-size: 12px;
@@ -38,5 +38,5 @@
 .icon-question {
   vertical-align: middle;
   margin-left: 4px;
-  color: #74788D;
+  color: #74788d;
 }

src/components/MessageBox/index.module.scss

@@ -9,21 +9,21 @@
 }
 
 .icon-info-circle {
-  color: #0A70F5;
+  color: #0a70f5;
   vertical-align: middle;
 }
 
 .icon-success-circle {
-  color: #00B365;
+  color: #00b365;
   vertical-align: middle;
 }
 
 .icon-warning-circle {
-  color: #FFC300;
+  color: #ffc300;
   vertical-align: middle;
 }
 
 .icon-error-circle {
-  color:  #F5483B;
+  color:  #f5483b;
   vertical-align: middle;
 }

src/components/PopupConfirm/index.module.scss

@@ -8,11 +8,11 @@
   color: rgba(0,0,0,0.87);
   line-height: 24px;
   display: flex;
-  padding: 8px 10px 0 10px;
+  padding: 8px 10px 0;
 }
 
 .iconfont {
-  color: #F5483B;
+  color: #f5483b;
   font-size: 20px !important;
   vertical-align: middle;
   margin-right: 10px;
@@ -21,7 +21,7 @@
 .btn-group {
   margin-top: 16px;
   text-align: right;
-  padding: 0 10px 8px 10px;
+  padding: 0 10px 8px;
 }
 
 .btn-cancel {

src/components/PutAway/index.module.scss

@@ -2,7 +2,7 @@
   position: absolute;
   bottom: 10px;
   font-size: 13px;
-  color: #ADB5BC;
+  color: #adb5bc;
   line-height: 32px;
   width: 180px;
   cursor: pointer;
@@ -19,7 +19,7 @@
   width: 160px;
   height: 1px;
   opacity: 0.2;
-  background-image: linear-gradient(180deg, #74788D 0%, #F4F4F8 100%);
+  background-image: linear-gradient(180deg, #74788d 0%, #F4F4F8 100%);
 }
 
 .put-away-divider-close {

src/components/Rule/RuleContent.tsx

@@ -5,7 +5,7 @@ import Button from 'components/Button';
 import Serve from 'components/Serve';
 import Icon from 'components/Icon';
 import Condition from './condition';
-import { IRule, ICondition } from 'interfaces/targeting';
+import { IRule, ICondition, IOption } from 'interfaces/targeting';
 import { IContainer } from 'interfaces/provider';
 import { STRING_TYPE, NUMBER_TYPE, SEMVER_TYPE, DATETIME_TYPE, SEGMENT_TYPE } from './constants';
 import styles from './index.module.scss';
@@ -16,6 +16,7 @@ interface IProps {
   disabled?: boolean;
   useSegment?: boolean;
   ruleContainer: IContainer;
+  subjectOptions: IOption[];
   variationContainer?: IContainer;
   segmentContainer?: IContainer;
   hooksFormContainer: IContainer;
@@ -28,6 +29,7 @@ const RuleContent = (props: IProps) => {
     ruleIndex,
     useSegment,
     ruleContainer, 
+    subjectOptions,
     segmentContainer,
     variationContainer, 
     hooksFormContainer, 
@@ -65,6 +67,7 @@ const RuleContent = (props: IProps) => {
               useSegment={useSegment}
               conditionIndex={index}
               condition={condition}
+              subjectOptions={subjectOptions}
               ruleContainer={ruleContainer}
               segmentContainer={segmentContainer}
               variationContainer={variationContainer}

src/components/Rule/condition.tsx

@@ -11,8 +11,8 @@ import { IContainer } from 'interfaces/provider';
 import { ISegment, ISegmentList } from 'interfaces/segment';
 import { 
   getAttrOptions,
-  attributeOptions,
-  getSubjectSegmentOptions,
+  // attributeOptions,
+  // getSubjectSegmentOptions,
   timezoneOptions,
   DATETIME_TYPE,
   SEGMENT_TYPE,
@@ -28,6 +28,7 @@ interface IProps {
   useSegment?: boolean;
   conditionIndex: number;
   condition: ICondition;
+  subjectOptions: IOption[];
   ruleContainer: IContainer;
   variationContainer?: IContainer;
   segmentContainer?: IContainer;
@@ -43,7 +44,8 @@ const RuleContent = (props: IProps) => {
     rule,
     disabled,
     ruleIndex,
-    useSegment,
+    // useSegment,
+    subjectOptions,
     conditionIndex,
     condition,
     ruleContainer, 
@@ -54,7 +56,6 @@ const RuleContent = (props: IProps) => {
   const intl = useIntl();
   const [ options, setOption ] = useState<IOption[]>();
   const segmentList: ISegmentList = segmentContainer?.useContainer().segmentList;;
-  let subjectOptions: IOption[] = attributeOptions;
 
   const {
     handleChangeAttr,
@@ -114,22 +115,6 @@ const RuleContent = (props: IProps) => {
     };
   });
 
-  if (useSegment) {
-    subjectOptions = getSubjectSegmentOptions();
-  }
-  
-  const subjectIndex = subjectOptions?.findIndex((attr) => {
-    return attr.value === condition.subject;
-  });
-
-  if (subjectIndex === -1 && condition.subject) {
-    subjectOptions.push({
-      key: condition.subject,
-      text: condition.subject,
-      value: condition.subject,
-    });
-  }
-
   const inputProps = {
     placeholder: intl.formatMessage({id: 'common.dropdown.placeholder'}),
     disabled: disabled,
@@ -140,7 +125,7 @@ const RuleContent = (props: IProps) => {
       {
         conditionIndex === 0 ? (
           <span className={`${styles['rule-item-prefix']} ${styles['rule-item-first']}`}>
-            <span className={styles['rule-item-text']}>if</span>
+            <span className={styles['rule-item-text']}>If</span>
           </span>
         ) : (
           <span className={styles['rule-item-prefix']}>
@@ -158,11 +143,11 @@ const RuleContent = (props: IProps) => {
             allowAdditions
             options={subjectOptions}
             value={condition.subject}
-            openOnFocus={false}
-            selectOnBlur={false}
+            openOnFocus={true}
             closeOnChange={true}
+            noResultsMessage={null}
             disabled={condition.type === SEGMENT_TYPE || disabled}
-            icon={<Icon customClass={styles['angle-down']} type='angle-down' />}
+            icon={null}
             error={ errors[`rule_${rule.id}_condition_${condition.id}_subject`] ? true : false }
             {
               ...register(`rule_${rule.id}_condition_${condition.id}_subject`, { 
@@ -363,7 +348,7 @@ const RuleContent = (props: IProps) => {
                   <div className={styles['error-text']}>
                     { 
                       condition.type !== SEGMENT_TYPE
-                      ? intl.formatMessage({id: 'targeting.rule.values.placeholder'})
+                      ? intl.formatMessage({id: 'targeting.rule.values.required'})
                       : intl.formatMessage({id: 'common.dropdown.placeholder'})
                     }
                   </div> 

src/components/Rule/index.module.scss

@@ -12,7 +12,7 @@
 }
 
 .rule:hover {
-  border: 1px solid #556EE6;
+  border: 1px solid #556ee6;
   border-radius: 8px;
 }
 
@@ -55,25 +55,24 @@
 
 .rule-item-prefix {
   display: inline-block;
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   border-radius: 100%;
-  font-size: 12px;
+  font-size: 13px;
   text-align: center;
-  line-height: 24px;
+  line-height: 26px;
   color: #ffffff;
   position: relative;
   top: 4px;
   margin: 0 14px 0 10px;
-  background-color: #26A4BA;
+  background-color: #26a4ba;
 }
 
 .rule-item-first {
   background-color: #556ee6;
 }
 
 .rule-item-text {
-  transform: scale(0.8);
   display: inline-block;
 }
 
@@ -121,7 +120,6 @@
   position: absolute;
   top: 6px;
   left: 12px;
-  border-radius: 4px;
   padding: 0 4px;
 }
 
@@ -167,7 +165,7 @@
   line-height: 24px;
   text-align: center;
   display: inline-block;
-  color: #74788D;
+  color: #74788d;
 }
 
 .icon-archive:hover {
@@ -184,18 +182,31 @@
   line-height: 24px;
   text-align: center;
   display: inline-block;
-  color: #74788D;
+  color: #74788d;
 }
 
 .icon-drag:hover {
   background: rgba(33, 37, 41, 0.04);
   color: #495057;
 }
 
+.subject-angle-down {
+  position: absolute;
+  right: 0;
+  color: #74788d;
+  top: 0;
+  width: 24px;
+  background: rgba(0, 0, 0, 0.02);
+  height: 32px;
+  line-height: 32px;
+  cursor: pointer !important;
+  text-align: center;
+}
+
 .angle-down {
   position: absolute;
   right: 10px;
-  color: #74788D;
+  color: #74788d;
   top: 8px;
 }
 
@@ -214,7 +225,7 @@
   border-radius: 100%;
   line-height: 24px;
   text-align: center;
-  color: #74788D;
+  color: #74788d;
 }
 
 .icon-minus:hover {
@@ -223,7 +234,7 @@
 }
 
 .error-text {
-  color: #F46A6A;
+  color: #f46a6a;
   font-size: 12px;
 }
 
@@ -235,7 +246,7 @@
 .dropdown-remove-icon {
   font-size: 12px !important;
   margin-left: 12px;
-  color: #74788D;
+  color: #74788d;
 }
 
 .popup {
@@ -257,5 +268,5 @@
 }
 
 .menu-item:hover {
-  background-color: #F8F9FA;
+  background-color: #f8f9fa;
 }