fix: correct links, styles (#153)

Author: TheCatLady

docs/iam-permissions.mdx

@@ -6,10 +6,10 @@ import IamPolicyTable from '@site/src/components/IamPolicy/Table';
 
 Fix Security requires the below permissions to collect <abbr title="Amazon Web Services">AWS</abbr> resources.
 
-<!-- ## Amazon Web Services (AWS) \{#aws} -->
+## Amazon Web Services (AWS) \{#aws}
 
 <IamPolicyTable provider="aws"  />
 
-<!-- ## Google Cloud
+## Google Cloud
 
-<IamPolicyTable provider="gcp"  /> -->
+<IamPolicyTable provider="gcp"  />

docs/index.mdx

@@ -19,8 +19,9 @@ Learn more about Fix Security at [https://fix.security](https://fix.security).
 ## Documentation sections overview
 
 <DocCardList items={[
-  {type: 'link', href: '/inventory-graph', label: 'Inventory Graph', docId: 'inventory-graph/index'},
-  {type: 'link', href: '/iam-permissions', label: 'IAM Permissions', docId: 'iam-permissions'},
-  {type: 'link', href: '/resources', label: 'Resource Models', docId: 'resources/index'},
-  {type: 'link', href: '/search-syntax', label: 'Search Syntax', docId: 'search-syntax/index'}
+  {type: 'link', href: '/ui', label: 'User interface', docId: 'ui/index'},
+  {type: 'link', href: '/inventory-graph', label: 'Inventory graph', docId: 'inventory-graph/index'},
+  {type: 'link', href: '/iam-permissions', label: 'IAM permissions', docId: 'iam-permissions'},
+  {type: 'link', href: '/resources', label: 'Resource models', docId: 'resources/index'},
+  {type: 'link', href: '/search-syntax', label: 'Search syntax', docId: 'search-syntax/index'}
 ]} />

docs/ui/index.mdx

@@ -1,12 +1,10 @@
-import BrowserWindow from '@site/src/components/BrowserWindow/BrowserWindow';
+---
+sidebar_position: 1
+---
 
-# Fix UI
+# User interface
 
-Welcome to Fix, your comprehensive Cloud Inventory and Security Posture Management solution.
-
-In this guide, we'll take a look at the UI, highlighting key features and functionalities to help you get started.
-
-## First Screen After Logging In
+Upon logging in, you are greeted with your [Inventory](./inventory.mdx), providing immediate access to essential search tools and insights. This is assuming that your administrator has already added at least one cloud account. If not you would be greeted with the "Add Cloud Account" screen.
 
 <BrowserWindow 
     imageSrc={require('./img/workspace_settings_menu.png').default}
@@ -26,10 +24,8 @@ In this guide, we'll take a look at the UI, highlighting key features and functi
     ]}
 />
 
-Upon logging in, you are greeted with your [Inventory](/ui/inventory), providing immediate access to essential search tools and insights. This is assuming that your administrator has already added at least one cloud account. If not you would be greeted with the "Add Cloud Account" screen.
-
-In the top right you find options to switch between light and dark mode for your viewing preference, change the interface language, and access the [user menu](/ui/user).
+- In the top right you find options to switch between light and dark mode for your viewing preference, change the interface language, and access the [user menu](./user.mdx).
 
-On the left side of the screen, the main menu is located, offering easy access to the two primary sections of Fix: [Inventory](/ui/inventory) and [Security](/ui/security). When you first log in, you land on the Inventory page, where you can [search](/ui/inventory) resources of any kind.
+- On the left side of the screen, the main menu is located, offering easy access to the two primary sections of Fix Security: [Inventory](./inventory.mdx) and [Security](./security/index.mdx). When you first log in, you land on the Inventory page, where you can [search](./inventory.mdx) resources of any kind.
 
-At the bottom left, you will see the [Workspace Settings](/ui/workspace) menu which can be unfolded. This menu allows you to configure settings specific to the active workspace. You can manage connected cloud accounts, update billing information, integrate notification services like Slack, PagerDuty, and Teams, and invite new users to the workspace if you have the necessary permissions.
+- At the bottom left, you will see the [Workspace Settings](./workspace.mdx) menu which can be unfolded. This menu allows you to configure settings specific to the active workspace. You can manage connected cloud accounts, update billing information, integrate notification services like Slack, PagerDuty, and Teams, and invite new users to the workspace if you have the necessary permissions.

docs/ui/inventory.mdx

@@ -1,5 +1,3 @@
-import BrowserWindow from '@site/src/components/BrowserWindow/BrowserWindow';
-
 # Inventory
 
 <BrowserWindow 
@@ -11,7 +9,7 @@ import BrowserWindow from '@site/src/components/BrowserWindow/BrowserWindow';
 
 This is the Inventory screen, where you can search through your entire cloud infrastructure. You can perform a full-text search to find specific resources and use filters to refine your search by account and other properties. The screen also allows you to switch between a Form-based search for guided queries and an Advanced search for free-form search inputs. In the center, you have a list of example searches that highlight common queries to help you quickly identify issues or resources within your environment.
 
-## Search Results
+## Search results
 
 <BrowserWindow
     imageSrc={require('./img/inventory_search_easy.png').default}
@@ -31,7 +29,7 @@ The search results are displayed in a columnar format for easy viewing and analy
 
 This is the same search using the advanced search feature. Here you can enter free-form search queries.
 
-## Resource Details
+## Resource details
 
 <BrowserWindow
     imageSrc={require('./img/inventory_resource.png').default}
@@ -60,7 +58,7 @@ Further down, you will see the Tags section. This area lists all the tags and th
     id="inventory-resource-details"
 />
 
-Scrolling down even further, you can unfold the Resource Details section. This section shows every property of the resource in detail. Any of these properties can be [searched for](/search-syntax/filters#selecting-nodes-by-predicate).
+Scrolling down even further, you can unfold the Resource Details section. This section shows every property of the resource in detail. Any of these properties can be [searched for](../search-syntax/filters.mdx#selecting-nodes-by-predicate).
 
 <BrowserWindow 
     imageSrc={require('./img/inventory_security_issues.png').default}

docs/ui/security/benchmark.mdx

@@ -1,29 +1,29 @@
-import BrowserWindow from '@site/src/components/BrowserWindow/BrowserWindow';
-
 # Benchmarks
 
+Clicking on a benchmark opens the detailed Benchmark View, which shows the status of various security controls and their compliance with the selected framework.
+
 <BrowserWindow 
     imageSrc={require('../img/benchmark_view.png').default}
     alt="Benchmark View"
     url="https://app.fix.security/benchmark/iso27001"
     id="benchmark-view"
 />
 
-Clicking on a benchmark opens the detailed Benchmark View, which shows the status of various security controls and their compliance with the selected framework.
-
-### Control List
+### Control list
 
 On the left side, you see a list of control categories that have been checked, organized by sections of the benchmark. Each section is marked with an icon indicating its status.
 
-### Benchmark Details
+### Benchmark details
 
 On the right side, you see details about the benchmark, including the framework name (e.g., ISO 27001), version, and a brief description of the standard. Below this, a summary shows the number of checks that have failed out of the total checks performed.
 
-### Failing Checks
+### Failing checks
 
 The table lists the failing checks with details such as severity, the number of failing resources, and the specific check name. This section allows you to identify which controls need attention and remediation to improve your compliance status.
 
-## Control Details
+## Control details
+
+When you open a section on the left and click on a specific control, detailed information about that control, as well as the affected resources, is displayed.
 
 <BrowserWindow 
     imageSrc={require('../img/benchmark_details.png').default}
@@ -32,37 +32,35 @@ The table lists the failing checks with details such as severity, the number of
     id="benchmark-details"
 />
 
-When you open a section on the left and click on a specific control, detailed information about that control, as well as the affected resources, is displayed.
-
-### Control Information
+### Control information
 
 On the top of the right side, you see detailed information about the selected control. This includes:
 
 - Control Name: The specific control being examined, e.g., "Ensure All AWS RDS Cluster and Instance Snapshots Are Encrypted."
 - Description: An explanation of the control, defining its purpose and the rules for effective cryptography, such as using key management to secure data during storage and transmission.
-- Link to Inventory: The "Inspect Detection Search in Inventory" button takes you to the [Inventory](/ui/inventory) screen, using the same search this control uses to identify affected resources.
+- Link to Inventory: The "Inspect Detection Search in Inventory" button takes you to the [Inventory](../inventory.mdx) screen, using the same search this control uses to identify affected resources.
 
-### Why Does It Matter?
+### Why does it matter?
 
 This section explains the importance of the control. For instance, it might highlight the risks associated with unencrypted RDS snapshots, such as potential data breaches, financial loss, and reputational damage if sensitive data is intercepted or accessed by unauthorized parties.
 
-### How to Fix
+### How to fix
 
 Provides practical guidance on how to address the issue. For example, it may suggest encrypting all existing and future RDS snapshots using AWS Key Management Service (KMS) keys and creating new snapshots with encryption enabled for existing unencrypted snapshots.
 
-### Affected Resources
+### Affected resources
 
 This table lists the resources impacted by the failing control. Clicking on a resource opens the Resource View, where you can see more details about the resource and its connections to other resources in your cloud environment.
 
 ## Resource View
 
+Clicking on an affected resource in the Benchmark Control Details opens the Resource View, providing in-depth information about the selected resource.
+
 <BrowserWindow 
     imageSrc={require('../img/benchmark_resource.png').default}
     alt="Benchmark Resource"
     url="https://app.fix.security/benchmark/iso27001"
     id="benchmark-resource"
 />
 
-Clicking on an affected resource in the Benchmark Control Details opens the Resource View, providing in-depth information about the selected resource.
-
-This view is identical to the [Inventory Resource View](/ui/inventory#resource-details), with the same sections for Basic Information, Tags, Resource Details, Security Issues, and Changes.
+This view is identical to the [Inventory Resource View](../inventory.mdx#resource-details), with the same sections for Basic Information, Tags, Resource Details, Security Issues, and Changes.

docs/ui/security/index.mdx

@@ -1,6 +1,4 @@
-import BrowserWindow from '@site/src/components/BrowserWindow/BrowserWindow';
-
-# Security Dashboard
+# Security dashboard
 
 The Security Dashboard provides a comprehensive overview of your cloud infrastructure's security status and recent changes.
 
@@ -11,11 +9,11 @@ The Security Dashboard provides a comprehensive overview of your cloud infrastru
     id="security-dashboard"
 />
 
-### Security Score
+### Security score
 
 On the right side, you can see the overall Security Score, a weighted number ranging from 0 to 100, with 100 being the best possible score, indicating no security issues. Critical issues impact the score more significantly than medium or low severity issues, reflecting their importance.
 
-### Top Security Enhancements
+### Top security enhancements
 
 Below the Security Score, this section lists the top 5 recommended security enhancements. These represent some of the most critical issues in your cloud infrastructure. Addressing these enhancements will significantly improve your security score. Each enhancement includes its associated resource type and severity to help you prioritize your actions.
 
@@ -31,16 +29,16 @@ This section shows the number of resources that have been improved or remediated
 
 ## Benchmarks
 
+The Benchmarks matrix provides a visual representation of the compliance scores for different security frameworks across your various cloud accounts. Each cell in the matrix corresponds to a specific account and framework, displaying a score that indicates how well that account adheres to the specified framework's standards.
+
 <BrowserWindow 
     imageSrc={require('../img/security_dashboard_benchmarks.png').default}
     alt="Security Dashboard Benchmarks"
     url="https://app.fix.security/security"
     id="security-dashboard-benchmarks"
 />
 
-The Benchmarks matrix provides a visual representation of the compliance scores for different security frameworks across your various cloud accounts. Each cell in the matrix corresponds to a specific account and framework, displaying a score that indicates how well that account adheres to the specified framework's standards.
-
-Clicking on a benchmark or on a score will open the [Benchmark Details](/ui/security/benchmark) view, providing a detailed breakdown which controls are passing or failing, and the severity of the issues detected.
+Clicking on a benchmark or on a score will open the [Benchmark Details](./benchmark.mdx) view, providing a detailed breakdown which controls are passing or failing, and the severity of the issues detected.
 
 ## Timeline
 
@@ -53,7 +51,7 @@ Clicking on a benchmark or on a score will open the [Benchmark Details](/ui/secu
 
 The Failing Check Timeline provides a visual representation of how your security posture has changed over time.
 
-## Accounts Summary
+## Accounts summary
 
 <BrowserWindow 
     imageSrc={require('../img/security_dashboard_accounts_summary.png').default}

docs/ui/user.mdx

@@ -1,6 +1,4 @@
-import BrowserWindow from '@site/src/components/BrowserWindow/BrowserWindow';
-
-# User Settings
+# User settings
 
 <BrowserWindow 
     imageSrc={require('./img/workspace_list.png').default}

docs/ui/workspace.mdx

@@ -1,6 +1,4 @@
-import BrowserWindow from '@site/src/components/BrowserWindow/BrowserWindow';
-
-# Workspace Settings
+# Workspace settings
 
 The Workspace Settings screen allows you to manage key configurations for your current workspace.
 
@@ -11,15 +9,15 @@ The Workspace Settings screen allows you to manage key configurations for your c
     id="workspace-settings"
 />
 
-### Workspace Information
+### Workspace information
 
 At the top, you can view and modify the workspace name, copy the workspace ID for reference, and regenerate the external ID if needed. The external ID is used for AWS only and is required when establishing the trust between Fix and your AWS accounts. When regenerating this ID you need to re-deploy Fix into all of your AWS accounts using the updated ID.
 
-### Connected Services
+### Connected services
 
 Below the workspace information, you will find the Connected Services section. Here, you can connect or disconnect various services to enable notifications and integrations. Available services include Slack, Discord, Teams, PagerDuty, Email, and Opsgenie. Each service has options to connect, disconnect, and test the integration to ensure that notifications are properly set up and functioning.
 
-## Cloud Accounts
+## Cloud accounts
 
 <BrowserWindow 
     imageSrc={require('./img/accounts_list.png').default}
@@ -32,7 +30,7 @@ The Added Accounts screen within the Workspace Settings allows you to manage the
 
 Each row displays important information such as the cloud provider (e.g., AWS), account ID, and account name. You can easily see the number of resources associated with each account and the date and time of the next scheduled scan.
 
-### Adding a Cloud Account
+### Adding a cloud account
 
 On the top right, there is an "Add an Account" button, allowing you to connect new cloud accounts into your workspace.
 
@@ -45,7 +43,9 @@ On the top right, there is an "Add an Account" button, allowing you to connect n
 
 Clicking any of these options will guide you through the process of adding a new cloud account to your workspace.
 
-## Workspace Users
+## Workspace users
+
+The Workspace Users screen in the Workspace Settings section allows you to manage user access and roles within your workspace. You can easily identify who has access and what permissions they hold.
 
 <BrowserWindow 
     imageSrc={require('./img/users_list.png').default}
@@ -54,19 +54,17 @@ Clicking any of these options will guide you through the process of adding a new
     id="workspace-users"
 />
 
-The Workspace Users screen in the Workspace Settings section allows you to manage user access and roles within your workspace. You can easily identify who has access and what permissions they hold.
-
 At the top right, there is an "Invite External User" button, allowing you to send invitations to new users to join your workspace. By clicking this button, you can enter the email addresses of the people you wish to invite.
 
 ## Billing
 
+The Billing screen in the Workspace Settings section provides an overview of the different subscription plans available for your workspace, along with their respective features and pricing. Your current subscription plan is highlighted, and you can easily switch to a different plan if needed.
+
 <BrowserWindow 
     imageSrc={require('./img/billing.png').default}
     alt="Workspace Billing"
     url="https://app.fix.security/workspace-settings/billing-receipts"
     id="workspace-billing"
 />
 
-The Billing screen in the Workspace Settings section provides an overview of the different subscription plans available for your workspace, along with their respective features and pricing. Your current subscription plan is highlighted, and you can easily switch to a different plan if needed.
-
 Scrolling down on the Billing page, you can review your billing cycle details and history.

docusaurus.config.ts

@@ -164,11 +164,11 @@ const config: Config = {
             'iam/aws',
             'FixCollect.json',
           ),
-          // [`gcp-fix_access`]: path.resolve(
-          //   __dirname,
-          //   'iam/gcp',
-          //   'fix_access.json',
-          // ),
+          [`gcp-fix_access`]: path.resolve(
+            __dirname,
+            'iam/gcp',
+            'fix_access.json',
+          ),
         },
       } satisfies StoredDataOptions,
     ],

package.json

@@ -41,12 +41,12 @@
     "lodash": "4.17.21",
     "netlify-plugin-cache": "1.0.3",
     "node-fetch": "3.3.2",
-    "posthog-js": "1.139.3",
+    "posthog-js": "1.144.0",
     "prism-react-renderer": "2.3.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-modal": "3.16.1",
-    "react-zoom-pan-pinch": "3.4.4",
+    "react-zoom-pan-pinch": "3.6.1",
     "remark-kroki-plugin": "0.1.1",
     "yup": "1.4.0"
   },
@@ -57,20 +57,20 @@
     "@docusaurus/tsconfig": "3.4.0",
     "@docusaurus/types": "3.4.0",
     "@types/js-cookie": "3.0.6",
-    "@typescript-eslint/eslint-plugin": "7.13.1",
-    "@typescript-eslint/parser": "7.13.1",
+    "@typescript-eslint/eslint-plugin": "7.15.0",
+    "@typescript-eslint/parser": "7.15.0",
     "commitizen": "4.3.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-regexp": "2.6.0",
     "husky": "9.0.11",
     "lint-staged": "15.2.7",
-    "postcss": "8.4.38",
+    "postcss": "8.4.39",
     "prettier": "3.3.2",
     "prettier-plugin-css-order": "2.1.2",
     "svgo": "3.3.2",