style(ui): run make format-ui

Signed-off-by: András Jáky <[email protected]>
openclarity · Jul 25, 2024 · 141ec28 · 141ec28
1 parent 67dbcf7
commit 141ec28
Show file tree

Hide file tree

Showing 240 changed files with 12,337 additions and 9,530 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/ui/src/api/axiosClient.ts b/ui/src/api/axiosClient.ts
@@ -1,14 +1,11 @@
-import axios from 'axios';
+import axios from "axios";
 
 const vmClarityApiAxiosClient = axios.create({
   baseURL: `${window.location.origin}/api`,
 });
 
 const vmClarityUIBackendAxiosClient = axios.create({
-    baseURL: `${window.location.origin}/ui/api`,
+  baseURL: `${window.location.origin}/ui/api`,
 });
 
-export {
-    vmClarityApiAxiosClient,
-    vmClarityUIBackendAxiosClient,
-};
+export { vmClarityApiAxiosClient, vmClarityUIBackendAxiosClient };
diff --git a/ui/src/api/constants.ts b/ui/src/api/constants.ts
@@ -1,6 +1,6 @@
 const QUERY_KEYS = {
-    assets: 'assets',
-    findings: 'findings',
+  assets: "assets",
+  findings: "findings",
 };
 
 export default QUERY_KEYS;
diff --git a/ui/src/api/vmClarityApi.ts b/ui/src/api/vmClarityApi.ts
@@ -1,11 +1,19 @@
-import { vmClarityApiAxiosClient, vmClarityUIBackendAxiosClient } from './axiosClient';
-import { VMClarityUIBackendApi } from './generated-ui-backend';
-import { VMClarityApi } from './generated-api';
+import {
+  vmClarityApiAxiosClient,
+  vmClarityUIBackendAxiosClient,
+} from "./axiosClient";
+import { VMClarityUIBackendApi } from "./generated-ui-backend";
+import { VMClarityApi } from "./generated-api";
 
-const vmClarityApi = new VMClarityApi(undefined, undefined, vmClarityApiAxiosClient);
-const vmClarityUIBackend = new VMClarityUIBackendApi(undefined, undefined, vmClarityUIBackendAxiosClient);
+const vmClarityApi = new VMClarityApi(
+  undefined,
+  undefined,
+  vmClarityApiAxiosClient,
+);
+const vmClarityUIBackend = new VMClarityUIBackendApi(
+  undefined,
+  undefined,
+  vmClarityUIBackendAxiosClient,
+);
 
-export {
-    vmClarityApi,
-    vmClarityUIBackend,
-};
+export { vmClarityApi, vmClarityUIBackend };
diff --git a/ui/src/components/Arrow/arrow.scss b/ui/src/components/Arrow/arrow.scss
@@ -1,11 +1,11 @@
 .arrow-icon {
-    &.right-arrow {
-        transform: rotate(180deg);
-    }
-    &.top-arrow {
-        transform: rotate(90deg);
-    }
-    &.bottom-arrow {
-        transform: rotate(-90deg);
-    }
-}
+  &.right-arrow {
+    transform: rotate(180deg);
+  }
+  &.top-arrow {
+    transform: rotate(90deg);
+  }
+  &.bottom-arrow {
+    transform: rotate(-90deg);
+  }
+}
diff --git a/ui/src/components/Arrow/index.jsx b/ui/src/components/Arrow/index.jsx
@@ -1,30 +1,40 @@
-import React from 'react';
-import classnames from 'classnames';
-import Icon, { ICON_NAMES } from 'components/Icon';
+import React from "react";
+import classnames from "classnames";
+import Icon, { ICON_NAMES } from "components/Icon";
 
-import './arrow.scss';
+import "./arrow.scss";
 
 export const ARROW_NAMES = {
-    TOP: "top",
-    BOTTOM: "bottom",
-    RIGHT: "right",
-    LEFT: "left"
-}
+  TOP: "top",
+  BOTTOM: "bottom",
+  RIGHT: "right",
+  LEFT: "left",
+};
 
-const Arrow = ({name=ARROW_NAMES.TOP, onClick, disabled, small=false}) => {
-    if (!Object.values(ARROW_NAMES).includes(name)) {
-        console.error(`Arrow name '${name}' does not exist`);
-    }
+const Arrow = ({
+  name = ARROW_NAMES.TOP,
+  onClick,
+  disabled,
+  small = false,
+}) => {
+  if (!Object.values(ARROW_NAMES).includes(name)) {
+    console.error(`Arrow name '${name}' does not exist`);
+  }
 
-    return (
-        <Icon
-            name={ICON_NAMES.ARROW_HEAD_LEFT}
-            className={classnames("arrow-icon", `${name}-arrow`, {small}, {clickable: !!onClick})}
-            onClick={onClick}
-            disabled={disabled}
-            size={small ? 10 : 16}
-        />
-    );
-}
+  return (
+    <Icon
+      name={ICON_NAMES.ARROW_HEAD_LEFT}
+      className={classnames(
+        "arrow-icon",
+        `${name}-arrow`,
+        { small },
+        { clickable: !!onClick },
+      )}
+      onClick={onClick}
+      disabled={disabled}
+      size={small ? 10 : 16}
+    />
+  );
+};
 
-export default Arrow;
+export default Arrow;
diff --git a/ui/src/components/BackRouteButton/back-route-button.scss b/ui/src/components/BackRouteButton/back-route-button.scss
@@ -1,15 +1,15 @@
-@import 'utils/scss_variables.module.scss';
+@import "utils/scss_variables.module.scss";
 
 .back-route-button {
-    color: $color-main;
-    display: flex;
-    align-items: center;
-    font-size: 18px;
-    line-height: 18px;
-    cursor: pointer;
-    margin-bottom: 24px;
+  color: $color-main;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  line-height: 18px;
+  cursor: pointer;
+  margin-bottom: 24px;
 
-    .icon {
-        margin-right: 14px;
-    }
-}
+  .icon {
+    margin-right: 14px;
+  }
+}
diff --git a/ui/src/components/BackRouteButton/index.jsx b/ui/src/components/BackRouteButton/index.jsx
@@ -1,18 +1,18 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import Arrow, { ARROW_NAMES } from 'components/Arrow';
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Arrow, { ARROW_NAMES } from "components/Arrow";
 
-import './back-route-button.scss';
+import "./back-route-button.scss";
 
-const BackRouteButton = ({title, pathname}) => {
-    const navigate = useNavigate();
+const BackRouteButton = ({ title, pathname }) => {
+  const navigate = useNavigate();
 
-    return (
-        <div className="back-route-button" onClick={() => navigate(pathname)}>
-            <Arrow name={ARROW_NAMES.LEFT} />
-            <div className="back-title">{title}</div>
-        </div>
-    )
-}
+  return (
+    <div className="back-route-button" onClick={() => navigate(pathname)}>
+      <Arrow name={ARROW_NAMES.LEFT} />
+      <div className="back-title">{title}</div>
+    </div>
+  );
+};
 
-export default BackRouteButton;
+export default BackRouteButton;
diff --git a/ui/src/components/Button/button.scss b/ui/src/components/Button/button.scss
@@ -1,60 +1,60 @@
-@import 'utils/scss_variables.module.scss';
+@import "utils/scss_variables.module.scss";
 
 .clarity-button {
-    border: none;
-    background-color: transparent;
-    height: 26px;
-    font-size: 12px;
+  border: none;
+  background-color: transparent;
+  height: 26px;
+  font-size: 12px;
 
-    &.clarity-button--primary,
-    &.clarity-button--secondary {
-        font-weight: 400;
-        line-height: 14px;
-        text-align: center;
-        box-sizing: border-box;
-        border-radius: 50px;
-        display: inline-block;
-        padding: 0px 20px;
+  &.clarity-button--primary,
+  &.clarity-button--secondary {
+    font-weight: 400;
+    line-height: 14px;
+    text-align: center;
+    box-sizing: border-box;
+    border-radius: 50px;
+    display: inline-block;
+    padding: 0px 20px;
 
-        &:disabled {
-            background-color: $color-grey-light;
-            color: $color-grey;
-        }
+    &:disabled {
+      background-color: $color-grey-light;
+      color: $color-grey;
     }
-    &.clarity-button--primary {
-        background-color: $color-main-light;
-        color: $color-main-dark;
+  }
+  &.clarity-button--primary {
+    background-color: $color-main-light;
+    color: $color-main-dark;
 
-        &:hover:not(:disabled) {
-            background-color: $color-main-lighter;
-        }
+    &:hover:not(:disabled) {
+      background-color: $color-main-lighter;
     }
-    &.clarity-button--secondary {
-        background-color: $color-blue;
-        color: $color-main-dark;
+  }
+  &.clarity-button--secondary {
+    background-color: $color-blue;
+    color: $color-main-dark;
 
-        &:hover:not(:disabled) {
-            background-color: $color-blue-light;
-        }
+    &:hover:not(:disabled) {
+      background-color: $color-blue-light;
     }
-    &.clarity-button--tertiary {
-        line-height: 16px;
-        color: $color-main;
-        text-decoration: underline;
-        padding: 0;
+  }
+  &.clarity-button--tertiary {
+    line-height: 16px;
+    color: $color-main;
+    text-decoration: underline;
+    padding: 0;
 
-        &:hover:not(:disabled) {
-            color: $color-main-dark;
-        }
-        &:disabled {
-            color: $color-grey;
-            text-decoration: none;
-        }
-    }
-    &.clickable:not(:disabled) {
-        cursor: pointer;
+    &:hover:not(:disabled) {
+      color: $color-main-dark;
     }
     &:disabled {
-        cursor: not-allowed;
+      color: $color-grey;
+      text-decoration: none;
     }
-}
+  }
+  &.clickable:not(:disabled) {
+    cursor: pointer;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
diff --git a/ui/src/components/Button/index.jsx b/ui/src/components/Button/index.jsx
@@ -1,24 +1,31 @@
-import React from 'react';
-import classnames from 'classnames';
+import React from "react";
+import classnames from "classnames";
 
-import './button.scss';
+import "./button.scss";
 
-const Button = ({children, secondary, tertiary, disabled, onClick, className}) => (
-    <button
-        type="button"
-        className={classnames(
-            "clarity-button",
-            className,
-            {"clarity-button--primary": !secondary && !tertiary},
-            {"clarity-button--secondary": secondary},
-            {"clarity-button--tertiary": tertiary},
-            {clickable: !!onClick}
-        )}
-        disabled={disabled}
-        onClick={event => !disabled && onClick ? onClick(event) : null}
-    >
-        {children}
-    </button>
-)
+const Button = ({
+  children,
+  secondary,
+  tertiary,
+  disabled,
+  onClick,
+  className,
+}) => (
+  <button
+    type="button"
+    className={classnames(
+      "clarity-button",
+      className,
+      { "clarity-button--primary": !secondary && !tertiary },
+      { "clarity-button--secondary": secondary },
+      { "clarity-button--tertiary": tertiary },
+      { clickable: !!onClick },
+    )}
+    disabled={disabled}
+    onClick={(event) => (!disabled && onClick ? onClick(event) : null)}
+  >
+    {children}
+  </button>
+);
 
-export default Button;
+export default Button;
diff --git a/ui/src/components/ButtonWithIcon/button-with-icon.scss b/ui/src/components/ButtonWithIcon/button-with-icon.scss
@@ -1,10 +1,10 @@
-@import 'utils/scss_variables.module.scss';
+@import "utils/scss_variables.module.scss";
 
 .button-with-icon.clarity-button {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    .icon {
-        margin-right: 5px;
-    }
-}
+  .icon {
+    margin-right: 5px;
+  }
+}