Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUGFIX] Using query params helper outside of link-to #18458

Merged
merged 4 commits into from
Oct 8, 2019
Merged

[BUGFIX] Using query params helper outside of link-to #18458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8c567f5
tests: Add failing test for QP helper with let
Alonski Oct 3, 2019
4dc4c53
fix: Fixed link-to assert with (qp) helper
Alonski Oct 3, 2019
fc7cb2d
feat: Assert "Cannot pass QPs object in @models and @query at same time
Alonski Oct 4, 2019
c7404ca
Revert "feat: Assert "Cannot pass QPs object in @models and @query at…
Alonski Oct 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions packages/@ember/-internals/glimmer/lib/components/link-to.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -838,14 +838,14 @@ const LinkComponent = EmberComponent.extend({
)
);

if (DEBUG && this.query === UNDEFINED) {
let { _models: models } = this;
let lastModel = models.length > 0 && models[models.length - 1];

assert(
'The `(query-params)` helper can only be used when invoking the `{{link-to}}` component.',
!(lastModel && lastModel.isQueryParams)
);
let { _models: models } = this;
if (models.length > 0) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to keep this.query === UNDEFINED (and maybe assert you can’t have both)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chancancode Can you please help me understand exactly what you mean? What should the code be?

Copy link
Member

@chancancode chancancode Oct 3, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

if (this.query === UNDEFINED) {
  let { _models: models } = this;

  if (models.length > 0) {
    let maybeQueryParams = models[models.length - 1];

    if (isQueryParams(maybeQueryParams)) {
      this.query = maybeQueryParams.values;
      models.pop();
    }
  }
} else {
  assert(
    'Cannot pass a QueryParams object in @models and @query at the same time',
    this.models.length === 0 || isQueryParams(this.models[this.models.length - 1])
  );
}
// packages/@ember/-internals/routing/lib/system/query_params.ts

import { Option } from '@glimmer/interfaces';

export default class QueryParams {
  constructor(readonly values: Option< object> = null) {
  }

  get isQueryParams(): true {
    return true;
  }
}

export function isQueryParams(obj: unknown): obj is QueryParams {
  return typeof obj === 'object' && obj !== null && obj['isQueryParams'] === true;
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually don't know why the QueryParams constructor accepts null here, is that a public API?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chancancode - In general, I agree that you shouldn't be able to set both @query and pass a (query-param as the last model, however I don't think we can check this.query === UNDEFINED unless we also change where we save off the query param value. Given the snippet you suggested above, we would only update this.query the first time (not for each subsequent didReceiveAttrs where we could have a completely new value).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chancancode I don't understand the query_params.ts snippet.
This will change the behavior of the class. Why is values not a property anymore?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay sorry I think I understand the problem now. I know how to fix it but I'll do it later. You can revert to what you had before here (removing the this.query === UNDEFINED check and the assertion I added).

Copy link
Member

@chancancode chancancode Oct 4, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Alonski in TypeScript, constructor(readonly values: Option<object> = null) is a shorthand for declaring the field and assigning it from the constructor:

export default class QueryParams {
  constructor(readonly values: Option<object> = null) {
  }

  get isQueryParams(): true {
    return true;
  }
}

...is the same as...

export default class QueryParams {
  readonly values: Option<object>;

  constructor(values: Option<object> = null) {
    this.values = values;
  }

  get isQueryParams(): true {
    return true;
  }
}

let lastModel = models[models.length - 1];

if (typeof lastModel === 'object' && lastModel !== null && lastModel.isQueryParams) {
this.query = lastModel.values;
models.pop();
}
}

return;
Expand Down
13 changes: 8 additions & 5 deletions ...@ember/-internals/glimmer/tests/integration/components/link-to/query-params-curly-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,16 @@ moduleFor(

this.addTemplate(
'index',
`{{#let (query-params foo='456' bar='NAW') as |qp|}}{{link-to 'Index' 'index' qp}}{{/let}}`
`{{#let (query-params foo='456' alon='BUKAI') as |qp|}}{{link-to 'Index' 'index' qp}}{{/let}}`
);

return assert.rejectsAssertion(
this.visit('/'),
/The `\(query-params\)` helper can only be used when invoking the `{{link-to}}` component\./
);
return this.visit('/').then(() => {
this.assertComponentElement(this.firstChild, {
tagName: 'a',
attrs: { href: '/?alon=BUKAI&foo=456', class: classMatcher('ember-view') },
content: 'Index',
});
});
}
}
);
Expand Down