-
Notifications
You must be signed in to change notification settings - Fork 12
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.
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
fixeat(SFINT-3295): Improve UserActions interactivity #81
Changes from 2 commits
a3744ac
18631ff
fe4f626
351c9f6
39a5257
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -70,6 +70,13 @@ export interface IUserActionsOptions { | |
* Default: `False` | ||
*/ | ||
hidden: Boolean; | ||
/** | ||
* Whether or not the UserAction component should use the CoveoSearchUI ResponsiveManager | ||
* Inoperant if `hidden` is true. | ||
* | ||
* Default: `True` | ||
*/ | ||
useResponsiveManager: Boolean; | ||
} | ||
|
||
/** | ||
|
@@ -80,6 +87,10 @@ export class UserActions extends Component { | |
* Identifier of the Search-UI component. | ||
*/ | ||
static readonly ID = 'UserActions'; | ||
static readonly Events = { | ||
Hide: 'userActionsPanelHide', | ||
Show: 'userActionsPanelShow' | ||
}; | ||
|
||
/** | ||
* Default initialization options of the **UserActions** class. | ||
|
@@ -100,6 +111,9 @@ export class UserActions extends Component { | |
}), | ||
hidden: ComponentOptions.buildBooleanOption({ | ||
defaultValue: false | ||
}), | ||
useResponsiveManager: ComponentOptions.buildBooleanOption({ | ||
defaultValue: true | ||
}) | ||
}; | ||
|
||
|
@@ -130,7 +144,9 @@ export class UserActions extends Component { | |
this.tagViewsOfUser(); | ||
|
||
if (!options.hidden) { | ||
ResponsiveUserActions.init(this.root, this); | ||
if (options.useResponsiveManager) { | ||
ResponsiveUserActions.init(this.root, this); | ||
} | ||
this.bind.onRootElement(QueryEvents.newQuery, () => this.hide()); | ||
this.hide(); | ||
} | ||
|
@@ -144,33 +160,45 @@ export class UserActions extends Component { | |
(get(this.root, UserProfileModel) as UserProfileModel).deleteActions(this.options.userId); | ||
this.root.classList.remove(UserActions.USER_ACTION_OPENED); | ||
this.isOpened = false; | ||
this.element.dispatchEvent(new CustomEvent(UserActions.Events.Hide)); | ||
} | ||
} | ||
|
||
/** | ||
* Open the panel. | ||
*/ | ||
public show() { | ||
public async show() { | ||
if (!this.isOpened) { | ||
(get(this.root, UserProfileModel) as UserProfileModel) | ||
.getActions(this.options.userId) | ||
.then(actions => (actions.length > 0 ? this.render() : this.renderNoActions())) | ||
.catch(e => (e && e.statusCode === 404 ? this.renderEnablePrompt() : this.renderNoActions())); | ||
|
||
this.element.dispatchEvent(new CustomEvent(UserActions.Events.Show)); | ||
this.bindings.usageAnalytics.logCustomEvent({ name: 'openUserActions', type: 'User Actions' }, {}, this.element); | ||
this.root.classList.add(UserActions.USER_ACTION_OPENED); | ||
this.isOpened = true; | ||
|
||
try { | ||
const userActions = await (get(this.root, UserProfileModel) as UserProfileModel).getActions(this.options.userId); | ||
if (userActions.length > 0) { | ||
this.render(); | ||
} else { | ||
this.renderNoActions(); | ||
} | ||
} catch (e) { | ||
if (e && e.statusCode === 404) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why are we only checking for status code 404? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we're still considering the others status code, but do not wish to take special action for them other than render no actions. I'm guessing that if https://platformqa.cloud.coveo.com/docs/?api=Reveal#!/User32Profiles/rest_organizations_paramId_machinelearning_user_actions_post answer 404, it means the feature is not enabled on the client organization. |
||
this.renderEnablePrompt(); | ||
} else { | ||
this.renderNoActions(); | ||
} | ||
} | ||
} | ||
} | ||
|
||
/** | ||
* Toggle the visibility of the panel. | ||
*/ | ||
public toggle() { | ||
public async toggle() { | ||
if (this.isOpened) { | ||
this.hide(); | ||
} else { | ||
this.show(); | ||
await this.show(); | ||
} | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wanted to use optional chaining, was not able because of prettier, so #80 should fix it and allow latest TypeScript features to be used.