Merge pull request #1027 from tailwarden/develop

v3.1.1 release 🚀

.gitattributes

@@ -0,0 +1,6 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text eol=lf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary

.github/CODEOWNERS

@@ -1,3 +1,4 @@
-*  @mlabouardy @ShubhamPalriwala
+*  @mlabouardy @ShubhamPalriwala @AvineshTripathi @greghub @Traxmaxx
+docs @jakepage91
 README.md @jakepage91
 CONTRIBUTING.md @jakepage91

.github/dependabot.yml

@@ -0,0 +1,12 @@
+version: 2
+updates:
+  - package-ecosystem: "npm" 
+    directory: "/dashboard"  
+    schedule:
+      interval: "weekly"
+      labels:
+      - "npm dependencies"
+      reviewers:
+      - "mlabouardy"
+      - "ShubhamPalriwala"
+      - "AvineshTripathi"

.github/workflows/build_test_pr.yml

@@ -5,7 +5,7 @@ jobs:
   build_test_dashboard:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v3
         with:
@@ -28,14 +28,14 @@ jobs:
   build_test_cli:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Go
         uses: actions/setup-go@v4
         with:
           cache: true
           cache-dependency-path: go.sum
-          go-version: 1.20.2
+          go-version: 1.21
 
       # FIXME: https://github.com/golangci/golangci-lint-action/issues/677
       # - name: golangci-lint

README.md

@@ -21,6 +21,7 @@
   </a>
 </p>
 
+[![Build and Test komiser](https://github.com/tailwarden/komiser/actions/workflows/build_test.yml/badge.svg)](https://github.com/tailwarden/komiser/actions/workflows/build_test.yml)
 [![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/tailwarden/komiser/blob/master/LICENSE) [![Docker Stars](https://img.shields.io/docker/pulls/mlabouardy/komiser.svg)](https://hub.docker.com/r/mlabouardy/komiser) 
 [![ELv2 License](https://img.shields.io/badge/license-ELv2-green)](LICENSE) [![Docker Stars](https://img.shields.io/github/issues/tailwarden/komiser.svg)](https://github.com/tailwarden/komiser/issues) [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.tailwarden.com/)
 
@@ -162,16 +163,16 @@ We are very excited about what is in store in the coming weeks and months, take
 
 Komiser is written in `Golang` and is `Elv2 licensed` - contributions are always welcome whether that means providing feedback, be it through GitHub, through the `#feedback` channel on our [Discord server](https://discord.tailwarden.com) or testing existing and new features. Feel free to check out our [contributor guidelines](./CONTRIBUTING.md) and consider becoming a **contributor** today. 
 
-Learn how to contribute with this walkthrough videos:
+Learn how to contribute with these walkthrough videos:
 
-- [How to contributor to Komiser engine](https://www.youtube.com/watch?v=Vn5uc2elcVg)
-- [How to contributor to Komiser dashboard](https://www.youtube.com/watch?v=uwxj11-eRt8)
+- [How to contribute to Komiser engine](https://www.youtube.com/watch?v=Vn5uc2elcVg)
+- [How to contribute to Komiser dashboard](https://www.youtube.com/watch?v=uwxj11-eRt8)
 
 # Users 🧑‍🤝‍🧑
 
 If you'd like to have your company represented and are using `Komiser` please give formal written permission below via email to [email protected].
 
-We will need a URL to a svg or png logo, a text title and a company URL.
+We will need a URL to an SVG or png logo, a text title, and a company URL.
 
 # Versioning 🧮
 

dashboard/.eslintrc.json

@@ -10,6 +10,14 @@
     "jest/globals": true
   },
   "plugins": ["jest", "prettier"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
   "rules": {
     "react-hooks/exhaustive-deps": "off",
     "prettier/prettier": [

dashboard/.gitignore

@@ -4,7 +4,6 @@
 /node_modules
 /.pnp
 .pnp.js
-/package-lock.json
 
 # testing
 /coverage

dashboard/.tool-versions

@@ -0,0 +1 @@
+nodejs 18.16.1

dashboard/components/account-details/AwsAccountDetails.tsx

@@ -0,0 +1,192 @@
+import { ChangeEvent, ReactNode, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { AWSCredentials } from '@utils/cloudAccountHelpers';
+import Folder2Icon from '../icons/Folder2Icon';
+import SelectInput from '../onboarding-wizard/SelectInput';
+import LabelledInput from '../onboarding-wizard/LabelledInput';
+import InputFileSelect from '../onboarding-wizard/InputFileSelect';
+import KeyIcon from '../icons/KeyIcon';
+import VariableIcon from '../icons/VariableIcon';
+import DocumentTextIcon from '../icons/DocumentTextIcon';
+import ShieldSecurityIcon from '../icons/ShieldSecurityIcon';
+import { CloudAccountPayload } from '../cloud-account/hooks/useCloudAccounts/useCloudAccount';
+
+interface SelectOptions {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}
+
+interface AwsAccountDetailsProps {
+  cloudAccountData?: CloudAccountPayload<AWSCredentials>;
+  hasError?: boolean;
+}
+
+const options: SelectOptions[] = [
+  {
+    icon: <DocumentTextIcon />,
+    label: 'Credentials File',
+    value: 'credentials-file'
+  },
+  {
+    icon: <KeyIcon />,
+    label: 'Credentials keys',
+    value: 'credentials-keys'
+  },
+  {
+    icon: <VariableIcon />,
+    label: 'Environment Variables',
+    value: 'environment-variables'
+  },
+  {
+    icon: <ShieldSecurityIcon />,
+    label: 'IAM Instance Role',
+    value: 'iam-instance-role'
+  }
+];
+
+function AwsAccountDetails({
+  cloudAccountData,
+  hasError = false
+}: AwsAccountDetailsProps) {
+  const [credentialType, setCredentialType] = useState<string>(
+    options.find(
+      option => option.value === cloudAccountData?.credentials.source
+    )?.value ?? options[0].value
+  );
+  const [isValidationError, setIsValidationError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [file, setFile] = useState<string>(
+    cloudAccountData?.credentials.path || ''
+  );
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const handleButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  function handleSelectChange(newValue: string) {
+    setCredentialType(newValue);
+  }
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const fileName = event.target.files?.[0]?.name;
+
+    if (fileName) {
+      setFile(fileName);
+      if (!fileName.endsWith('.db')) {
+        setIsValidationError(true);
+        setErrorMessage(
+          'The chosen file is not supported. Please choose a different file for the credentials.'
+        );
+      }
+    } else {
+      setIsValidationError(true);
+      setErrorMessage('Please choose a file.');
+    }
+  };
+
+  return (
+    <div className="flex flex-col space-y-4 py-10">
+      <LabelledInput
+        type="text"
+        id="account-name"
+        name="name"
+        label="Account name"
+        placeholder="my-aws-account"
+        required
+        value={cloudAccountData?.name}
+      />
+
+      <div
+        className={classNames(
+          'flex flex-col space-y-8 rounded-md p-5',
+          hasError ? 'bg-error-100' : 'bg-komiser-100'
+        )}
+      >
+        <div>
+          <SelectInput
+            icon="Change"
+            name="source"
+            label="Source"
+            displayValues={options}
+            value={credentialType}
+            handleChange={handleSelectChange}
+            values={options.map(option => option.value)}
+          />
+          {[options[2].value, options[3].value].includes(credentialType) && (
+            <div className="mt-2 text-sm text-black-400">
+              {credentialType === options[3].value
+                ? 'Komiser will fetch the credentials from AWS'
+                : 'Komiser will load credentials from AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.'}
+            </div>
+          )}
+        </div>
+
+        {credentialType === options[0].value && (
+          <div>
+            <InputFileSelect
+              type="text"
+              label="File path"
+              id="file-path-input"
+              name="path"
+              icon={<Folder2Icon />}
+              subLabel="Enter the path or browse the file"
+              placeholder="C:\Documents\Komiser\credentials"
+              fileInputRef={fileInputRef}
+              iconClick={handleButtonClick}
+              handleFileChange={handleFileChange}
+              handleInputChange={e => setFile(e.target.value)}
+              value={file}
+              hasError={isValidationError}
+              errorMessage={errorMessage}
+            />
+            <LabelledInput
+              type="text"
+              id="profile"
+              name="profile"
+              label="Profile"
+              placeholder="default"
+              subLabel="Name of the section in the credentials file"
+              value={cloudAccountData?.credentials.profile}
+              required
+            />
+          </div>
+        )}
+
+        {credentialType === options[1].value && (
+          <div>
+            <LabelledInput
+              type="text"
+              id="access-key-id"
+              name="aws_access_key_id"
+              label="Access key ID"
+              placeholder="AKIABCDEFGHIJKLMN12"
+              subLabel="Unique identifier used to access AWS services"
+              required
+            />
+            <LabelledInput
+              type="text"
+              id="secret-access-key"
+              name="aws_secret_access_key"
+              label="Secret access key"
+              placeholder="AbCdEfGhIjKlMnOpQrStUvWxYz0123456789AbCd"
+              subLabel="The secret access key is generated by AWS when an access key is created"
+              required
+            />
+          </div>
+        )}
+      </div>
+      {hasError && (
+        <div className="text-sm text-error-600">
+          We couldn&apos;t connect to your AWS account. Please check if the file
+          is correct.
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default AwsAccountDetails;