KAMU-141: migration SASS to SCSS (#153)

* KAMU-141: migration SASS to SCSS
- changes sass syntax to scss
- removed empty files
- removed duplicates imports
- added global path for var.scss (and changed import)

CHANGELOG.md

@@ -10,18 +10,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Deleting and renaming a dataset on Settings tab
 - Added icons for dataset's tabs
 - Added more content for graph's node
+- Added Load More data functionality to dataset data tab
 ### Changed
 - Upgraded to Node.JS generation 16.x
 - Upgraded to Angular 14.3
 - Switched to different Angular wrapper for Monaco editor (ngx-monaco-editor-v2)
+- Switched from SASS to SCSS stylesheets
 - Selected library updates/downgrades to align with Angular 14.3 and Node.JS 16.x
 - GraphQL code generator tuned to produce string type by default for scalars
 - Fixed bug with disabled state for "Run" button after error
 - Refactored redundant selectors and cast class names to lowercase
 - Fixed bug with updating the list of datasets after deletion
 - Refactored observable subscriptions to pipe async
 - Truncated fields in material table using a configurable length
-- Added Load More data functionality to dataset data tab
 
 
 ## [0.8.0] - 2023-08-04

angular.json

@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "sass"
+          "style": "scss"
         }
       },
       "root": "",
@@ -42,8 +42,13 @@
                 "output": "/assets/monaco/"
               }
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/assets/styles"
+              ]
+            },
             "styles": [
-              "src/styles.sass",
+              "src/styles.scss",
               "node_modules/prismjs/themes/prism-okaidia.css",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
               "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css",
@@ -113,8 +118,13 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/assets/styles"
+              ]
+            },
             "styles": [
-              "src/styles.sass",
+              "src/styles.scss",
               "node_modules/prismjs/themes/prism-okaidia.css",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
               "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css",

src/app/api/dataset.api.spec.ts

@@ -6,11 +6,7 @@ import {
     TEST_DATASET_NAME,
     TEST_USER_NAME,
 } from "./mock/dataset.mock";
-import {
-    mockCommitEventResponse,
-    mockDatasetHistoryResponse,
-    mockDatasetMainDataResponse,
-} from "./../search/mock.data";
+import { mockCommitEventResponse, mockDatasetHistoryResponse, mockDatasetMainDataResponse } from "../search/mock.data";
 import { TestBed } from "@angular/core/testing";
 import { ApolloTestingController, ApolloTestingModule } from "apollo-angular/testing";
 import { DatasetApi } from "./dataset.api";

src/app/api/mock/dataset.mock.ts

@@ -5,7 +5,7 @@ import {
     DatasetSearchOverviewFragment,
     GetDatasetDataSqlRunQuery,
     GetMetadataBlockQuery,
-} from "./../kamu.graphql.interface";
+} from "../kamu.graphql.interface";
 import { DataSchemaFormat } from "../kamu.graphql.interface";
 import { DatasetsAccountResponse } from "src/app/interface/dataset.interface";
 

src/app/app.component.ts

@@ -23,7 +23,6 @@ export const ALL_URLS_WITHOUT_ACCESS_TOKEN: string[] = [ProjectLinks.URL_LOGIN,
 @Component({
     selector: "app-root",
     templateUrl: "./app.component.html",
-    styleUrls: ["./app.component.sass"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent extends BaseComponent implements OnInit {
@@ -94,10 +93,10 @@ export class AppComponent extends BaseComponent implements OnInit {
         if (item.__typename === TypeNames.datasetType) {
             this.navigationService.navigateToDatasetView({
                 accountName: item.dataset.owner.name,
-                datasetName: item.dataset.name ,
+                datasetName: item.dataset.name,
             });
         } else {
-            this.navigationService.navigateToSearch(item.dataset.id );
+            this.navigationService.navigateToSearch(item.dataset.id);
         }
     }
     public onClickAppLogo(): void {

src/app/auth/account/account.component.scss

@@ -0,0 +1,52 @@
+@import 'var';
+
+.toggle-group {
+    box-shadow: none;
+    border-radius: 0 !important;
+    width: fit-content;
+}
+
+.mat-button-toggle-checked {
+    border-left: none;
+    border-top: none;
+    border-right: none;
+    border-bottom: 2px solid !important;
+    border-radius: 0;
+    background-color: transparent !important;
+}
+
+.mat-button-toggle-input {
+    background-color: transparent !important;
+    padding-left: 32px !important;
+}
+
+.custom-container {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+}
+
+.vcard-username {
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 24px;
+    color: $app-color-fg-muted;
+}
+
+.organization {
+    font-weight: 500;
+}
+
+.btn-custom {
+    background-color: #f6f8fa;
+    border-color: #dee2e6 !important;
+    color: $app-dark;
+    font-weight: 500;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: #ebedf0;
+        color: $app-dark;
+    }
+}

src/app/auth/account/account.component.spec.ts

@@ -1,5 +1,5 @@
 import { NavigationService } from "src/app/services/navigation.service";
-import { mockAccountDetails } from "./../../api/mock/auth.mock";
+import { mockAccountDetails } from "../../api/mock/auth.mock";
 import { AccountTabs } from "./account.constants";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
 import { MatIconModule } from "@angular/material/icon";

src/app/auth/account/account.component.ts

@@ -1,5 +1,5 @@
 import ProjectLinks from "src/app/project-links";
-import { ModalService } from "./../../components/modal/modal.service";
+import { ModalService } from "../../components/modal/modal.service";
 import { BaseComponent } from "src/app/common/base.component";
 import { NavigationService } from "src/app/services/navigation.service";
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from "@angular/core";
@@ -17,15 +17,13 @@ import { Observable } from "rxjs";
 @Component({
     selector: "app-account",
     templateUrl: "./account.component.html",
-    styleUrls: ["./account.component.sass"],
+    styleUrls: ["./account.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountComponent extends BaseComponent implements OnInit {
     public accountViewType = AccountTabs.overview;
     public user: AccountDetailsFragment;
-    public accountTabs = AccountTabs;
     public accountName: string;
-    public isDropdownMenu = false;
     public currentPage = 1;
     public avatarLink: string;
     public datasetsAccount$: Observable<DatasetsAccountResponse>;

src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.ts

@@ -1,4 +1,4 @@
-import { NavigationService } from "./../../../../services/navigation.service";
+import { NavigationService } from "../../../../services/navigation.service";
 import { ChangeDetectionStrategy, Input } from "@angular/core";
 import { Component } from "@angular/core";
 import { DatasetSearchOverviewFragment, PageBasedInfo, User } from "src/app/api/kamu.graphql.interface";
@@ -7,7 +7,6 @@ import { AccountTabs } from "../../account.constants";
 @Component({
     selector: "app-datasets-tab",
     templateUrl: "./datasets-tab.component.html",
-    styleUrls: ["./datasets-tab.component.sass"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatasetsTabComponent {
@@ -23,7 +22,7 @@ export class DatasetsTabComponent {
     public onSelectDataset(row: DatasetSearchOverviewFragment): void {
         this.navigationService.navigateToDatasetView({
             accountName: (row.owner as User).name,
-            datasetName: row.name ,
+            datasetName: row.name,
         });
     }
 

src/app/auth/github-callback/github.callback.ts

@@ -1,4 +1,4 @@
-import { NavigationService } from "./../../services/navigation.service";
+import { NavigationService } from "../../services/navigation.service";
 import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Params } from "@angular/router";
 import { AuthApi } from "../../api/auth.api";

src/app/auth/login/login.component.ts

@@ -4,7 +4,6 @@ import { environment } from "../../../environments/environment";
 @Component({
     selector: "app-login",
     templateUrl: "./login.component.html",
-    styleUrls: ["./login.component.sass"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent {