dev master merge (#93)

Co-authored-by: rishavanand <rishavdipsite@gmail.com>
Co-authored-by: kairavkkp <kairavpithadia13@gmail.com>
Co-authored-by: Shreya Vijay <shreyavi@usc.edu>
Co-authored-by: Florian Vogt <florian.vogt@sap.com>

Author: 4 people

.github/workflows/main.yml

@@ -5,33 +5,41 @@ name: CI
 # Controls when the action will run. Triggers the workflow on push or pull request
 # events but only for the master branch
 on:
-  push:
-    branches: [ master, dev ]
-  pull_request:
-    types: [opened, opened, synchronize, reopened]
-    branches: [ master, dev ]
+    push:
+        branches: [master, dev]
+    pull_request:
+        types: [opened, opened, synchronize, reopened]
+        branches: [master, dev]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-    
-    strategy:
-      matrix:
-        node-version: [14.x]
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-    - uses: actions/checkout@v2
-
-    - name: Install dependencies
-      run: npm i
-
-    - name: Run linter
-      run: npm run lint
-    
-    - name: Build 
-      run: npm run build
+    # This workflow contains a single job called "build"
+    build:
+        # The type of runner that the job will run on
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [14.x]
+
+        # Steps represent a sequence of tasks that will be executed as part of the job
+        steps:
+            # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+            - uses: actions/checkout@v3
+
+            - uses: actions/setup-node@v3
+              with:
+                node-version: ${{ matrix.node-version }}
+                cache: 'npm'
+
+            - name: Print versions
+              run: npm run info
+              
+            - name: Install dependencies
+              run: npm i
+
+            - name: Run linter
+              run: npm run lint
+
+            - name: Build
+              run: npm run build

package-lock.json

@@ -73,7 +73,8 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
+    "info": "echo \"Node version: $(node -v)\" && echo \"NPM version: $(npm -v)\""
   },
   "husky": {
     "hooks": {

package.json

@@ -66,20 +66,19 @@ export const SkillsField = ({
     modifyField: (filedProps: SkillsFieldProps) => void;
 }) => {
     const [searchValue, setSearchValue] = useState('');
-
-    const screens = useBreakpoint();
-
-    const skillsColSpan = screens.md ? 6 : 12;
-
-    const localSkillsFieldProps: typeof fieldProps = {
+    const [localSkillsFieldProps, setLocalSkillsFieldProps] = useState({
         options: {
             size: SIZE.MEDIUM,
         },
         data: {
             list: [],
         },
         ...fieldProps,
-    };
+    });
+
+    const screens = useBreakpoint();
+
+    const skillsColSpan = screens.md ? 6 : 12;
 
     const onChange = event => {
         const name = event.target.value;
@@ -94,9 +93,8 @@ export const SkillsField = ({
 
         localSkillsFieldProps.data.list = currentSkillsList as string[];
 
-        modifyField({
-            ...localSkillsFieldProps,
-        });
+        setLocalSkillsFieldProps(localSkillsFieldProps);
+        modifyField(localSkillsFieldProps);
     };
 
     const onSearch = value => {
@@ -145,7 +143,11 @@ export const SkillsField = ({
                     </Dropdown>
                 </Col>
             </Row>
-            <Checkbox.Group defaultValue={localSkillsFieldProps.data.list} style={{ width: '100%' }}>
+            <Checkbox.Group
+                defaultValue={localSkillsFieldProps.data.list}
+                value={localSkillsFieldProps.data.list}
+                style={{ width: '100%' }}
+            >
                 <Row>
                     {Object.values(SKILLS)
                         .filter(skill =>

src/components/Field/SkillsField.tsx

@@ -4,10 +4,15 @@ const BASE_URL = typeof window !== 'undefined' ? window.location.href : '';
 type Skill = { label: string; value: string; iconUrl: string };
 
 export const SKILLS: Record<string, Skill> = {
+    openui5: {
+        label: 'OpenUI5',
+        value: 'openui5',
+        iconUrl: BASE_URL + 'skills-assets/openui5.svg',
+    },
     terraform: {
         label: 'Terraform',
         value: 'terraform',
-        iconUrl: BASE_URL + 'skills-assets/terraformio-icon.svg'
+        iconUrl: BASE_URL + 'skills-assets/terraformio-icon.svg',
     },
     vuejs: {
         label: 'Vue.js',