diff --git a/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts b/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts index 4419c2232b..b5f54ddcb3 100644 --- a/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts +++ b/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts @@ -1,35 +1,59 @@ import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces' -export const MOCK_ENABLEMENT_AREA_ITEMS: IEnablementAreaItem[] = [ - { +export const MOCK_ENABLEMENT_AREA_ITEMS: Record = { + 'quick-guides': { type: EnablementAreaComponent.Group, id: 'quick-guides', label: 'Quick Guides', - children: [ - { + children: { + 'document-capabilities': { type: EnablementAreaComponent.InternalLink, id: 'document-capabilities', label: 'Document Capabilities', args: { - path: 'static/workbench/guides/document-capabilities.html', + path: 'static/workbench/quick-guides/document-capabilities.html', + }, + }, + 'working-with-json': { + type: EnablementAreaComponent.InternalLink, + id: 'working-with-json', + label: 'Working with JSON', + args: { + path: 'static/workbench/quick-guides/working-with-json.html', + }, + }, + 'working-with-hash': { + type: EnablementAreaComponent.InternalLink, + id: 'working-with-hash', + label: 'Working with HASH', + args: { + path: 'static/workbench/quick-guides/working-with-hash.html', }, } - ] + } }, - { + 'internal-page': { type: EnablementAreaComponent.InternalLink, id: 'internal-page', label: 'Internal Page', args: { - path: 'static/workbench/guides/document-capabilities.html' + path: 'static/workbench/quick-guides/document-capabilities.html' + }, + }, + 'second-internal-page': { + type: EnablementAreaComponent.InternalLink, + id: 'second-internal-page', + label: 'Second Internal Page', + args: { + path: 'static/workbench/quick-guides/document-capabilities.html' }, }, - { + 'manual': { type: EnablementAreaComponent.CodeButton, id: 'manual', label: 'Manual', args: { - path: 'static/workbench/scripts/manual.txt' + path: 'static/workbench/_scripts/manual.txt' }, } -] +} diff --git a/redisinsight/ui/src/packages/enablement-area/images/aggregations.png b/redisinsight/ui/src/packages/enablement-area/_images/aggregations.png similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/images/aggregations.png rename to redisinsight/ui/src/packages/enablement-area/_images/aggregations.png diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/aggregation-with-apply.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/aggregation-with-apply.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/aggregation-with-apply.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/aggregation-with-apply.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-and.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-and.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-and.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-and.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-geo-filter.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-geo-filter.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-geo-filter.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-geo-filter.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-or.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-or.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-or.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-or.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/create-hash-index.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/create-hash-index.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/create-hash-index.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/create-hash-index.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-create.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-create.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-create.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-create.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-delete.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-delete.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-delete.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-delete.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-read.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-read.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-read.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-read.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-update.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-update.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-update.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-update.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/exact-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/exact-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/exact-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/exact-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/field-specific-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/field-specific-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/field-specific-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/field-specific-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/fuzzy-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/fuzzy-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/fuzzy-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/fuzzy-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/index-info.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/index-info.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/index-info.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/index-info.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/list-all-indexes.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/list-all-indexes.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/list-all-indexes.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/list-all-indexes.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-and-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-and-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-and-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-and-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-or-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-or-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-or-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-or-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/numeric-range-query.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/numeric-range-query.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/numeric-range-query.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/numeric-range-query.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/tag-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/tag-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/tag-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/tag-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-and.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-and.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-and.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-and.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-geo-filter.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-geo-filter.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-geo-filter.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-geo-filter.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-or.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-or.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-or.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-or.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/create-json-index.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/create-json-index.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/create-json-index.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/create-json-index.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-create.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-create.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-create.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-create.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-delete.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-delete.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-delete.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-delete.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-read.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-read.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-read.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-read.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-update.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-update.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-update.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-update.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/exact-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/exact-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/exact-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/exact-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/field-specific-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/field-specific-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/field-specific-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/field-specific-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/fuzzy-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/fuzzy-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/fuzzy-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/fuzzy-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/group-and-sort-by-aggregation.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/group-and-sort-by-aggregation.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/group-and-sort-by-aggregation.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/group-and-sort-by-aggregation.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/index-info.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/index-info.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/index-info.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/index-info.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/list-all-indexes.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/list-all-indexes.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/list-all-indexes.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/list-all-indexes.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-and-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-and-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-and-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-and-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-or-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-or-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-or-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-or-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/numeric-range-query.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/numeric-range-query.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/numeric-range-query.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/numeric-range-query.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/tag-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/tag-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/tag-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/tag-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/manual.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/manual.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/manual.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/manual.txt diff --git a/redisinsight/ui/src/packages/enablement-area/enablement-area.json b/redisinsight/ui/src/packages/enablement-area/enablement-area.json index 68167458c6..cc1aafbb5b 100644 --- a/redisinsight/ui/src/packages/enablement-area/enablement-area.json +++ b/redisinsight/ui/src/packages/enablement-area/enablement-area.json @@ -1,5 +1,5 @@ -[ - { +{ + "quick-guides": { "type": "group", "id": "quick-guides", "label": "QUICK GUIDES", @@ -7,57 +7,57 @@ "withBorder": true, "initialIsOpen": true }, - "children": [ - { + "children": { + "document": { "type": "group", "id": "document", "label": "Document", "args": { "initialIsOpen": true }, - "children": [ - { + "children": { + "introduction": { "type": "internal-link", "id": "introduction", "label": "Introduction", "args": { - "path": "/static/workbench/guides/document/introduction.html" + "path": "/static/workbench/quick-guides/document/introduction.html" } }, - { + "working-with-hashes": { "type": "internal-link", "id": "working-with-hashes", "label": "Working with Hashes", "args": { - "path": "/static/workbench/guides/document/working-with-hashes.html" + "path": "/static/workbench/quick-guides/document/working-with-hashes.html" } }, - { + "working-with-json": { "type": "internal-link", "id": "working-with-json", "label": "Working with JSON", "args": { - "path": "/static/workbench/guides/document/working-with-json.html" + "path": "/static/workbench/quick-guides/document/working-with-json.html" } }, - { + "learn-more": { "type": "internal-link", "id": "learn-more", "label": "Learn More", "args": { - "path": "/static/workbench/guides/document/learn-more.html" + "path": "/static/workbench/quick-guides/document/learn-more.html" } } - ] + } } - ] + } }, - { + "manual": { "type": "code-button", "id": "manual", "label": "Manual", "args": { - "path": "/static/workbench/scripts/manual.txt" + "path": "/static/workbench/_scripts/manual.txt" } } -] +} diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/introduction.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/introduction.html similarity index 87% rename from redisinsight/ui/src/packages/enablement-area/guides/document/introduction.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/introduction.html index 8e01ece071..25f6334d8f 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/introduction.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/introduction.html @@ -67,19 +67,4 @@

PRE-REQUISITES

You could also create a free and ready to use instance on Redis Cloud.

-
-
- - Next: Working with Hashes - -
-
diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/learn-more.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/learn-more.html similarity index 76% rename from redisinsight/ui/src/packages/enablement-area/guides/document/learn-more.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/learn-more.html index ce1fa26ee2..e052e84ffb 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/learn-more.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/learn-more.html @@ -37,19 +37,4 @@

Tutorials

-
-
- - Previous: Working with JSON - -
-
diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-hashes.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-hashes.html similarity index 52% rename from redisinsight/ui/src/packages/enablement-area/guides/document/working-with-hashes.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-hashes.html index e0aa902fa5..fbe1b031b8 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-hashes.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-hashes.html @@ -8,25 +8,25 @@
@@ -37,19 +37,19 @@
@@ -60,114 +60,77 @@
-
-
-
- - - Previous: -
- Introduction - - -
-
- - - Next: -
- Working with JSON - - -
-
-
diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-json.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-json.html similarity index 52% rename from redisinsight/ui/src/packages/enablement-area/guides/document/working-with-json.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-json.html index fd6d327e81..e228f992af 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-json.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-json.html @@ -8,25 +8,25 @@
@@ -37,19 +37,19 @@
@@ -60,108 +60,71 @@
-
-
-
- - - Previous: -
- Working with Hashes - - -
-
- - - Next: -
- Learn More - - -
-
-
diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx index 4689e82561..d846421de4 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx @@ -29,7 +29,8 @@ jest.mock('uiSrc/slices/workbench/wb-enablement-area', () => { describe('EnablementArea', () => { it('should render', () => { - expect(render()).toBeTruthy() + expect(render()) + .toBeTruthy() }) it('should render loading', () => { @@ -53,7 +54,7 @@ describe('EnablementArea', () => { expect(loaderEl).not.toBeInTheDocument() expect(treeViewEl).toBeInTheDocument() - expect(treeViewEl?.childNodes.length).toEqual(MOCK_ENABLEMENT_AREA_ITEMS.length) + expect(treeViewEl?.childNodes.length).toEqual(Object.values(MOCK_ENABLEMENT_AREA_ITEMS).length) }) it('should render Group component', () => { const item = { @@ -66,7 +67,7 @@ describe('EnablementArea', () => { id: 'document-capabilities', label: 'Document Capabilities', args: { - path: 'static/workbench/guides/document-capabilities.html' + path: 'static/workbench/quick-guides/document-capabilities.html' }, } ] @@ -75,7 +76,7 @@ describe('EnablementArea', () => { const { queryByTestId } = render( ) @@ -89,13 +90,13 @@ describe('EnablementArea', () => { id: 'manual', label: 'Manual', args: { - path: 'static/workbench/scripts/manual.txt' + path: 'static/workbench/_scripts/manual.txt' }, } const { queryByTestId } = render( ) const codeButtonEl = queryByTestId(`preselect-${item.label}`) @@ -108,13 +109,13 @@ describe('EnablementArea', () => { id: 'internal-page', label: 'Internal Page', args: { - path: 'static/workbench/guides/document-capabilities.html', + path: 'static/workbench/quick-guides/document-capabilities.html', } } const { queryByTestId } = render( ) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx index 24f92a1ee9..4e22440a2b 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx @@ -19,7 +19,7 @@ import './styles.scss' import styles from './styles.module.scss' export interface Props { - items: IEnablementAreaItem[]; + items: Record; loading: boolean; openScript: (script: string, path: string) => void; openInternalPage: (page: IInternalPage) => void; @@ -71,13 +71,13 @@ const EnablementArea = ({ items, openScript, loading }: Props) => { label={label} {...args} > - {renderTreeView(children || [])} + {renderTreeView(Object.values(children || {}) || [])} ) case EnablementAreaComponent.CodeButton: return args?.path - ? - : openScript(args?.content || '', '')} label={label} {...args} /> + ?
+ :
openScript(args?.content || '', '')} label={label} {...args} />
case EnablementAreaComponent.InternalLink: return ( @@ -91,7 +91,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => { const renderTreeView = (elements: IEnablementAreaItem[]) => ( elements?.map((item) => ( -
+
{renderSwitch(item)}
))) @@ -110,7 +110,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => { flush className={cx(styles.innerContainer)} > - {renderTreeView(items)} + {renderTreeView(Object.values(items))} )}
() - -describe('Carousel', () => { - it('should render initial slide and pagination by using React portal', () => { - const { container, queryByTestId } = render( -
- -
Slide 1
-
Slide 2
- -
-
- ) - - expect(container).toBeTruthy() - expect(queryByTestId('slide-1')).toBeInTheDocument() - expect(queryByTestId('slide-2')).not.toBeInTheDocument() - expect(container?.querySelector('.pagination')).toBeInTheDocument() - }) - it('should switch slide', () => { - const { queryByTestId, container } = render( -
- -
Slide 1
-
Slide 2
- -
-
- ) - - fireEvent.click(container?.querySelector('[data-test-subj="pagination-button-next"]') as Element) - expect(queryByTestId('slide-1')).not.toBeInTheDocument() - expect(queryByTestId('slide-2')).toBeInTheDocument() - }) -}) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx deleted file mode 100644 index f9ca14ec05..0000000000 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import ReactDOM from 'react-dom' -import React, { useEffect, useState } from 'react' -import { EuiPagination } from '@elastic/eui' - -import styles from './styles.module.scss' - -export interface Props { - children: React.ReactElement[]; -} -const Carousel = ({ children }: Props) => { - const [slideIndex, setSlideIndex] = useState(0) - const [slides, setSlides] = useState([]) - - useEffect(() => { - // Get items only with specified key attribute - setSlides(children.filter((element) => element?.key && element.key.toString().startsWith('slide'))) - }, []) - - const Pagination = () => { - const footerEl = document.getElementById('internalPageFooter') - if (footerEl) { - return ReactDOM.createPortal( -
- setSlideIndex(slide)} - /> -
, - footerEl - ) - } - return null - } - return ( -
- {slides[slideIndex]} - {slides.length && } -
- ) -} - -export default Carousel diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts deleted file mode 100644 index 349416af45..0000000000 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Carousel from './Carousel' - -export default Carousel diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss deleted file mode 100644 index 6e4d396369..0000000000 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -.container { - margin-bottom: 40px; -} - -.pagination { - width: 100%; - display: flex; - justify-content: center; -} diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx index ab3aa7a35f..0e4bd17999 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx @@ -17,7 +17,7 @@ const CodeButton = ({ onClick, label, isLoading, ...rest }: Props) => ( onClick={onClick} fullWidth color="secondary" - contentProps={{ className: styles.button }} + className={styles.button} textProps={{ className: styles.buttonText }} data-testid={`preselect-${label}`} {...rest} diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss index 32424ff45e..645b37b7cd 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss @@ -1,5 +1,15 @@ +@import '@elastic/eui/src/global_styling/index'; + .button { justify-content: space-between; + &[class*='euiButton--secondary']:not([class*='isDisabled']) { + &:hover, + &:focus, + &:focus-within { + background-color: var(--euiColorSecondary) !important; + border-color: var(--euiColorSecondary) !important; + } + } &:not(:hover) { span { color: var(--euiTextSubduedColor); diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss index f11fee8396..f59a9a1f2f 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss @@ -20,7 +20,7 @@ .euiAccordion-isOpen { min-width: 100%; &.withBorder { - border-color: var(--separatorColor) + border-color: var(--separatorColor); } } .euiAccordion__triggerWrapper, .euiAccordion__childWrapper { @@ -34,9 +34,15 @@ button { padding: 3px 8px; line-height: 24px; + max-height: 30px; + &:hover { + background-color: var(--hoverInListColorDarken); + color: var(--euiTextColor) + } } .euiListGroupItem__label { - line-height: 20px; + font: normal normal normal 14px/20px Graphik; + letter-spacing: -0.14px; } } } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss index b573bfa744..d1c4c1ac6e 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss @@ -31,4 +31,5 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + line-height: 24px; } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx index d527998e2a..908175a75c 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx @@ -1,12 +1,10 @@ import React, { useMemo, useRef, useEffect } from 'react' import { - EuiFlexGroup, - EuiFlexItem, EuiFlyoutHeader, - EuiTitle, EuiText, - EuiButtonIcon, + EuiButtonEmpty, EuiLoadingContent, + EuiHorizontalRule, } from '@elastic/eui' import JsxParser from 'react-jsx-parser' import cx from 'classnames' @@ -14,11 +12,12 @@ import { debounce } from 'lodash' import { LazyCodeButton, - Carousel, InternalLink, Image, - EmptyPrompt + EmptyPrompt, + Pagination } from 'uiSrc/pages/workbench/components/enablament-area/EnablementArea/components' +import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' import styles from './styles.module.scss' import './styles.scss' @@ -32,10 +31,12 @@ export interface Props { error?: string; scrollTop?: number; onScroll?: (top: number) => void; + id: string; + pagination?: IEnablementAreaItem[] } const InternalPage = (props: Props) => { - const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop } = props - const components: any = { LazyCodeButton, Carousel, InternalLink, Image } + const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop, pagination, id } = props + const components: any = { LazyCodeButton, InternalLink, Image } const containerRef = useRef(null) const handleScroll = debounce(() => { if (containerRef.current && onScroll) { @@ -61,37 +62,41 @@ const InternalPage = (props: Props) => { ), [content]) return ( -
+
- - - - - -
- {backTitle} -
- - - - - - {title?.toUpperCase()} - - - +
+ + {backTitle} + +
+
+ +
+
+ {title?.toUpperCase()} +
-
+
{ isLoading && } { !isLoading && error && } { !isLoading && !error && contentComponent }
-
+ {!!pagination?.length && ( + <> +
+ +
+
+ +
+ + )}
) } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss index 80eec0a666..84f403651a 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss @@ -3,36 +3,59 @@ @import '@elastic/eui/src/global_styling/index'; .container { - @include euiScrollBar; - padding: 10px 12px 0 12px !important; - overflow: auto; + min-height: 1px; height: 100%; background-color: var(--euiColorEmptyShade); text-align: left; letter-spacing: 0; color: var(--euiTextSubduedColor) !important; position: relative; + display: flex; + flex-direction: column; } .header { - position: fixed; - left: 0; - top: 0; - padding: 10px 4px; + padding: 6px 0; width: 100%; background-color: var(--euiColorEmptyShade); + & > div { + width: 100%; + padding: 0 18px; + } } .footer { - position: fixed; - left: 0; - bottom: 0; width: 100%; background-color: var(--euiColorEmptyShade); } - - +.pageTitle { + margin: 8px 0 4px; + font: normal normal 500 14px/24px Graphik, sans-serif; +} +.backButton { + padding: 0 4px; + max-height: 30px; + line-height: 24px; + width: 100%; + font: normal normal 14px/24px Graphik, sans-serif !important; + text-decoration: none; + color: var(--euiTextSubduedColor) !important; + & > span { + justify-content: flex-start; + } + &:hover { + background-color: var(--hoverInListColorDarken); + color: var(--euiTextColor) !important; + text-decoration: none !important; + } +} .content { - padding: 4px 0; + @include euiScrollBar; + padding: 8px 12px 4px 18px !important; + overflow: auto; + display: flex; + flex-direction: column; + flex: 1; } + diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss index b7c4ffdeb8..c9f706c717 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss @@ -1,13 +1,22 @@ +@mixin font{ + font: normal normal normal 14px/24px Graphik; + letter-spacing: -0.14px; + @media only screen and (max-width: 992px) { + font: normal normal normal 12px/18px Graphik; + letter-spacing: -0.12px; + } +} + .enablement-area__page { height: 100%; - font: normal normal normal 12px/18px Graphik; + @include font; letter-spacing: -0.12px; h1, h2, h3, h4, h5, h6 { color: var(--euiColorGhost); - font: normal normal medium 12px/16px Graphik; + font: normal normal 500 14px/24px Graphik; margin-bottom: 12px; - letter-spacing: -0.12px; + letter-spacing: 0; } p { @@ -22,7 +31,7 @@ } } b, strong { - font: normal normal normal 12px/16px Graphik; + @include font; letter-spacing: -0.12px; color: var(--htmlColor); } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx index 22ee986445..04effd5fd8 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react' import { startCase } from 'lodash' import { useDispatch, useSelector } from 'react-redux' import axios from 'axios' + import { getApiErrorMessage, isStatusSuccessful } from 'uiSrc/utils' import { resourcesService } from 'uiSrc/services' import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex' @@ -11,9 +12,18 @@ import { appContextWorkbenchEA, setWorkbenchEAGuideScrollTop } from 'uiSrc/slices/app/context' -import { getFileInfo } from '../../utils/getFileInfo' +import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' +import { workbenchEnablementAreaSelector } from 'uiSrc/slices/workbench/wb-enablement-area' + +import { getFileInfo, getPagesInsideGroup, IFileInfo } from '../../utils/getFileInfo' import InternalPage from '../InternalPage' +interface IPageData extends IFileInfo { + content: string; + relatedPages?: IEnablementAreaItem[]; +} +const DEFAULT_PAGE_DATA = { content: '', name: '', parent: '', extension: '', location: '', relatedPages: [] } + export interface Props { onClose: () => void; title?: string; @@ -22,23 +32,25 @@ export interface Props { const LazyInternalPage = ({ onClose, title, path }: Props) => { const { guideScrollTop } = useSelector(appContextWorkbenchEA) + const enablementArea = useSelector(workbenchEnablementAreaSelector) const [isLoading, setLoading] = useState(false) const [error, setError] = useState('') - const [content, setContent] = useState('') - const pageInfo = getFileInfo(path) + const [pageData, setPageData] = useState(DEFAULT_PAGE_DATA) const dispatch = useDispatch() const fetchService = IS_ABSOLUTE_PATH.test(path) ? axios : resourcesService const loadContent = async () => { setLoading(true) setError('') - setContent('') + const pageInfo = getFileInfo(path) + const relatedPages = getPagesInsideGroup(enablementArea.items, pageInfo.location) + setPageData({ ...DEFAULT_PAGE_DATA, ...pageInfo, relatedPages }) try { const { data, status } = await fetchService.get(path) if (isStatusSuccessful(status)) { dispatch(setWorkbenchEAGuide(path)) + setPageData((prevState) => ({ ...prevState, content: data })) setLoading(false) - setContent(data) } } catch (error) { setLoading(false) @@ -50,9 +62,11 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => { useEffect(() => { (async function () { - await loadContent() + if (!enablementArea.loading) { + await loadContent() + } }()) - }, [path]) + }, [path, enablementArea.loading]) const handlePageScroll = (top: number) => { dispatch(setWorkbenchEAGuideScrollTop(top)) @@ -60,14 +74,16 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => { return ( ) } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx new file mode 100644 index 0000000000..96cdbd240d --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx @@ -0,0 +1,75 @@ +import React from 'react' +import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils' +import { MOCK_ENABLEMENT_AREA_ITEMS } from 'uiSrc/constants' +import { defaultValue, EnablementAreaProvider } from 'uiSrc/pages/workbench/contexts/enablementAreaContext' +import Pagination from './Pagination' + +const paginationItems = Object.values(MOCK_ENABLEMENT_AREA_ITEMS['quick-guides']?.children || {}) + +describe('Pagination', () => { + it('should render', () => { + const component = render() + const { queryByTestId } = component + + expect(component).toBeTruthy() + expect(queryByTestId('enablement-area__prev-page-btn')).not.toBeInTheDocument() + expect(queryByTestId('enablement-area__next-page-btn')).toBeInTheDocument() + }) + it('should correctly open popover', () => { + const { queryByTestId } = render( + + ) + fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn')) + const popover = queryByTestId('enablement-area__pagination-popover') + + expect(popover).toBeInTheDocument() + expect(popover?.querySelectorAll('.pagesItem').length).toEqual(paginationItems.length) + expect(popover?.querySelector('.pagesItemActive')).toHaveTextContent(paginationItems[0].label) + }) + it('should correctly open next page', () => { + const openPage = jest.fn() + const pageIndex = 0 + + render( + + + + ) + fireEvent.click(screen.getByTestId('enablement-area__next-page-btn')) + + expect(openPage).toBeCalledWith({ path: paginationItems[pageIndex + 1]?.args?.path }) + }) + it('should correctly open previous page', () => { + const openPage = jest.fn() + const pageIndex = 1 + + render( + + + + ) + fireEvent.click(screen.getByTestId('enablement-area__prev-page-btn')) + + expect(openPage).toBeCalledWith({ path: paginationItems[pageIndex - 1]?.args?.path }) + }) + it('should correctly open by using pagination popover', async () => { + const openPage = jest.fn() + const { queryByTestId } = render( + + + + ) + + fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn')) + const popover = queryByTestId('enablement-area__pagination-popover') + await waitFor(() => { + popover?.querySelectorAll('.pagesItem').forEach(async (el) => { + fireEvent.click(el) + }) + }) + + expect(openPage).toBeCalledTimes(paginationItems.length - 1) // -1 because active item should not be clickable + expect(openPage) + .lastCalledWith({ path: paginationItems[paginationItems.length - 1]?.args?.path }) + }) +}) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx new file mode 100644 index 0000000000..5f6f9e168d --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx @@ -0,0 +1,129 @@ +import React, { useContext, useEffect, useState } from 'react' +import { + EuiButton, + EuiContextMenuPanel, + EuiContextMenuItem, + EuiPopover +} from '@elastic/eui' +import cx from 'classnames' +import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' +import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext' + +import styles from './styles.module.scss' + +export interface Props { + items: IEnablementAreaItem[]; + activePageId?: string; + compressed?: boolean; +} + +const Pagination = ({ items = [], activePageId, compressed }: Props) => { + const [isPopoverOpen, setPopover] = useState(false) + const [activePage, setActivePage] = useState(0) + const { openPage } = useContext(EnablementAreaContext) + + useEffect(() => { + if (activePageId) { + const index = items.findIndex((item) => item.id === activePageId) + setActivePage(index) + } + }, [activePageId]) + + const togglePopover = () => { + setPopover(!isPopoverOpen) + } + + const closePopover = () => { + setPopover(false) + } + + const handleOpenPage = (index: number) => { + const path = items[index]?.args?.path + closePopover() + if (index !== activePage && openPage && path) { + openPage({ path }) + } + } + + const pages = items.map((item, index) => ( + handleOpenPage(index)} + > + {item.label} + + )) + + const PagesControl = () => ( + + {`${activePage + 1} of ${items.length}`} + + )} + isOpen={isPopoverOpen} + closePopover={closePopover} + panelClassName={styles.popover} + panelPaddingSize="none" + > + + + ) + + return ( +
+
+ {activePage > 0 && ( + handleOpenPage(activePage - 1)} + size={compressed ? 's' : 'm'} + className={cx(styles.prevPage, { [styles.prevPageCompressed]: compressed })} + > + Back + + )} +
+
+ +
+
+ {(activePage < items.length - 1) && ( + handleOpenPage(activePage + 1)} + className={cx(styles.nextPage, { [styles.nextPageCompressed]: compressed })} + size={compressed ? 's' : 'm'} + > + Next + + )} +
+
+ ) +} + +export default Pagination diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/index.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/index.ts new file mode 100644 index 0000000000..1466412190 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/index.ts @@ -0,0 +1,3 @@ +import Pagination from './Pagination' + +export default Pagination diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss new file mode 100644 index 0000000000..aae4155116 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss @@ -0,0 +1,98 @@ +@import '@elastic/eui/src/global_styling/index'; + +.pagination { + padding: 12px 18px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid var(--separatorColor); + & > div:first-of-type,& > div:last-of-type { + min-width: 94px; + } +} + +.paginationCompressed { + padding: 8px 6px; + & > div:first-of-type, & > div:last-of-type { + min-width: 70px; + } +} + +.panel { + padding: 1px 0; + button:first-of-type { + border-radius: 3px 3px 0 0; + } + button:last-of-type { + border-radius: 0 0 2px 2px; + } +} + +.popover { + border: 1px solid var(--euiColorPrimary) !important; + [class~=euiPopover__panelArrow] { + &:before { + border-top-color: var(--euiColorPrimary) !important; + } + } + [class~=euiPopover__panelArrow--bottom] { + &:before { + border-bottom-color: var(--euiColorPrimary) !important; + } + } +} + +.popoverButton { + text-decoration: underline; + color: var(--euiTextSubduedColor); + &:hover, &:focus { + color: var(--euiTextColor); + } + font: normal normal 500 13px/18px Graphik, sans-serif; +} + +.pagesItem { + padding: 4px 18px !important; + background-color: transparent; + text-decoration: none !important; + font: normal normal normal 14px/30px Graphik, sans-serif; + letter-spacing: 0; + span { + color: var(--euiTextSubduedColor); + } + &:focus { + background-color: transparent !important; + } + &:hover { + background-color: var(--hoverInListColorLight) !important; + span { + color: inherit; + } + } +} + +.pagesItemActive, .pagesItemActive:hover, .pagesItemActive:focus { + background-color: var(--euiColorPrimary) !important; + cursor: default !important; + span { + color: var(--euiColorEmptyShade); + } +} + +.prevPage, .nextPage { + & > span { + justify-content: flex-start; + } +} + +.prevPageCompressed { + & > span { + padding: 0 12px 0 4px !important; + } +} +.nextPageCompressed { + & > span { + padding: 0 4px 0 12px !important; + } +} diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts index f2f8c160d4..651a69e594 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts @@ -1,4 +1,3 @@ -import Carousel from './Carousel' import CodeButton from './CodeButton' import EmptyPrompt from './EmptyPrompt' import Group from './Group' @@ -8,9 +7,9 @@ import InternalPage from './InternalPage' import LazyCodeButton from './LazyCodeButton' import LazyInternalPage from './LazyInternalPage' import PlainText from './PlainText' +import Pagination from './Pagination' export { - Carousel, CodeButton, EmptyPrompt, Group, @@ -20,4 +19,5 @@ export { LazyCodeButton, LazyInternalPage, PlainText, + Pagination, } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss index 9dfdd67aa4..84a2313734 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss @@ -2,10 +2,11 @@ @import '@elastic/eui/src/components/table/mixins'; @import '@elastic/eui/src/global_styling/index'; +$paddingHorizontal: 18px; .container { overflow: hidden; height: 100%; - padding: 0 8px; + padding: 0 $paddingHorizontal; background-color: var(--euiColorEmptyShade); border: 1px solid var(--euiColorLightShade) !important; } @@ -20,13 +21,7 @@ color: var(--euiTextSubduedColor) !important; } -.item { - padding: 6px 0; - min-width: 100%; -} - .internalPage { - padding-top: 60px; width: 100%; max-width: 100%; position: absolute; @@ -39,5 +34,5 @@ } .internalPageVisible { - transform: translateX(-8px); + transform: translateX(-$paddingHorizontal); } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts index 271ccec5d6..c9f5eb4286 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts @@ -1,41 +1,42 @@ -import { getFileInfo } from './getFileInfo' +import { MOCK_ENABLEMENT_AREA_ITEMS } from 'uiSrc/constants' +import { getFileInfo, getPagesInsideGroup } from './getFileInfo' const getFileInfoTests = [ { - input: '/parent-folder/file-name.txt', - expected: { title: 'file name', parent: 'parent folder', extension: 'txt' } + input: 'static/workbench/quick-guides/file-name.txt', + expected: { name: 'file-name', parent: 'quick guides', extension: 'txt', location: '/static/workbench/quick-guides' } }, { input: 'parent_folder\\file_name.txt', - expected: { title: 'file name', parent: 'parent folder', extension: 'txt' } + expected: { name: 'file_name', parent: 'parent folder', extension: 'txt', location: '/parent_folder' } }, { input: 'https://domen.com/workbench/enablement-area/introduction.html', - expected: { title: 'introduction', parent: 'enablement area', extension: 'html' } + expected: { name: 'introduction', parent: 'enablement area', extension: 'html', location: '/workbench/enablement-area' } }, { input: 'https://domen.com/introduction.html', - expected: { title: 'introduction', parent: '', extension: 'html' } + expected: { name: 'introduction', parent: '', extension: 'html', location: '' } }, { input: '/introduction.html', - expected: { title: 'introduction', parent: '', extension: 'html' } + expected: { name: 'introduction', parent: '', extension: 'html', location: '' } }, { input: '//parent/markdown.md', - expected: { title: '', parent: '', extension: '' } + expected: { name: '', parent: '', extension: '', location: '' } }, { input: '/file.txt', - expected: { title: 'file', parent: '', extension: 'txt' } + expected: { name: 'file', parent: '', extension: 'txt', location: '' } }, { input: '', - expected: { title: '', parent: '', extension: '' } + expected: { name: '', parent: '', extension: '', location: '' } }, { input: '/', - expected: { title: '', parent: '', extension: '' } + expected: { name: '', parent: '', extension: '', location: '' } }, ] @@ -48,3 +49,33 @@ describe('getFileInfo', () => { } ) }) + +const getPagesInsideGroupTests = [ + { + input: [MOCK_ENABLEMENT_AREA_ITEMS, '/static/workbench/quick-guides'], + expected: Object.values(MOCK_ENABLEMENT_AREA_ITEMS['quick-guides'].children || {}) + }, + { + input: [MOCK_ENABLEMENT_AREA_ITEMS, '/static/workbench/'], + expected: [MOCK_ENABLEMENT_AREA_ITEMS['internal-page'], MOCK_ENABLEMENT_AREA_ITEMS['second-internal-page']] + }, + { + input: [MOCK_ENABLEMENT_AREA_ITEMS, 'https://domen.com/workbench/enablement-area/'], + expected: [] + }, + { + input: [], + expected: [] + }, +] + +describe('getPagesInsideGroup', () => { + test.each(getPagesInsideGroupTests)( + '%j', + ({ input, expected }) => { + // @ts-ignore + const result = getPagesInsideGroup(...input) + expect(result).toEqual(expected) + } + ) +}) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts index 545139b93f..e271d0efbd 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts @@ -1,22 +1,27 @@ +import { get } from 'lodash' import { API_URL } from 'uiSrc/constants' import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex' +import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces' -interface IFileInfo { +export interface IFileInfo { extension: string; - title: string; + name: string; parent: string; + location: string; } export const getFileInfo = (path: string): IFileInfo => { - const result = { extension: '', title: '', parent: '' } + const result: IFileInfo = { extension: '', name: '', parent: '', location: '' } try { const url = IS_ABSOLUTE_PATH.test(path) ? new URL(path) : new URL(path, API_URL) const pathNames = url.pathname.split('/') const file = pathNames.pop() || '' - const [fileName, extension] = file.split('.') + + result.location = pathNames.join('/') const parent = pathNames.pop() || '' + const [fileName, extension] = file.split('.') if (fileName) { - result.title = fileName.replace(/[-_]+/g, ' ') + result.name = fileName } if (extension) { result.extension = extension @@ -29,3 +34,31 @@ export const getFileInfo = (path: string): IFileInfo => { return result } } + +const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench|enablement-area)\// +const EA_STATIC_ROOT_PATH = /^\/?static\/(workbench|enablement-area)\/?$/ + +export const getPagesInsideGroup = ( + structure: Record, + path: string +): IEnablementAreaItem[] => { + try { + if (EA_STATIC_PATH_REGEX.test(path)) { + let groupPath = path.replace(EA_STATIC_PATH_REGEX, '') + let groupChildren + if (!EA_STATIC_ROOT_PATH.test(path)) { + groupPath = groupPath.replace('/', '.children.') + groupChildren = get(structure, groupPath, undefined)?.children + } else { + groupChildren = structure + } + if (groupChildren) { + return Object.values(groupChildren) + .filter((item) => item.type === EnablementAreaComponent.InternalLink) + } + } + return [] + } catch (e) { + return [] + } +} diff --git a/redisinsight/ui/src/slices/interfaces/workbench.ts b/redisinsight/ui/src/slices/interfaces/workbench.ts index f0c3ae8baf..ff786c27ce 100644 --- a/redisinsight/ui/src/slices/interfaces/workbench.ts +++ b/redisinsight/ui/src/slices/interfaces/workbench.ts @@ -22,12 +22,12 @@ export interface IEnablementAreaItem { id: string, type: EnablementAreaComponent, label: string, - children?: IEnablementAreaItem[], + children?: Record, args?: Record, } export interface StateWorkbenchEnablementArea { loading: boolean; error: string; - items: IEnablementAreaItem[]; + items: Record; } diff --git a/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts b/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts index 27fb1861c8..23aeeddd4e 100644 --- a/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts +++ b/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts @@ -61,7 +61,7 @@ describe('slices', () => { describe('getWBEnablementAreaSuccess', () => { it('should properly set state after success', () => { // Arrange - const items: IEnablementAreaItem[] = MOCK_ENABLEMENT_AREA_ITEMS + const items: Record = MOCK_ENABLEMENT_AREA_ITEMS const state = { ...initialState, items, diff --git a/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts b/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts index a570b34aa1..bae21f1897 100644 --- a/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts +++ b/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts @@ -6,8 +6,8 @@ import { EnablementAreaComponent, IEnablementAreaItem, StateWorkbenchEnablementA import { AppDispatch, RootState } from '../store' -export const defaultItems: IEnablementAreaItem[] = [ - { +export const defaultItems: Record = { + manual: { type: EnablementAreaComponent.CodeButton, id: 'manual', label: 'Manual', @@ -15,11 +15,11 @@ export const defaultItems: IEnablementAreaItem[] = [ content: MONACO_MANUAL, } } -] +} export const initialState: StateWorkbenchEnablementArea = { loading: false, error: '', - items: [], + items: {}, } // A slice for recipes @@ -61,7 +61,8 @@ export function fetchEnablementArea(onSuccessAction?: () => void, onFailAction?: dispatch(getWBEnablementArea()) try { - const { data, status } = await resourcesService.get(ApiEndpoints.ENABLEMENT_AREA) + const { data, status } = await resourcesService + .get>(ApiEndpoints.ENABLEMENT_AREA) if (isStatusSuccessful(status)) { dispatch(getWBEnablementAreaSuccess(data)) diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss index f808273d44..732506a7e5 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss @@ -84,6 +84,7 @@ --controlsLabelColor: #{$controlsLabelColor}; --hoverInListColor: #{$hoverInListColor}; --hoverInListColorLight: #{$hoverInListColorLight}; + --hoverInListColorDarken: #{$hoverInListColorDarken}; --externalLinkColor: #{$externalLinkColor}; --externalLinkTooltipColor: #{$externalLinkTooltipColor}; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss index 9530883b9a..a7fd414d57 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss @@ -61,6 +61,7 @@ $buttonDangerHoverColor: #E8524A; $hoverInListColor: #070707; $hoverInListColorLight: #465282; +$hoverInListColorDarken: #292F47; $textColorShade: #b5b6c0; $cliOutputResponseColor: #ffffff; $cliOutputResponseFailColor: #e06c75; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss index ce0bb6deae..314f4df6f6 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss @@ -86,6 +86,7 @@ --controlsLabelHoverColor: #{$controlsLabelHoverColor}; --hoverInListColor: #{$hoverInListColor}; --hoverInListColorLight: #{$hoverInListColor}; + --hoverInListColorDarken: #{$hoverInListColorLight}; --externalLinkColor: #{$externalLinkColor}; --externalLinkTooltipColor: #{$externalLinkTooltipColor};