Eng 55 tweaks to styling (#25)

* refactor: update packages, styles * build: update packages * refactor: change name * style: change quotes
incidentalhq · Jul 7, 2024 · 187b297 · 187b297
1 parent 447e51f
commit 187b297
Show file tree

Hide file tree

Showing 14 changed files with 874 additions and 418 deletions.
diff --git a/.github/workflows/pr-backend.yml b/.github/workflows/pr-backend.yml
@@ -23,7 +23,7 @@ jobs:
       - name: Set up Python 3.11
         uses: actions/setup-python@v4
         with:
-          python-version: '3.11'
+          python-version: "3.11"
 
       - name: Lint with flake8
         run: |
@@ -61,4 +61,4 @@ jobs:
         run: docker-compose -f docker-compose.yml exec -T backend sh -c "coverage run"
 
       - name: Get coverage report
-        run: docker-compose -f docker-compose.yml exec -T backend sh -c "coverage report"
+        run: docker-compose -f docker-compose.yml exec -T backend sh -c "coverage report"
diff --git a/backend/app/services/onboarding.py b/backend/app/services/onboarding.py
@@ -223,7 +223,7 @@ def _setup_incident_roles(self, organisation: Organisation) -> None:
             {
                 "name": "Incident Lead",
                 "kind": IncidentRoleKind.LEAD,
-                "description": "An incident lead takes charge of coordinating and overseeing the response to an incident, ensuring effective communication, resource allocation, and resolution efforts to mitigate and manage the impact on an organization.",
+                "description": "An incident lead coordinates and directs the response to an emergency or crisis, guiding teams to efficiently resolve and mitigate the situation",
                 "slack_reference": "lead",
                 "is_deletable": False,
                 "is_editable": True,

diff --git a/backend/poetry.lock b/backend/poetry.lock
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
@@ -7,36 +7,37 @@ readme = "README.md"
 
 [tool.poetry.dependencies]
 python = "^3.11"
-fastapi = "^0.105.0"
-uvicorn = "^0.23.2"
+fastapi = "^0.111.0"
+uvicorn = "^0.30.1"
 pydantic = {extras = ["email"], version = "^2.1.1"}
 pydantic-settings = "^2.0.2"
 alembic = "^1.11.2"
 sqlalchemy = "^2.0.19"
-structlog = "^23.1.0"
+structlog = "^24.2.0"
 shortuuid = "^1.0.11"
 black = "^23.7.0"
 isort = "^5.12.0"
 psycopg2-binary = "^2.9.7"
 typer = "^0.12.3"
-python-multipart = "^0.0.6"
+python-multipart = "^0.0.9"
 boto3 = "^1.28.23"
 pytest = "^8.2.2"
 slack-sdk = "^3.26.2"
-httpx = "^0.26.0"
+httpx = "^0.27.0"
 celery = "^5.4.0"
 redis = "^5.0.4"
 pyyaml = "^6.0.1"
 pytz = "^2024.1"
 pytest-cov = "^5.0.0"
 pyotp = "^2.9.0"
 bcrypt = "^4.1.3"
-faker = "^25.9.1"
+faker = "^26.0.0"
 
 
 [tool.poetry.group.dev.dependencies]
 mypy = "^1.9.0"
 ruff = "^0.2.1"
+pytest-env = "^1.1.3"
 
 [build-system]
 requires = ["poetry-core"]

diff --git a/backend/tests/conftest.py b/backend/tests/conftest.py
@@ -1,4 +1,6 @@
 import pytest
+from alembic import command
+from alembic.config import Config
 
 from app.db import Base, engine
 
@@ -11,3 +13,10 @@ def clear_db():
         for table in reversed(Base.metadata.sorted_tables):  # pylint: disable=no-member
             connection.execute(table.delete())
         tx.commit()
+
+
+@pytest.fixture(scope="session", autouse=True)
+def setup_database() -> None:
+    """Setup all the tables in the database"""
+    alembic_config = Config("/srv/alembic.ini")
+    command.upgrade(alembic_config, revision="head")
diff --git a/backend/tests/pytest.ini b/backend/tests/pytest.ini
@@ -0,0 +1,3 @@
+[pytest]
+env =
+  DATABASE_NAME=test-db
diff --git a/frontend/src/components/Layout/DefaultLayout.tsx b/frontend/src/components/Layout/DefaultLayout.tsx
@@ -12,11 +12,13 @@ const Container = styled.div`
 const RightColumn = styled.div`
   background: #fff;
   flex: 1;
+  margin-top: 8px;
+  border-top: 1px solid var(--color-gray-200);
+  border-left: 1px solid var(--color-gray-200);
 `
 const LeftColumn = styled.div`
   padding: 1rem;
   width: 220px;
-  border-right: 1px solid var(--color-gray-200);
   height: 100vh;
 `
 

diff --git a/frontend/src/components/Layout/SettingsLayout.tsx b/frontend/src/components/Layout/SettingsLayout.tsx
@@ -12,11 +12,14 @@ const Container = styled.div`
 const RightColumn = styled.div`
   background: #fff;
   flex: 1;
+  margin-top: 8px;
+  border-top: 1px solid var(--color-gray-200);
+  border-left: 1px solid var(--color-gray-200);
+  border-radius: 4px 0 0 0;
 `
 const LeftColumn = styled.div`
   padding: 1rem;
   width: 220px;
-  border-right: 1px solid var(--color-gray-200);
   height: 100vh;
 `
 

diff --git a/frontend/src/components/Theme/Pill.tsx b/frontend/src/components/Theme/Pill.tsx
diff --git a/frontend/src/components/Theme/Styles.tsx b/frontend/src/components/Theme/Styles.tsx
@@ -150,14 +150,6 @@ export const ContentMain = styled.div<ContentMainProps>`
   padding: ${(props) => (props.$padding === false ? '0' : '1rem 20px')};
   flex: 1;
 `
-export const ContentSidebar = styled.div`
-  flex-grow: 1;
-  max-width: 480px;
-  min-width: 320px;
-  background-color: var(--color-gray-50);
-  padding: 1rem;
-  height: 100vh;
-`
 
 export const Title = styled.span`
   font-size: 1.2rem;
@@ -171,17 +163,3 @@ export const Subtitle = styled.div`
 export const LinkButton = styled(Link)`
   ${buttonCss}
 `
-
-export const SectionTitle = styled.h2`
-  font-weight: 500;
-  margin-bottom: 1rem;
-`
-
-export const PrimaryLinkButton = styled(LinkButton)`
-  ${primaryButtonCss}
-`
-
-export const LargePrimaryLinkButton = styled(LinkButton)`
-  ${primaryButtonCss}
-  padding: 1rem;
-`
diff --git a/frontend/src/mocks/api/incidents_search.json b/frontend/src/mocks/api/incidents_search.json
@@ -1,62 +1,62 @@
 {
-    "total": 3,
-    "page": 1,
-    "size": 25,
-    "items": [
+  "total": 3,
+  "page": 1,
+  "size": 25,
+  "items": [
+    {
+      "id": "inc_7Z9VjbnwheruYvPnghBHiP",
+      "createdAt": "2024-05-01T21:10:17.504181",
+      "name": "testing bookmarks",
+      "description": "testing...",
+      "reference": "inc-3",
+      "slackChannelId": "C071H6E9M7X",
+      "slackChannelName": "inc-2024-05-01-testing-bookmarks-2",
+      "creator": {
+        "id": "user_TJamHYUZEdJtheUWjFdzHa",
+        "createdAt": "2024-04-08T16:27:19.843133",
+        "name": "Sam A",
+        "emailAddress": "[email protected]"
+      },
+      "incidentType": {
+        "id": "type_AgCraNFhgdZdhkzJUDxtgh",
+        "createdAt": "2024-04-08T16:27:19.923864",
+        "name": "Default",
+        "description": "Default incident type"
+      },
+      "incidentStatus": {
+        "id": "status_UwbEhBF39JVmLHDGdEDgnm",
+        "createdAt": "2024-04-08T16:27:19.951752",
+        "name": "Monitoring",
+        "description": null,
+        "sortOrder": 3,
+        "category": "ACTIVE"
+      },
+      "incidentSeverity": {
+        "id": "sev_N9mM62Tg7bNFQ6kxehDsQ3",
+        "createdAt": "2024-04-08T16:27:19.917487",
+        "name": "Major",
+        "description": "A major incident with significant impact",
+        "rating": 1
+      },
+      "incidentRoleAssignments": [
         {
-            "id": "inc_7Z9VjbnwheruYvPnghBHiP",
-            "createdAt": "2024-05-01T21:10:17.504181",
-            "name": "testing bookmarks",
-            "description": "testing...",
-            "reference": "inc-3",
-            "slackChannelId": "C071H6E9M7X",
-            "slackChannelName": "inc-2024-05-01-testing-bookmarks-2",
-            "creator": {
-                "id": "user_TJamHYUZEdJtheUWjFdzHa",
-                "createdAt": "2024-04-08T16:27:19.843133",
-                "name": "Sam A",
-                "emailAddress": "[email protected]"
-            },
-            "incidentType": {
-                "id": "type_AgCraNFhgdZdhkzJUDxtgh",
-                "createdAt": "2024-04-08T16:27:19.923864",
-                "name": "Default",
-                "description": "Default incident type"
-            },
-            "incidentStatus": {
-                "id": "status_UwbEhBF39JVmLHDGdEDgnm",
-                "createdAt": "2024-04-08T16:27:19.951752",
-                "name": "Monitoring",
-                "description": null,
-                "sortOrder": 3,
-                "category": "ACTIVE"
-            },
-            "incidentSeverity": {
-                "id": "sev_N9mM62Tg7bNFQ6kxehDsQ3",
-                "createdAt": "2024-04-08T16:27:19.917487",
-                "name": "Major",
-                "description": "A major incident with significant impact",
-                "rating": 1
-            },
-            "incidentRoleAssignments": [
-                {
-                    "id": "ra_bVhbsS8jnugrMbM9kkXi2o",
-                    "createdAt": "2024-05-01T21:10:17.514531",
-                    "user": {
-                        "id": "user_TJamHYUZEdJtheUWjFdzHa",
-                        "createdAt": "2024-04-08T16:27:19.843133",
-                        "name": "Sam A",
-                        "emailAddress": "[email protected]"
-                    },
-                    "incidentRole": {
-                        "id": "role_V8XC8VHtZqXb3ZKv9QWNiJ",
-                        "createdAt": "2024-04-08T16:27:19.976570",
-                        "name": "Reporter",
-                        "kind": "REPORTER"
-                    }
-                }
-            ],
-            "timestampValues": []
+          "id": "ra_bVhbsS8jnugrMbM9kkXi2o",
+          "createdAt": "2024-05-01T21:10:17.514531",
+          "user": {
+            "id": "user_TJamHYUZEdJtheUWjFdzHa",
+            "createdAt": "2024-04-08T16:27:19.843133",
+            "name": "Sam A",
+            "emailAddress": "[email protected]"
+          },
+          "incidentRole": {
+            "id": "role_V8XC8VHtZqXb3ZKv9QWNiJ",
+            "createdAt": "2024-04-08T16:27:19.976570",
+            "name": "Reporter",
+            "kind": "REPORTER"
+          }
         }
-    ]
-}
+      ],
+      "timestampValues": []
+    }
+  ]
+}
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
@@ -8,7 +8,7 @@ import mockIncidentsSearch from './api/incidents_search.json'
 
 const baseUrl = getBaseUrl()
 
-const createEmptyResults = <T>(): PaginatedResults<T> => {
+const createPaginatedResults = <T>(): PaginatedResults<T> => {
   return {
     total: 0,
     size: 0,
@@ -22,7 +22,7 @@ export const handlers = [
     const url = new URL(request.url)
     const statusCategory = url.searchParams.get('statusCategory')
     // return empty for triage
-    const results = statusCategory === 'ACTIVE' ? mockIncidentsSearch : createEmptyResults()
+    const results = statusCategory === 'ACTIVE' ? mockIncidentsSearch : createPaginatedResults()
 
     return HttpResponse.json(results)
   }),

diff --git a/frontend/src/pages/Incidents/Show.tsx b/frontend/src/pages/Incidents/Show.tsx
@@ -10,7 +10,7 @@ import wrench from '@/assets/icons/wrench.svg'
 import Icon from '@/components/Icon/Icon'
 import Loading from '@/components/Loading/Loading'
 import { useModal } from '@/components/Modal/useModal'
-import { Box, Content, ContentMain, ContentSidebar, Header, Title } from '@/components/Theme/Styles'
+import { Box, Content, ContentMain, Header, Title } from '@/components/Theme/Styles'
 import MiniAvatar from '@/components/User/MiniAvatar'
 import useApiService from '@/hooks/useApi'
 import useGlobal from '@/hooks/useGlobal'
@@ -90,6 +90,14 @@ const PaddedValue = styled.div`
   gap: 8px;
   padding: 0.25rem 1rem;
 `
+const ContentSidebar = styled.div`
+  flex-grow: 1;
+  max-width: 480px;
+  min-width: 320px;
+  background-color: var(--color-gray-50);
+  padding: 1rem;
+  height: 100vh;
+`
 
 type UrlParams = {
   id: string

diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css
@@ -11,7 +11,7 @@
 
   --stripe-shadow: rgba(180, 180, 180, 0.14) 0px 3px 12px 0px, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px;
 
-  --color-brand: #B2EA9E;
+  --color-brand: #b2ea9e;
   --color-brand-dark: #083900;
 
   --color-dark-900: #334756;