Design Proposal: Extensible Recommendation Panel Results #5678
ek68794998
started this conversation in
Feature Requests
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Goal
To partition the results in the search panel into sections which are host-configurable.
Proposal: Overview
This proposal carries two purposes:
Proposal: Visual design
The below is a rough idea of how the visual design should look, based on early design drafts. Alterations have already been made internally to this design, so please reach out to me directly if you'd like to get an updated idea of the visuals.
Fluent 9 components in use:
<Input contentBefore={<SearchRegular />} {...} />
<SearchBox />
from Fluent 9 for the search control; however, this is only available in@fluentui/react-components
v9.48.0 and higher.<ToggleButton icon={<FilterRegular />} {...} />
<Card appearance="outline" focusMode="off" {...} />
<Card size="small" style={{ flexDirection: 'row' }} {...} />
Everything else is a custom component. Use of
<Text />
was employed for the card surfaces (withoverflow: hidden; text-overflow: ellipsis; white-space: nowrap
to add...
). Icons were added to headers using Fluent 9 icons.Proposal: Technical design
The basic service design would extend the functionality already available in
ISearchService
. The new method would be employed inrecommendationPanelContext.tsx
where it could be passed into child components (the search header & the connectors output list).The new method could then be implemented as follows:
This would then require a significant re-architecture of the search panel. The
<SearchView />
component would be rewritten, and once it loaded the operations by usingsearchOperations()
, it would then also make a call togetSearchResultSections()
.These values would be passed into a new component
<SearchResultsView />
, a replacement for<SearchResultsGrid />
that exists today.The code is outlined below, but the basic logic goes:
isOperationIncluded
or by theitems
field ofCustomSearchResultSection
), include it in that section.showOtherSection
is enabled.headerText
, etc.).That would work something like this:
Callouts
SearchResultSection
is left as an exercise to the implementer.CustomSearchResultAction.onSelect
would be a callback that could be provided, allowing the callee to return a connector ID and operation ID which would then be used to add an action. Or, it could returnvoid
if, instead, the host wants to handle the entire process itself.Beta Was this translation helpful? Give feedback.
All reactions