From ab727d509962f435e042a0b16f6a13d0e6b9b795 Mon Sep 17 00:00:00 2001
From: Christian Karidas <105549337+chriskari@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:21:54 +0200
Subject: [PATCH] UI5 Tokens (#2578)

* replaced Tokens and adjusted css

* bump deployment

* fix namespace tests

* fix component tests

* remove unnecessary ts-ignore
---
 resources/backend/deployment.yaml             |  2 +-
 resources/web/deployment.yaml                 |  2 +-
 .../components/components.tsx                 | 20 ++++++-----
 src/shared/components/Labels/Labels.js        | 15 ++++-----
 src/shared/components/Labels/Labels.scss      | 12 +++----
 .../components/Labels/test/Labels.test.js     |  6 ++--
 .../Selector/tests/Selector.test.js           | 16 +++++----
 src/shared/components/Tokens.js               | 16 ++++-----
 src/styles/index.scss                         | 33 -------------------
 .../test-protected-resources.spec.js          |  2 +-
 ...reduced-permissions--configuration.spec.js |  2 +-
 .../test-reduced-permissions.spec.js          |  4 ++-
 .../tests/namespace/test-replica-sets.spec.js |  4 ++-
 13 files changed, 51 insertions(+), 83 deletions(-)

diff --git a/resources/backend/deployment.yaml b/resources/backend/deployment.yaml
index f066be5928..1b081b9080 100644
--- a/resources/backend/deployment.yaml
+++ b/resources/backend/deployment.yaml
@@ -20,7 +20,7 @@ spec:
     spec:
       containers:
         - name: backend
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2579
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2578
           imagePullPolicy: Always
           resources:
             limits:
diff --git a/resources/web/deployment.yaml b/resources/web/deployment.yaml
index 0cc66877b7..19befc6ddb 100644
--- a/resources/web/deployment.yaml
+++ b/resources/web/deployment.yaml
@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2579
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2578
           imagePullPolicy: Always
           resources:
             requests:
diff --git a/src/command-pallette/CommandPalletteUI/components/components.tsx b/src/command-pallette/CommandPalletteUI/components/components.tsx
index 8e238aa617..4d0ff4a3b6 100644
--- a/src/command-pallette/CommandPalletteUI/components/components.tsx
+++ b/src/command-pallette/CommandPalletteUI/components/components.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Button } from '@ui5/webcomponents-react';
-import { Token } from 'fundamental-react';
+import { Button, Icon, Token } from '@ui5/webcomponents-react';
 import { Trans, useTranslation } from 'react-i18next';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 import './components.scss';
@@ -46,13 +45,16 @@ export function NamespaceContextDisplay({
     <div className="namespace-context">
       <span className="namespace-name">{t('namespaces.name_singular')}:</span>
       <Token
-        // @ts-ignore fd-react types are wrong yet again
-        buttonLabel={t('command-palette.search.remove-ns-context')}
-        className="y-fd-token y-fd-token--no-button y-fd-token--gap fd-margin-end--tiny fd-margin-begin--tiny"
-        onClick={() => setNamespaceContext(null)}
-      >
-        {namespaceContext}
-      </Token>
+        className="fd-margin-end--tiny fd-margin-begin--tiny"
+        text={namespaceContext}
+        closeIcon={
+          <Icon
+            name="decline"
+            onClick={() => setNamespaceContext(null)}
+            aria-label={t('command-palette.search.remove-ns-context')}
+          />
+        }
+      />
     </div>
   );
 }
diff --git a/src/shared/components/Labels/Labels.js b/src/shared/components/Labels/Labels.js
index 1c1c7de921..eeb2a4a4a6 100644
--- a/src/shared/components/Labels/Labels.js
+++ b/src/shared/components/Labels/Labels.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
+import { Token } from '@ui5/webcomponents-react';
 import './Labels.scss';
 
 const SHORTENING_TRESHOLD = 60;
@@ -25,23 +26,19 @@ export const Labels = ({
   return (
     <div className={classNames('labels', className)}>
       {separatedLabels.map((label, id) => (
-        <span
+        <Token
           aria-label={label}
-          className="fd-token fd-token--readonly"
           key={id}
+          className="token fd-margin-end--tiny"
+          readOnly
+          text={label}
           title={
             (shortenLongLabels &&
               label.length > SHORTENING_TRESHOLD &&
               label) ||
             undefined
           }
-        >
-          <span className="fd-token__text fd-has-font-size-small">
-            {shortenLongLabels && label.length > SHORTENING_TRESHOLD
-              ? shortenLabel(label)
-              : label}
-          </span>
-        </span>
+        />
       ))}
     </div>
   );
diff --git a/src/shared/components/Labels/Labels.scss b/src/shared/components/Labels/Labels.scss
index 624dd240e7..f72f190f88 100644
--- a/src/shared/components/Labels/Labels.scss
+++ b/src/shared/components/Labels/Labels.scss
@@ -1,13 +1,9 @@
 .labels {
   display: flex;
   flex-wrap: wrap;
+}
 
-  .fd-token {
-    margin-bottom: 4px;
-    margin-right: 4px;
-    white-space: normal;
-    height: auto;
-    line-height: 1rem;
-    padding: 0.25rem 0.4rem !important;
-  }
+.token {
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
diff --git a/src/shared/components/Labels/test/Labels.test.js b/src/shared/components/Labels/test/Labels.test.js
index 5fa8562063..ca43f53e73 100644
--- a/src/shared/components/Labels/test/Labels.test.js
+++ b/src/shared/components/Labels/test/Labels.test.js
@@ -4,10 +4,12 @@ import { render } from '@testing-library/react';
 
 describe('Labels', () => {
   it('Labels should render with labels', () => {
-    const { queryByText } = render(
+    const { container } = render(
       <Labels labels={{ testLabel: 'testValue' }} />,
     );
 
-    expect(queryByText('testLabel=testValue')).toBeInTheDocument();
+    expect(
+      container.querySelector("[text='testLabel=testValue']"),
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/shared/components/Selector/tests/Selector.test.js b/src/shared/components/Selector/tests/Selector.test.js
index 439bbf3e5a..8da849bba7 100644
--- a/src/shared/components/Selector/tests/Selector.test.js
+++ b/src/shared/components/Selector/tests/Selector.test.js
@@ -37,7 +37,7 @@ describe('Selector tests', () => {
         },
       };
 
-      const { getByText } = render(
+      const { container, getByText } = render(
         <ThemeProvider>
           <Selector
             selector={mockedSelector}
@@ -48,7 +48,7 @@ describe('Selector tests', () => {
       );
 
       expect(getByText('Related Pods for test-namespace')).toBeInTheDocument();
-      expect(getByText('test=test')).toBeInTheDocument(); // selector labels
+      expect(container.querySelector("[text='test=test']")).toBeInTheDocument(); // selector labels
     });
 
     it('Renders Selector with matchExpressions and without pods list', () => {
@@ -61,7 +61,7 @@ describe('Selector tests', () => {
         ],
       };
 
-      const { getByText } = render(
+      const { container, getByText } = render(
         <ThemeProvider>
           <Selector
             selector={mockedSelector}
@@ -73,10 +73,12 @@ describe('Selector tests', () => {
       );
 
       expect(getByText('match-expressions.title')).toBeInTheDocument(); //title of the matchExpressions table
-      expect(getByText('test=test')).toBeInTheDocument();
+      expect(container.querySelector("[text='test=test']")).toBeInTheDocument();
       expect(getByText('test-key')).toBeInTheDocument(); // matchExpressions elements
       expect(getByText('In')).toBeInTheDocument();
-      expect(getByText('test-value')).toBeInTheDocument();
+      expect(
+        container.querySelector("[text='test-value']"),
+      ).toBeInTheDocument();
     });
 
     it('Renders custom message when selector labels are null ', () => {
@@ -149,7 +151,7 @@ describe('Selector tests', () => {
         },
       };
 
-      const { getByText } = render(
+      const { container, getByText } = render(
         <ThemeProvider>
           <Selector
             selector={mockedSelector}
@@ -162,7 +164,7 @@ describe('Selector tests', () => {
       );
 
       expect(getByText('Custom Resources')).toBeInTheDocument();
-      expect(getByText('test=test')).toBeInTheDocument();
+      expect(container.querySelector("[text='test=test']")).toBeInTheDocument();
     });
   });
 });
diff --git a/src/shared/components/Tokens.js b/src/shared/components/Tokens.js
index 69d5deeaea..a0fd50ac75 100644
--- a/src/shared/components/Tokens.js
+++ b/src/shared/components/Tokens.js
@@ -1,23 +1,21 @@
 import React from 'react';
 
-import { Token } from 'fundamental-react';
+import { Token } from '@ui5/webcomponents-react';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 
 const Tokens = ({ tokens }) => (
-  <div>
+  <>
     {tokens?.length
       ? tokens.map(scope => (
           <Token
             key={scope}
-            buttonLabel=""
-            className="y-fd-token y-fd-token--no-button y-fd-token--gap fd-margin-end--tiny"
-            readOnly={true}
-          >
-            {scope}
-          </Token>
+            className="fd-margin-end--tiny"
+            readOnly
+            text={scope}
+          />
         ))
       : EMPTY_TEXT_PLACEHOLDER}
-  </div>
+  </>
 );
 
 export { Tokens };
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 654c2cfbd0..1c9acf2935 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -67,32 +67,6 @@ body {
   margin-right: 0.2rem;
 }
 
-.fd-token {
-  font-size: 0.75rem !important;
-  flex: none !important;
-  padding: 0 8px !important;
-
-  &--readonly {
-    .fd-token__close {
-      display: none !important;
-    }
-
-    &::after {
-      content: none !important;
-    }
-
-    &:hover {
-      background-color: initial !important;
-      border-color: initial !important;
-    }
-  }
-
-  .fd-token__close {
-    padding-right: 0;
-    display: inline;
-  }
-}
-
 .fd-dialog,
 .fd-panel,
 .fd-action-bar {
@@ -204,13 +178,6 @@ li {
   visibility: hidden !important;
 }
 
-.no-dismiss-tokens {
-  .fd-token::after,
-  &.fd-token::after {
-    content: none !important;
-  }
-}
-
 .clearfix::after {
   content: '';
   clear: both;
diff --git a/tests/integration/tests/namespace/test-protected-resources.spec.js b/tests/integration/tests/namespace/test-protected-resources.spec.js
index d14fcaa2e8..a7e0d992c8 100644
--- a/tests/integration/tests/namespace/test-protected-resources.spec.js
+++ b/tests/integration/tests/namespace/test-protected-resources.spec.js
@@ -79,7 +79,7 @@ context('Test Protected Resources', () => {
       .contains('Config Maps')
       .click();
 
-    cy.get('ui5-table-row')
+    cy.get('a.fd-link')
       .contains(NAME)
       .click();
 
diff --git a/tests/integration/tests/namespace/test-reduced-permissions--configuration.spec.js b/tests/integration/tests/namespace/test-reduced-permissions--configuration.spec.js
index 9365d7fdda..8fbb24e65b 100644
--- a/tests/integration/tests/namespace/test-reduced-permissions--configuration.spec.js
+++ b/tests/integration/tests/namespace/test-reduced-permissions--configuration.spec.js
@@ -85,7 +85,7 @@ context('Test reduced permissions 2', () => {
 
     cy.get('[aria-label="search-input"]').type('kube-public');
 
-    cy.get('[role="row"]')
+    cy.get('a.fd-link')
       .contains('kube-public')
       .click();
 
diff --git a/tests/integration/tests/namespace/test-reduced-permissions.spec.js b/tests/integration/tests/namespace/test-reduced-permissions.spec.js
index 1636638d60..5beb046cb2 100644
--- a/tests/integration/tests/namespace/test-reduced-permissions.spec.js
+++ b/tests/integration/tests/namespace/test-reduced-permissions.spec.js
@@ -141,7 +141,9 @@ context('Test reduced permissions', () => {
       .contains('Service Accounts')
       .click();
 
-    cy.contains(SA_NAME).click();
+    cy.get('a.fd-link')
+      .contains(SA_NAME)
+      .click();
 
     cy.contains('Generate TokenRequest').click();
 
diff --git a/tests/integration/tests/namespace/test-replica-sets.spec.js b/tests/integration/tests/namespace/test-replica-sets.spec.js
index ed5f19e01b..7f5315208f 100644
--- a/tests/integration/tests/namespace/test-replica-sets.spec.js
+++ b/tests/integration/tests/namespace/test-replica-sets.spec.js
@@ -60,7 +60,9 @@ context('Test Replica Sets', () => {
       .contains('Replica Sets')
       .click();
 
-    cy.contains(REPLICA_SET_NAME).click();
+    cy.get('a.fd-link')
+      .contains(REPLICA_SET_NAME)
+      .click();
 
     cy.contains(REPLICA_SET_NAME);
   });