apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: Resizable contextualbars out of feature preview (#37022)

Browse Source 
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
pull/35380/merge
Yash Rajpal 4 months ago committed by Guilherme Gazzo
parent 611e4cdfa0
commit bd5edfc299
20 changed files with 3045 additions and 2404 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      .changeset/happy-carpets-draw.md
  2. 1614
      apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap
  3. 2
      apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx
  4. 695
      apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap
  5. 9
      apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx
  6. 60
      apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap
  7. 4
      apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
  8. 1122
      apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap
  9. 1016
      apps/meteor/client/views/room/contextualBar/RoomMembers/__snapshots__/RoomMembers.spec.tsx.snap
  10. BIN
      apps/meteor/public/images/featurePreview/resizable-contextual-bar.png
  11. 1
      apps/meteor/tests/e2e/feature-preview.spec.ts
  12. 4
      apps/meteor/tests/e2e/page-objects/omnichannel-units.ts
  13. 2
      packages/i18n/src/locales/en.i18n.json
  14. 2
      packages/i18n/src/locales/nb.i18n.json
  15. 2
      packages/i18n/src/locales/nn.i18n.json
  16. 2
      packages/i18n/src/locales/pt-BR.i18n.json
  17. 2
      packages/i18n/src/locales/sv.i18n.json
  18. 14
      packages/ui-client/src/components/Contextualbar/ContextualbarDialog.tsx
  19. 11
      packages/ui-client/src/hooks/useFeaturePreviewList.ts
  20. 880
      packages/ui-voip/src/views/CallHistoryContextualbar/__snapshots__/CallHistoryContextualbar.spec.tsx.snap

7
.changeset/happy-carpets-draw.md
Unescape View File

@ -0,0 +1,7 @@
---
'@rocket.chat/ui-client': major
'@rocket.chat/i18n': major
'@rocket.chat/meteor': major
---
Promotes Resizable Contextualbars from preview state to stable.

1614
apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx
Unescape View File

@ -33,7 +33,7 @@ export default {
return (
<FormProvider {...methods}>
<Contextualbar height='100vh'>{fn()}</Contextualbar>
<Contextualbar height='100vh'> {fn()}</Contextualbar>
</FormProvider>
);
},

695
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap
Unescape View File

@ -6,400 +6,443 @@ exports[`renders AppLogsItem without crashing 1`] = `
<div
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
>
<span
data-focus-scope-start="true"
hidden=""
/>
<div
aria-labelledby="contextualbarTitle"
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
role="dialog"
tabindex="-1"
style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
>
<div
class="rcx-box rcx-box--full rcx-css-zsa0ng"
aria-labelledby="contextualbarTitle"
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
role="dialog"
tabindex="-1"
>
<div
class="rcx-box rcx-box--full rcx-css-1sl6k6j"
class="rcx-box rcx-box--full rcx-css-zsa0ng"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
>
</i>
<div
class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
id="contextualbarTitle"
>
Filters
</div>
<button
aria-label="Close"
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
data-qa="ContextualbarActionClose"
type="button"
class="rcx-box rcx-box--full rcx-css-1sl6k6j"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
>
</i>
</button>
<div
class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
id="contextualbarTitle"
>
Filters
</div>
<button
aria-label="Close"
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
data-qa="ContextualbarActionClose"
type="button"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
>
</i>
</button>
</div>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1svuzur"
>
<div
class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
data-overlayscrollbars="host"
class="rcx-box rcx-box--full rcx-css-1svuzur"
>
<div
class="os-size-observer"
class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
data-overlayscrollbars="host"
>
<div
class="os-size-observer-listener"
/>
</div>
<div
class=""
data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
tabindex="-1"
>
<form
class="rcx-box rcx-box--full rcx-css-iag4sp"
class="os-size-observer"
>
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
class="os-size-observer-listener"
/>
</div>
<div
class=""
data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
tabindex="-1"
>
<form
class="rcx-box rcx-box--full rcx-css-iag4sp"
>
<label
class="rcx-box rcx-box--full rcx-label"
for="timeFilter"
id="timeFilterLabel"
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
Time
</label>
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="react-aria-:r8: timeFilterLabel"
class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
id="timeFilter"
type="button"
<label
class="rcx-box rcx-box--full rcx-label"
for="timeFilter"
id="timeFilterLabel"
>
Time
</label>
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="react-aria-:r8: timeFilterLabel"
class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
id="timeFilter"
type="button"
>
<div
aria-hidden="true"
data-a11y-ignore="aria-hidden-focus"
data-react-aria-prevent-focus="true"
data-testid="hidden-select-container"
style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
>
<label>
<select
name="timeFilter"
tabindex="-1"
>
<option />
<option
value="all"
>
all
</option>
<option
value="today"
>
today
</option>
<option
value="last5Minutes"
>
last5Minutes
</option>
<option
value="last15Minutes"
>
last15Minutes
</option>
<option
value="last30Minutes"
>
last30Minutes
</option>
<option
value="last1Hour"
>
last1Hour
</option>
<option
value="thisWeek"
>
thisWeek
</option>
</select>
</label>
</div>
<span
class="rcx-box rcx-box--full rcx-css-11g6st8"
id="react-aria-:r8:"
/>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
>
</i>
</button>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
<label
class="rcx-box rcx-box--full rcx-label"
for="timeFilter"
>
Logs_from
</label>
<div
aria-hidden="true"
data-a11y-ignore="aria-hidden-focus"
data-react-aria-prevent-focus="true"
data-testid="hidden-select-container"
style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
class="rcx-box rcx-box--full rcx-css-omrq7i"
>
<label>
<select
name="timeFilter"
tabindex="-1"
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
>
<input
aria-label="Start_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="startDate"
size="1"
type="date"
value=""
/>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
>
<option />
<option
value="all"
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
>
all
</option>
<option
value="today"
>
today
</option>
<option
value="last5Minutes"
>
last5Minutes
</option>
<option
value="last15Minutes"
>
last15Minutes
</option>
<option
value="last30Minutes"
>
last30Minutes
</option>
<option
value="last1Hour"
>
last1Hour
</option>
<option
value="thisWeek"
</i>
</span>
</label>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
>
<input
aria-label="Start_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="startTime"
size="1"
type="time"
value=""
/>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
>
thisWeek
</option>
</select>
</i>
</span>
</label>
</div>
<span
class="rcx-box rcx-box--full rcx-css-11g6st8"
id="react-aria-:r8:"
/>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
>
</i>
</button>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
<label
class="rcx-box rcx-box--full rcx-label"
for="timeFilter"
>
Logs_from
</label>
</div>
<div
class="rcx-box rcx-box--full rcx-css-omrq7i"
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
class="rcx-box rcx-box--full rcx-label"
for="timeFilter"
>
<input
aria-label="Start_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="startDate"
size="1"
type="date"
value=""
/>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
>
</i>
</span>
Until
</label>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
<div
class="rcx-box rcx-box--full rcx-css-omrq7i"
>
<input
aria-label="Start_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="startTime"
size="1"
type="time"
value=""
/>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
<input
aria-label="End_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="endDate"
size="1"
type="date"
value=""
/>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
>
</i>
</span>
</label>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
>
</i>
</span>
</label>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
>
<input
aria-label="End_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="endTime"
size="1"
type="time"
value=""
/>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
>
</i>
</span>
</label>
</div>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
<label
class="rcx-box rcx-box--full rcx-label"
for="timeFilter"
>
Until
</label>
<div
class="rcx-box rcx-box--full rcx-css-omrq7i"
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
class="rcx-box rcx-box--full rcx-label"
for="instanceFilter"
id="instanceFilterLabel"
>
<input
aria-label="End_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="endDate"
size="1"
type="date"
value=""
/>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
>
</i>
</span>
Instance
</label>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
<div
aria-busy="true"
aria-labelledby="instanceFilterLabel"
class="rcx-box rcx-box--full rcx-skeleton__input"
>
<input
aria-label="End_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="endTime"
size="1"
type="time"
value=""
<span
class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
/>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
<label
class="rcx-box rcx-box--full rcx-label"
for="severityFilter"
id="severityFilterLabel"
>
Severity
</label>
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Severity"
aria-labelledby="react-aria-:rg: react-aria-:rb: severityFilterLabel"
class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
id="severityFilter"
type="button"
>
<div
aria-hidden="true"
data-a11y-ignore="aria-hidden-focus"
data-react-aria-prevent-focus="true"
data-testid="hidden-select-container"
style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
>
<label>
<select
name="severity"
tabindex="-1"
>
<option />
<option
value="all"
>
all
</option>
<option
value="0"
>
0
</option>
<option
value="1"
>
1
</option>
<option
value="2"
>
2
</option>
</select>
</label>
</div>
<span
class="rcx-box rcx-box--full rcx-input-box__addon"
class="rcx-box rcx-box--full rcx-css-e3nij6"
id="react-aria-:rg:"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
>
</i>
All
</span>
</label>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
>
</i>
</button>
</div>
</div>
</form>
</div>
<div
class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
>
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
class="os-scrollbar-track"
>
<label
class="rcx-box rcx-box--full rcx-label"
for="instanceFilter"
id="instanceFilterLabel"
>
Instance
</label>
<div
aria-busy="true"
aria-labelledby="instanceFilterLabel"
class="rcx-box rcx-box--full rcx-skeleton__input"
>
<span
class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
/>
</div>
class="os-scrollbar-handle"
/>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
>
<label
class="rcx-box rcx-box--full rcx-label"
for="severityFilter"
id="severityFilterLabel"
>
Severity
</label>
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Severity"
aria-labelledby="react-aria-:rg: react-aria-:rb: severityFilterLabel"
class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
id="severityFilter"
type="button"
>
<div
aria-hidden="true"
data-a11y-ignore="aria-hidden-focus"
data-react-aria-prevent-focus="true"
data-testid="hidden-select-container"
style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
>
<label>
<select
name="severity"
tabindex="-1"
>
<option />
<option
value="all"
>
all
</option>
<option
value="0"
>
0
</option>
<option
value="1"
>
1
</option>
<option
value="2"
>
2
</option>
</select>
</label>
</div>
<span
class="rcx-box rcx-box--full rcx-css-e3nij6"
id="react-aria-:rg:"
>
All
</span>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
>
</i>
</button>
</div>
</form>
</div>
<div
class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
>
</div>
<div
class="os-scrollbar-track"
class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
>
<div
class="os-scrollbar-handle"
/>
class="os-scrollbar-track"
>
<div
class="os-scrollbar-handle"
/>
</div>
</div>
</div>
<div
class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
</div>
<div
class="rcx-box rcx-box--full rcx-css-m843eh"
>
<button
aria-label="Clear_filters"
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
type="button"
>
<div
class="os-scrollbar-track"
<span
class="rcx-button--content"
>
<div
class="os-scrollbar-handle"
/>
</div>
</div>
Clear_filters
</span>
</button>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-m843eh"
>
<button
aria-label="Clear_filters"
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
type="button"
<div>
<div
class=""
style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
>
<span
class="rcx-button--content"
>
Clear_filters
</span>
</button>
<div
class="rcx-box rcx-box--full rcx-css-r98g7d"
/>
</div>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
/>
</div>
</div>
<span

9
apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx
Unescape View File

@ -1,4 +1,3 @@
import { Box } from '@rocket.chat/fuselage';
import { Contextualbar } from '@rocket.chat/ui-client';
import { action } from '@storybook/addon-actions';
import type { Meta, StoryFn } from '@storybook/react';
@ -75,10 +74,4 @@ Default.args = {
itemCount: 3,
loadMoreItems: action('loadMoreItems'),
};
Default.decorators = [
(fn) => (
<Box h='600px'>
<Contextualbar>{fn()}</Contextualbar>
</Box>
),
];
Default.decorators = [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>];

60
apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap
Unescape View File

@ -4,18 +4,18 @@ exports[`CannedResponseList Storybook Stories renders Default without crashing 1
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-1kmfepv"
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
>
<span
data-focus-scope-start="true"
hidden=""
/>
<div
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-wuv6pi"
style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
>
<span
data-focus-scope-start="true"
hidden=""
/>
<div
aria-labelledby="contextualbarTitle"
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
role="dialog"
tabindex="-1"
>
@ -157,11 +157,49 @@ exports[`CannedResponseList Storybook Stories renders Default without crashing 1
</div>
</div>
</div>
<span
data-focus-scope-end="true"
hidden=""
/>
<div>
<div
class=""
style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
>
<div
class="rcx-box rcx-box--full rcx-css-r98g7d"
/>
</div>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
/>
</div>
</div>
<span
data-focus-scope-end="true"
hidden=""
/>
</div>
</div>
</body>

4
apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
Unescape View File

@ -1,5 +1,5 @@
import { Box } from '@rocket.chat/fuselage';
import { mockAppRoot } from '@rocket.chat/mock-providers';
import { Contextualbar } from '@rocket.chat/ui-client';
import type { Meta, StoryFn } from '@storybook/react';
import InviteUsers from './InviteUsers';
@ -15,7 +15,7 @@ export default {
actions: { argTypesRegex: '^on.*' },
},
decorators: [
(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>,
(fn) => <Box height='100vh'>{fn()}</Box>,
mockAppRoot()
.withTranslations('en', 'core', {
'Edit_Invite': 'Edit invite',

1122
apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap
View File

File diff suppressed because it is too large Load Diff

1016
apps/meteor/client/views/room/contextualBar/RoomMembers/__snapshots__/RoomMembers.spec.tsx.snap
View File

File diff suppressed because it is too large Load Diff

BIN
apps/meteor/public/images/featurePreview/resizable-contextual-bar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

1
apps/meteor/tests/e2e/feature-preview.spec.ts
Unescape View File

@ -94,7 +94,6 @@ test.describe.serial('feature preview', () => {
test('should be able to toggle "Enhanced navigation" feature', async ({ page }) => {
await page.goto('/account/feature-preview');
await poAccountProfile.getAccordionItemByName('Navigation').click();
const newNavigationCheckbox = poAccountProfile.getCheckboxByLabelText('Enhanced navigation');
await expect(newNavigationCheckbox).toBeChecked();
await newNavigationCheckbox.click();

4
apps/meteor/tests/e2e/page-objects/omnichannel-units.ts
Unescape View File

@ -51,13 +51,13 @@ export class OmnichannelUnits extends OmnichannelAdministration {
await this.inputDepartments.click();
await this.inputDepartments.fill(name);
await this.findOption(name).click();
await this.contextualBar.click({ position: { x: 0, y: 0 } });
await this.inputDepartments.click();
}
async selectMonitor(option: string) {
await this.inputMonitors.click();
await this.findOption(option).click();
await this.contextualBar.click({ position: { x: 0, y: 0 } });
await this.inputMonitors.click();
}
async selectVisibility(option: string) {

2
packages/i18n/src/locales/en.i18n.json
Unescape View File

@ -1266,8 +1266,6 @@
"Contacts": "Contacts",
"Contains_Security_Fixes": "Contains Security Fixes",
"Content": "Content",
"Contextualbar_resizable": "Resizable contextual bar",
"Contextualbar_resizable_description": "Adjust the size of the contextual bar by clicking and dragging the edge, giving you instant customization and flexibility.",
"Continue": "Continue",
"Continue_Adding": "Continue Adding?",
"Continuous_sound_notifications_for_new_livechat_room": "Continuous sound notifications for new omnichannel room",

2
packages/i18n/src/locales/nb.i18n.json
Unescape View File

@ -1169,8 +1169,6 @@
"Contacts": "Kontakter",
"Contains_Security_Fixes": "Inneholder sikkerhetsoppdateringer",
"Content": "Innhold",
"Contextualbar_resizable": "Kontekstlinje som kan endre størrelse",
"Contextualbar_resizable_description": "Juster størrelsen på kontekstlinjen ved å klikke og dra kanten, noe som gir deg umiddelbar tilpasning og fleksibilitet.",
"Continue": "Fortsette",
"Continue_Adding": "Fortsette å legge til?",
"Continuous_sound_notifications_for_new_livechat_room": "Kontinuerlige lydvarsler for nytt omnikanalrom",

2
packages/i18n/src/locales/nn.i18n.json
Unescape View File

@ -1133,8 +1133,6 @@
"Contacts": "Kontakter",
"Contains_Security_Fixes": "Inneholder sikkerhetsoppdateringer",
"Content": "Innhold",
"Contextualbar_resizable": "Kontekstlinje som kan endre størrelse",
"Contextualbar_resizable_description": "Juster størrelsen på kontekstlinjen ved å klikke og dra kanten, noe som gir deg umiddelbar tilpasning og fleksibilitet.",
"Continue": "Fortsette",
"Continue_Adding": "Fortsette å legge til?",
"Continuous_sound_notifications_for_new_livechat_room": "Kontinuerlige lydvarsler for nytt livechat-rom",

2
packages/i18n/src/locales/pt-BR.i18n.json
Unescape View File

@ -1159,8 +1159,6 @@
"Contacts": "Contatos",
"Contains_Security_Fixes": "Contém correções de segurança",
"Content": "Conteúdo",
"Contextualbar_resizable": "Barra de contexto redimensionável",
"Contextualbar_resizable_description": "Ajuste o tamanho da barra de contexto clicando e arrastando a borda, proporcionando personalização e flexibilidade instantâneas.",
"Continue": "Continuar",
"Continue_Adding": "Continuar adicionando?",
"Continuous_sound_notifications_for_new_livechat_room": "Notificações sonoras contínuas para nova sala de omnichannel",

2
packages/i18n/src/locales/sv.i18n.json
Unescape View File

@ -1160,8 +1160,6 @@
"Contacts": "Kontakter",
"Contains_Security_Fixes": "Innehåller säkerhetsfixar",
"Content": "Innehåll",
"Contextualbar_resizable": "Justerbar storlek kontextuell menyfält/panel",
"Contextualbar_resizable_description": "Justera storleken på det kontextuella fältet genom att klicka och dra i kanten, vilket ger dig omedelbar anpassning och flexibilitet.",
"Continue": "Fortsätt",
"Continue_Adding": "Fortsätta lägga till?",
"Continuous_sound_notifications_for_new_livechat_room": "Kontinuerliga ljudmeddelanden för nytt Omnichannel-rum",

14
packages/ui-client/src/components/Contextualbar/ContextualbarDialog.tsx
Unescape View File

@ -4,7 +4,6 @@ import { useCallback, useRef } from 'react';
import type { AriaDialogProps } from 'react-aria';
import { FocusScope, useDialog } from 'react-aria';
import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '../FeaturePreview';
import Contextualbar from './Contextualbar';
import ContextualbarResizable from './ContextualbarResizable';
@ -39,16 +38,9 @@ const ContextualbarDialog = ({ onClose, ...props }: ContextualbarDialogProps) =>
return (
<FocusScope autoFocus restoreFocus>
<FeaturePreview feature='contextualbarResizable'>
<FeaturePreviewOn>
<ContextualbarResizable defaultWidth={contextualBar}>
<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
</ContextualbarResizable>
</FeaturePreviewOn>
<FeaturePreviewOff>
<Contextualbar ref={callbackRef} width={contextualBar} position={position} {...dialogProps} {...props} />
</FeaturePreviewOff>
</FeaturePreview>
<ContextualbarResizable defaultWidth={contextualBar}>
<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
</ContextualbarResizable>
</FocusScope>
);
};

11
packages/ui-client/src/hooks/useFeaturePreviewList.ts
Unescape View File

@ -1,6 +1,6 @@
import type { TranslationKey } from '@rocket.chat/ui-contexts';
export type FeaturesAvailable = 'contextualbarResizable' | 'newNavigation' | 'secondarySidebar' | 'expandableMessageComposer';
export type FeaturesAvailable = 'newNavigation' | 'secondarySidebar' | 'expandableMessageComposer';
export type FeaturePreviewProps = {
name: FeaturesAvailable;
@ -19,15 +19,6 @@ export type FeaturePreviewProps = {
// TODO: Move the features preview array to another directory to be accessed from both BE and FE.
export const defaultFeaturesPreview: FeaturePreviewProps[] = [
{
name: 'contextualbarResizable',
i18n: 'Contextualbar_resizable',
description: 'Contextualbar_resizable_description',
group: 'Navigation',
imageUrl: 'images/featurePreview/resizable-contextual-bar.png',
value: false,
enabled: true,
},
{
name: 'newNavigation',
i18n: 'New_navigation',

880
packages/ui-voip/src/views/CallHistoryContextualbar/__snapshots__/CallHistoryContextualbar.spec.tsx.snap
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save