feat: autocomplete when people input http header

[qian0817]

Please answer these questions before submitting a pull request, or your PR will get closed.

Why submit this pull request?

• Bugfix
• New feature provided
• Improve performance
• Backport patches

What changes will this PR take into?

autocomplete when people input http header

Related issues

None

Checklist:

• Did you explain what problem does this PR solve? Or what new features have been added?
• Have you added corresponding test cases?
• Have you modified the corresponding document?
• Is this PR backward compatible? If it is not backward compatible, please discuss on the mailing list first

[juzhiyuan]

Wow! Good feature indeed! @qian0817 Would you like to write the test cases for this PR? or need some help about this?

BTW, please update the Checklist :)

[juzhiyuan]

also cc @guoqqqi to review

[qian0817]

@juzhiyuan I dont't konw how to use cypress,so I may need some help to write test case.

[guoqqqi]

Very good! I found a small problem: when clicking on the delete icon, the key in the last row is not deleted, shouldn't we delete the key in the last row as well?

[qian0817]

I'm confused why the behavior of component input and autocomplete appear inconsistent when delete form item. 🤔

[juzhiyuan]

BTW, @guoqqqi, would you have time to guide @qian0817 to write E2E tests for this PR?

[qian0817]

@guoqqqi fixed

[codecov-io]

Codecov Report

Merging #1679 (7f7d503) into master (88f3232) will increase coverage by 1.67%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #1679      +/-   ##
==========================================
+ Coverage   72.41%   74.09%   +1.67%     
==========================================
  Files         133       86      -47     
  Lines        5728     2617    -3111     
  Branches      666      667       +1     
==========================================
- Hits         4148     1939    -2209     
+ Misses       1337      678     -659     
+ Partials      243        0     -243     

Flag	Coverage Δ
backend-e2e-test	?
backend-e2e-test-ginkgo	?
backend-unit-test	?
frontend-e2e-test	74.09% <100.00%> (+0.12%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ages/Route/components/DebugViews/DebugDrawView.tsx	78.08% <ø> (ø)
...es/Route/components/DebugViews/DebugParamsView.tsx	100.00% <100.00%> (ø)
web/src/pages/Route/constants.ts	100.00% <100.00%> (ø)
api/internal/handler/service/service.go
api/internal/handler/tool/tool.go
api/internal/handler/data_loader/route_import.go
api/internal/utils/closer.go
api/internal/utils/consts/api_error.go
api/internal/handler/consumer/consumer.go
api/internal/core/storage/etcd.go
... and 41 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 88f3232...7f7d503. Read the comment docs.

[guoqqqi]

LGTM! Hi, I can help you to add an E2E test to this PR.

[juzhiyuan]

LGTM, and you could ask @guoqqqi for help to write E2E.

[qian0817]

@guoqqqi Hi,How to simulate clicking on the prompt part of the autocomplete component.I tried to use the following code but not work.

  it('sample', function () {
    cy.visit('/');
    cy.contains(menuLocaleUS['menu.routes']).click();
    const currentToken = localStorage.getItem('token');
    cy.contains(routeLocaleUS['page.route.onlineDebug']).click();
    cy.get(domSelector.debugDraw).should('be.visible');
    cy.get(domSelector.headerTab).should('be.visible').click();
    cy.get(domSelector.headerDataKey0).type('auth').click();
    cy.contains(domSelector.headerAuthorizationKey).click()
    cy.get(domSelector.headerDataValue0).type(currentToken);
  });

[guoqqqi]

Hi, @qian0817 You can solve this problem like this:

  it('sample', function () {
    cy.visit('/');
    cy.contains(menuLocaleUS['menu.routes']).click();
    const currentToken = localStorage.getItem('token');
    cy.contains(routeLocaleUS['page.route.onlineDebug']).click();
    cy.get(domSelector.debugDraw).should('be.visible');
    cy.get(domSelector.headerTab).should('be.visible').click();
    cy.get(domSelector.headerDataKey0).click({ force: true });
    cy.get('.ant-select-item-option-content').contains('Accept').click();
    cy.get(domSelector.headerDataValue0).type(currentToken);
  });

[liuxiran]

LGTM

[juzhiyuan]

Thanks! @qian0817

BTW, would you like to help to review this PR?

#1707

[LiteSun]

LGTM