digma-ai · kshmidt-digma · Jul 7, 2023 · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,6 +1,6 @@
 {
-  "extends": ["stylelint-config-recommended"],
-  "customSyntax": "postcss-styled-components",
+  "extends": ["stylelint-config-standard"],
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
     "font-family-no-missing-generic-family-keyword": [
       true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,8 +31,8 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.21.4",
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@storybook/addon-essentials": "^7.0.4",
@@ -42,7 +42,6 @@
     "@storybook/react": "^7.0.4",
     "@storybook/react-webpack5": "^7.0.4",
     "@storybook/testing-library": "^0.1.0",
-    "@stylelint/postcss-css-in-js": "^0.38.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-transition-group": "^4.4.5",
@@ -62,12 +61,12 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.2.2",
-    "postcss-styled-components": "^0.2.1",
+    "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.3",
     "storybook": "^7.0.4",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.16.1",
-    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint": "^15.10.1",
+    "stylelint-config-standard": "^34.0.0",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",

diff --git a/src/components/Assets/AssetList/AssetEntry/styles.ts b/src/components/Assets/AssetList/AssetEntry/styles.ts
@@ -6,7 +6,6 @@ export const Container = styled.div`
   gap: 8px;
   padding: 8px;
   border-radius: 4px;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -16,7 +15,6 @@ export const Container = styled.div`
         return "#9b9b9b";
     }
   }};
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -63,7 +61,6 @@ export const InsightIconsContainer = styled.div`
 
 export const InsightIconContainer = styled(AssetTypeIconContainer)`
   border-radius: 4px;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -115,7 +112,7 @@ export const ServiceName = styled.div`
   line-height: 8px;
   overflow: hidden;
   text-overflow: ellipsis;
-
+  white-space: nowrap;
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -125,7 +122,6 @@ export const ServiceName = styled.div`
         return "#dadada";
     }
   }};
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -144,7 +140,6 @@ export const ValueContainer = styled.div`
   font-size: 12px;
   line-height: 14px;
   font-weight: 500;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -160,7 +155,6 @@ export const Suffix = styled.span`
   font-weight: 400;
   font-size: 11px;
   line-height: 14px;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

diff --git a/src/components/Assets/AssetList/styles.ts b/src/components/Assets/AssetList/styles.ts
@@ -21,7 +21,6 @@ export const Header = styled.div`
   font-size: 11px;
   line-height: 14px;
   padding: 8px 12px 8px 8px;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -31,7 +30,6 @@ export const Header = styled.div`
         return "#383838";
     }
   }};
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -74,7 +72,6 @@ export const SearchInput = styled.input`
   border-radius: 4px;
   width: 140px;
   outline: none;
-
   caret-color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -84,7 +81,6 @@ export const SearchInput = styled.input`
         return "#dadada";
     }
   }};
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -94,7 +90,6 @@ export const SearchInput = styled.input`
         return "#dadada";
     }
   }};
-
   border: 1px solid
     ${({ theme }) => {
       switch (theme.mode) {
@@ -145,7 +140,6 @@ export const SortingMenuContainer = styled.div`
   line-height: 12px;
   align-items: center;
   height: 20px;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -162,7 +156,6 @@ export const SortingLabel = styled.span`
   font-size: 10px;
   line-height: 12px;
   text-transform: capitalize;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -176,7 +169,6 @@ export const SortingLabel = styled.span`
 
 export const ItemsCount = styled.span`
   margin-left: auto;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -206,7 +198,6 @@ export const NoDataText = styled.span`
   font-size: 12px;
   line-height: 16px;
   text-align: center;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

diff --git a/src/components/Assets/AssetTypeList/AssetTypeListItem/styles.ts b/src/components/Assets/AssetTypeList/AssetTypeListItem/styles.ts
@@ -11,7 +11,6 @@ export const ListItem = styled.li`
   letter-spacing: -0.1px;
   user-select: none;
   border-radius: 4px;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -25,7 +24,6 @@ export const ListItem = styled.li`
 
 export const EntryCount = styled.span`
   margin-left: auto;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

diff --git a/src/components/Assets/AssetTypeList/styles.ts b/src/components/Assets/AssetTypeList/styles.ts
@@ -6,7 +6,6 @@ export const List = styled.ul`
   gap: 8px;
   padding: 8px;
   margin: 0;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
@@ -46,16 +46,16 @@ const groupEntries = (data: ServiceAssetsEntry[]): GroupedAssetEntries => {
     )
     .flat();
 
-  const assetTypes = groupBy<ExtendedAssetEntry>(assetEntries, "assetType");
+  const assetTypes = groupBy(assetEntries, (x) => x.assetType);
 
   const groupedAssetEntries: {
     [key: string]: { [key: string]: ExtendedAssetEntry[] };
   } = {};
 
   Object.keys(assetTypes).forEach((assetType) => {
-    groupedAssetEntries[assetType] = groupBy<ExtendedAssetEntry>(
+    groupedAssetEntries[assetType] = groupBy(
       assetTypes[assetType],
-      "id"
+      (x) => x.id
     );
   });
 

diff --git a/src/components/Assets/styles.ts b/src/components/Assets/styles.ts
@@ -3,7 +3,6 @@ import { Link } from "../common/Link";
 
 export const Container = styled.div`
   min-height: 100vh;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -23,7 +22,6 @@ export const NoDataContainer = styled.div`
   font-weight: 500;
   font-size: 12px;
   text-align: center;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -39,7 +37,6 @@ export const NoDataTitle = styled.span`
   font-size: 14px;
   text-transform: capitalize;
   margin: 20px 0 4px;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -62,7 +59,6 @@ export const Circle = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

diff --git a/src/components/InstallationWizard/CodeSnippet/styles.ts b/src/components/InstallationWizard/CodeSnippet/styles.ts
@@ -9,7 +9,6 @@ export const Container = styled.div`
   gap: 27px;
   align-items: flex-start;
   justify-content: space-between;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -21,7 +20,6 @@ export const Container = styled.div`
   }};
 `;
 
-// postcss-styled-components-disable-next-line
 export const Code = styled.code`
   ${({ theme }) => getCodeFont(theme.codeFont)}
 
@@ -30,7 +28,6 @@ export const Code = styled.code`
   line-height: 20px;
   letter-spacing: -0.1px;
   white-space: pre-wrap;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

diff --git a/src/components/InstallationWizard/FinishStep/index.tsx b/src/components/InstallationWizard/FinishStep/index.tsx
@@ -96,7 +96,7 @@ export const FinishStep = (props: FinishStepProps) => {
             <CircleLoader
               size={16}
               colors={{
-                start: "rgba(53, 56, 205, 0.3)",
+                start: "rgb(53 56 205 / 30%)",
                 end: "#fff",
                 background: "#252526"
               }}

diff --git a/src/components/InstallationWizard/FinishStep/styles.ts b/src/components/InstallationWizard/FinishStep/styles.ts
@@ -22,7 +22,6 @@ export const SectionTitleNote = styled.span`
   font-size: 10px;
   line-height: 12px;
   font-weight: 400;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -46,10 +45,7 @@ export const IllustrationContainer = styled(CommonIllustrationContainer)`
 
 export const PlayIconContainer = styled.div`
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
   margin: auto;
   width: 8%;
 `;
@@ -77,7 +73,6 @@ export const EmailInput = styled.input`
   line-height: 14px;
   padding: 8px 10px;
   border-radius: 4px;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -87,7 +82,6 @@ export const EmailInput = styled.input`
         return "#dadada";
     }
   }};
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -97,7 +91,6 @@ export const EmailInput = styled.input`
         return "#252526";
     }
   }};
-
   border: 1px solid
     ${({ theme }) => {
       switch (theme.mode) {

diff --git a/src/components/InstallationWizard/InstallStep/styles.ts b/src/components/InstallationWizard/InstallStep/styles.ts
@@ -57,7 +57,6 @@ export const IconBackgroundCircle = styled.div`
   height: 40px;
   width: 40px;
   border-radius: 50%;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

diff --git a/src/components/InstallationWizard/InstallationTypeButton/styles.ts b/src/components/InstallationWizard/InstallationTypeButton/styles.ts
@@ -9,7 +9,6 @@ export const InstallationTypeButton = styled.button`
   font-size: 12px;
   line-height: 14px;
   border: 1px solid transparent;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -19,7 +18,6 @@ export const InstallationTypeButton = styled.button`
         return "#9b9b9b";
     }
   }};
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -85,7 +83,6 @@ export const InstallationTypeButtonIconContainer = styled.span<InstallationTypeB
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -113,7 +110,6 @@ export const InstallationTypeButtonTitle = styled.span<InstallationTypeButtonEle
   font-size: 14px;
   line-height: 16px;
   margin-bottom: 8px;
-
   color: ${({ disabled, theme }) => {
     if (disabled) {
       switch (theme.mode) {

diff --git a/src/components/InstallationWizard/ObservabilityStep/styles.ts b/src/components/InstallationWizard/ObservabilityStep/styles.ts
@@ -25,7 +25,6 @@ export const ObservabilityTitle = styled.span`
   font-size: 14px;
   text-transform: capitalize;
   text-align: center;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -44,7 +43,6 @@ export const ObservabilityDescription = styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -83,7 +81,6 @@ export const CongratulationsTextContainer = styled.div`
   line-height: 11px;
   flex-wrap: wrap;
   justify-content: center;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -98,7 +95,6 @@ export const CongratulationsTextContainer = styled.div`
 export const CongratulationsText = styled.span`
   font-weight: 700;
   padding-left: 2px;
-
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":