Merge pull request #206 from lokanandaprabhu/feature/SRVKP-6898-1

SRVKP-6898: Replace font awesome with custom css in dynamic plugin #204
openshift-pipelines · Dec 11, 2024 · d57d113 · d57d113
2 parents 6478102 + b1c277d
commit d57d113
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 12 deletions.
diff --git a/integration-tests/cypress/support/pages/pipelines/pipelineBuilder-page.ts b/integration-tests/cypress/support/pages/pipelines/pipelineBuilder-page.ts
@@ -89,7 +89,9 @@ export const pipelineBuilderPage = {
     pipelineBuilderPage.AddTask(taskName);
   },
   clickOnTask: (taskName: string) => {
-    cy.get('.co-spin', { timeout: 80000 }).should('not.exist');
+    cy.get('.pipelines-console-plugin__spin', { timeout: 80000 }).should(
+      'not.exist',
+    );
     cy.get(`[data-id="${taskName}"] text`).click({ force: true });
   },
   selectParallelTask: (taskName: string) => {

diff --git a/src/components/pipeline-topology/InstallingNodeDecorator.tsx b/src/components/pipeline-topology/InstallingNodeDecorator.tsx
@@ -34,7 +34,7 @@ const InstallingNodeDecorator: React.FC<InstallingNodeDecoratorProps> = ({
           className="opp-installing-node-decorator__circle"
         />
         <g transform="translate(-5, -7)">
-          <InProgressIcon className="co-spin" />
+          <InProgressIcon className="pipelines-console-plugin__spin" />
         </g>
       </g>
     </Tooltip>

diff --git a/src/components/pipeline-topology/StatusIcons.tsx b/src/components/pipeline-topology/StatusIcons.tsx
@@ -40,7 +40,10 @@ export const StatusIcon: React.FC<StatusIconProps> = ({
     case ComputedStatus['In Progress']:
     case ComputedStatus.Running:
       return (
-        <SyncAltIcon {...props} className={cx({ 'co-spin': !disableSpin })} />
+        <SyncAltIcon
+          {...props}
+          className={cx({ 'pipelines-console-plugin__spin': !disableSpin })}
+        />
       );
 
     case ComputedStatus.Succeeded:

diff --git a/src/components/pipelines-details/PipelineVisualizationTask.tsx b/src/components/pipelines-details/PipelineVisualizationTask.tsx
@@ -227,7 +227,7 @@ const TaskComponent: React.FC<TaskProps> = ({
           >
             <g
               className={cx({
-                'co-spin odc-pipeline-vis-task--icon-spin':
+                'pipelines-console-plugin__spin odc-pipeline-vis-task--icon-spin':
                   status.reason === ComputedStatus.Running,
                 'odc-pipeline-vis-task--icon-stop':
                   status.reason !== ComputedStatus.Running,

diff --git a/src/components/pipelines-details/StatusIcon.tsx b/src/components/pipelines-details/StatusIcon.tsx
@@ -30,7 +30,9 @@ export const StatusIcon: React.FC<StatusIconProps> = ({
       return (
         <SyncAltIcon
           {...props}
-          className={classnames({ 'co-spin': !disableSpin })}
+          className={classnames({
+            'pipelines-console-plugin__spin': !disableSpin,
+          })}
         />
       );
 

diff --git a/src/components/status/StatusIconAndText.tsx b/src/components/status/StatusIconAndText.tsx
@@ -44,7 +44,7 @@ const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({
       {icon &&
         React.cloneElement(icon, {
           className: classNames(
-            spin && 'co-spin',
+            spin && 'pipelines-console-plugin__spin',
             icon.props.className,
             !iconOnly && 'co-icon-and-text__icon co-icon-flex-child',
           ),

diff --git a/src/components/styles/common.scss b/src/components/styles/common.scss
@@ -1,4 +1,4 @@
-@keyframes co-spin {
+@keyframes pipelines-console-plugin__spin {
   0% {
     transform: rotate(0deg);
   }
@@ -7,12 +7,10 @@
   }
 }
 
-.co-spin {
-  animation: co-spin 2s infinite linear;
-}
+.pipelines-console-plugin__spin {
+  animation: pipelines-console-plugin__spin 2s infinite linear;
 
-@media (prefers-reduced-motion: reduce) {
-  .co-spin {
+  @media (prefers-reduced-motion: reduce) {
     animation: none;
   }
 }