diff --git a/addons/rose/addon/components/rose/toolbar/index.hbs b/addons/rose/addon/components/rose/toolbar/index.hbs
new file mode 100644
index 000000000..084353050
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/index.hbs
@@ -0,0 +1,3 @@
+
+ {{yield}}
+
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/toolbar/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
new file mode 100644
index 000000000..dd9dbb015
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
@@ -0,0 +1,24 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+
+
+# Toolbar
+
+renders a toolbar
+
+```htmlbars
+
+
+```
+
+
+ {{
+ template: hbs`
+
+ toolbar
+
+ `,
+ }}
+
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index dd936e77a..f8161a2c6 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -18,3 +18,4 @@
@import 'message';
@import 'link-button';
@import 'badge';
+@import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_index.scss b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
new file mode 100644
index 000000000..c72d1654c
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
@@ -0,0 +1 @@
+@import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
new file mode 100644
index 000000000..cf6bd1491
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
@@ -0,0 +1,13 @@
+@use '../../variables/sizing';
+@use '../../variables/media';
+
+$xxs: sizing.rems(xxs); // 4
+$xxxxs: sizing.rems(xxxxs); // 1
+
+.rose-toolbar {
+ background-color: var(--ui-gray-subtler-6);
+
+ .rose-form {
+ padding: $xxs + $xxxxs;
+ }
+}
diff --git a/addons/rose/app/components/rose/toolbar.js b/addons/rose/app/components/rose/toolbar.js
new file mode 100644
index 000000000..bfd066fe9
--- /dev/null
+++ b/addons/rose/app/components/rose/toolbar.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/toolbar';
diff --git a/addons/rose/tests/integration/components/rose/toolbar-test.js b/addons/rose/tests/integration/components/rose/toolbar-test.js
new file mode 100644
index 000000000..9c91e6c7a
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/toolbar-test.js
@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/toolbar', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders', async function (assert) {
+ assert.expect(1);
+ await render(hbs``);
+ assert.ok(find('.rose-toolbar'));
+ });
+
+ test('it renders with attributes', async function (assert) {
+ assert.expect(1);
+ await render(hbs``);
+ assert.ok(find('#toolbar'));
+ });
+});
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index 297c68a70..01aa8f737 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -15,6 +15,18 @@
{{#if @model}}
+ {{#if (feature-flag 'filter')}}
+
+
+
+
+
+ {{/if}}
diff --git a/ui/admin/config/environment.js b/ui/admin/config/environment.js
index b515fc76a..771068764 100644
--- a/ui/admin/config/environment.js
+++ b/ui/admin/config/environment.js
@@ -132,6 +132,7 @@ module.exports = function (environment) {
// Enable features in development
ENV.featureFlags['capabilities'] = true;
+ ENV.featureFlags['filter'] = true;
}
if (environment === 'test') {
@@ -157,6 +158,7 @@ module.exports = function (environment) {
// Enable tests for development features
ENV.featureFlags['capabilities'] = true;
+ ENV.featureFlags['filter'] = true;
}
if (environment === 'production') {
diff --git a/ui/desktop/config/environment.js b/ui/desktop/config/environment.js
index 9c9f67b6e..f794097d2 100644
--- a/ui/desktop/config/environment.js
+++ b/ui/desktop/config/environment.js
@@ -81,6 +81,7 @@ module.exports = function (environment) {
// Enable features in development
ENV.featureFlags['capabilities'] = true;
+ ENV.featureFlags['filter'] = true;
}
if (environment === 'test') {
@@ -106,6 +107,7 @@ module.exports = function (environment) {
// Enable tests for development features
ENV.featureFlags['capabilities'] = true;
+ ENV.featureFlags['filter'] = true;
}
if (environment === 'production') {
diff --git a/yarn.lock b/yarn.lock
index 2a792869c..6b42005ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9590,9 +9590,9 @@ electron-rebuild@^2.0.3:
yargs "^16.0.0"
electron-to-chromium@^1.3.867:
- version "1.3.880"
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.880.tgz#58d1a298c5267f2faf440683d038c50ab39a6401"
- integrity sha512-iwIP/6WoeSimzUKJIQtjtpVDsK8Ir8qQCMXsUBwg+rxJR2Uh3wTNSbxoYRfs+3UWx/9MAnPIxVZCyWkm8MT0uw==
+ version "1.3.883"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.883.tgz#cc409921469b3aa6ab6efd65cc2a4375128bb703"
+ integrity sha512-goyjNx4wB9j911PBteb+AXNbErug7rJVkmDXWdw5SCVn2JlARBwsqucPkvp1h5mXWxHUbBRK3bwXTrqSxSiAIQ==
element-resize-detector@^1.2.2:
version "1.2.3"