[apisix-dashboard] branch master updated: fix: hash_on field and limitation (#2034)

[sunyi]

This is an automated email from the ASF dual-hosted git repository.

sunyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new 5a581d3  fix: hash_on field and limitation (#2034)
5a581d3 is described below

commit 5a581d3f0fa0f74a634af93f14fc779c16454938
Author: Baoyuan <baoyuan....@gmail.com>
AuthorDate: Sun Aug 8 04:52:44 2021 -0500

    fix: hash_on field and limitation (#2034)
    
    Co-authored-by: 琚致远 <juzhiy...@apache.org>
---
 ...and_edit_upstream_with_custom_chash_key.spec.js |  7 ++++
 web/src/components/Upstream/components/Type.tsx    | 46 +++++++++++-----------
 web/src/components/Upstream/locales/en-US.ts       |  3 +-
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git 
a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js
 
b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js
index 0b3b923..152677a 100644
--- 
a/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js
+++ 
b/web/cypress/integration/upstream/create_and_edit_upstream_with_custom_chash_key.spec.js
@@ -62,8 +62,15 @@ context('Create and Delete Upstream With Custom CHash Key', 
() => {
     cy.get(selector.upstreamType).within(() => {
       cy.contains('CHash').click();
     });
+    cy.get('[title="Key"]').should('exist');
+    // Key is hidden when Hasn on select consumer
     cy.get(selector.varSelect).click();
     cy.get(selector.hashPosition).within(() => {
+      cy.contains('consumer').click();
+    });
+    cy.get('[title="Key"]').should('not.exist');
+    cy.get('#hash_on').click({ force: true });
+    cy.get(selector.hashPosition).within(() => {
       cy.contains('cookie').click();
     });
     cy.get(selector.defaultCHashKey).click();
diff --git a/web/src/components/Upstream/components/Type.tsx 
b/web/src/components/Upstream/components/Type.tsx
index b72d6cd..26c1109 100644
--- a/web/src/components/Upstream/components/Type.tsx
+++ b/web/src/components/Upstream/components/Type.tsx
@@ -26,7 +26,7 @@ type Props = {
   form: FormInstance;
 };
 
-const CHash: React.FC<Pick<Props, 'readonly'>> = ({ readonly }) => {
+const CHash: React.FC<Props> = ({ form, readonly }) => {
   const { formatMessage } = useIntl();
   const [keySearchWord, setKeySearchWord] = useState('');
 
@@ -50,26 +50,28 @@ const CHash: React.FC<Pick<Props, 'readonly'>> = ({ 
readonly }) => {
           ))}
         </Select>
       </Form.Item>
-      <Form.Item
-        name="key"
-        rules={[{ required: true }]}
-        label={formatMessage({ id: 'component.upstream.fields.key' })}
-        tooltip={formatMessage({ id: 'component.upstream.fields.key.tooltip' 
})}
-        initialValue="remote_addr"
-      >
-        <AutoComplete disabled={readonly} onSearch={handleSearch}>
-          {Object.entries(CommonHashKeyEnum)
-            .filter(
-              ([label, value]) =>
-                label.startsWith(keySearchWord) || 
value.startsWith(keySearchWord),
-            )
-            .map(([label, value]) => (
-              <Select.Option value={value} key={value}>
-                {label}
-              </Select.Option>
-            ))}
-        </AutoComplete>
-      </Form.Item>
+      {form.getFieldValue('hash_on') !== 'consumer' && (
+        <Form.Item
+          name="key"
+          rules={[{ required: true }]}
+          label={formatMessage({ id: 'component.upstream.fields.key' })}
+          tooltip={formatMessage({ id: 'component.upstream.fields.key.tooltip' 
})}
+          initialValue="remote_addr"
+        >
+          <AutoComplete disabled={readonly} onSearch={handleSearch}>
+            {Object.entries(CommonHashKeyEnum)
+              .filter(
+                ([label, value]) =>
+                  label.startsWith(keySearchWord) || 
value.startsWith(keySearchWord),
+              )
+              .map(([label, value]) => (
+                <Select.Option value={value} key={value}>
+                  {label}
+                </Select.Option>
+              ))}
+          </AutoComplete>
+        </Form.Item>
+      )}
     </React.Fragment>
   );
 };
@@ -98,7 +100,7 @@ const Component: React.FC<Props> = ({ readonly, form }) => {
       <Form.Item shouldUpdate noStyle>
         {() => {
           if (form.getFieldValue('type') === 'chash') {
-            return <CHash readonly={readonly} />;
+            return <CHash form={form} readonly={readonly} />;
           }
           return null;
         }}
diff --git a/web/src/components/Upstream/locales/en-US.ts 
b/web/src/components/Upstream/locales/en-US.ts
index f865624..34cae8c 100644
--- a/web/src/components/Upstream/locales/en-US.ts
+++ b/web/src/components/Upstream/locales/en-US.ts
@@ -60,7 +60,8 @@ export default {
   'component.upstream.fields.checks.active.http_path': 'HTTP Path',
   'component.upstream.fields.checks.active.http_path.tooltip':
     'The path that should be used when issuing the HTTP GET request to the 
target. The default value is /.',
-  'component.upstream.fields.checks.active.http_path.placeholder': 'Please 
enter HTTP path',
+  'component.upstream.fields.checks.active.http_path.placeholder':
+    'Please enter the HTTP request path',
 
   'component.upstream.fields.checks.active.https_verify_certificate': 'Verify 
HTTPs Certificate',
   'component.upstream.fields.checks.active.https_verify_certificate.tooltip':