fix(project): fix typos

ui/embed.go

@@ -4,5 +4,5 @@ import "embed"
 
 //go:embed dist/* mock/*
 
-// StaticFiles exports build and src directorires as embed.FS
+// StaticFiles exports build and src directories as embed.FS
 var StaticFiles embed.FS

ui/src/App.test.tsx

@@ -26,7 +26,7 @@ const uiDefaults: UIDefaults = {
 };
 
 beforeEach(() => {
-  // createing App instance will push current filters into window.location
+  // creating App instance will push current filters into window.location
   // ensure it's wiped after each test
   window.history.pushState({}, "App", "/");
 

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap

@@ -150,7 +150,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
+exports[`<GroupFooter /> matches snapshot when silence is rendered 1`] = `
 <DocumentFragment>
   <div
     class="card-footer components-grid-alertgrid-alertgroup-footer px-2 py-1"

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx

@@ -128,7 +128,7 @@ describe("<GroupFooter />", () => {
     expect(container.innerHTML).toMatch(/Silenced by 123456789/);
   });
 
-  it("mathes snapshot when silence is rendered", () => {
+  it("matches snapshot when silence is rendered", () => {
     for (let index = 0; index < group.alerts.length; index++) {
       group.alerts[index].alertmanager[0].silencedBy = ["123456789"];
     }

ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.tsx

@@ -5,7 +5,7 @@ import type { AlertStore } from "Stores/AlertStore";
 import type { SilenceFormStore } from "Stores/SilenceFormStore";
 import { ManagedSilence } from "Components/ManagedSilence";
 
-const FallbackSilenceDesciption: FC<{
+const FallbackSilenceDescription: FC<{
   silenceID: string;
 }> = ({ silenceID }) => {
   return (
@@ -42,10 +42,10 @@ const RenderSilence: FC<{
 
     if (silence === null) {
       return (
-        <FallbackSilenceDesciption
+        <FallbackSilenceDescription
           key={silenceID}
           silenceID={silenceID}
-        ></FallbackSilenceDesciption>
+        ></FallbackSilenceDescription>
       );
     }
 

ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx

@@ -68,7 +68,7 @@ const AlertGroup: FC<{
   );
 
   // Used to calculate step size when loading more alerts.
-  // Step is calculated from the excesive alert count
+  // Step is calculated from the excessive alert count
   // (what's > defaultRenderCount) by dividing it into 5 clicks.
   // Don't use step lower than 5, too much clicking if we have a group of 9:
   // * we'll show initially 5

ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`<ReloadNeeded /> matches snapshot 1`] = `
             fill="currentColor"
           />
         </svg>
-        All API connection attempts failed. This migth be caused by authentication middleware, will try to reload.
+        All API connection attempts failed. This might be caused by authentication middleware, will try to reload.
       </p>
     </div>
   </h1>

ui/src/Components/Grid/ReloadNeeded/index.tsx

@@ -23,7 +23,7 @@ const ReloadNeeded: FC<{
         />
         <p className="lead text-white bg-secondary p-3 rounded text-wrap text-break">
           <FontAwesomeIcon className="me-2" icon={faSpinner} spin />
-          All API connection attempts failed. This migth be caused by
+          All API connection attempts failed. This might be caused by
           authentication middleware, will try to reload.
         </p>
       </div>

ui/src/Components/Labels/FilterInputLabel/index.test.tsx

@@ -175,7 +175,6 @@ describe("<FilterInputLabel /> onChange", () => {
     );
   });
 
-
   it("editing filter to new value replaces it in alertStore", () => {
     // Verifies that onChange replaces filter when edited to new value
     const filter = createFilter("=", true, true, 1);

ui/src/Components/Labels/LabelWithPercent/index.test.tsx

@@ -82,7 +82,7 @@ describe("<LabelWithPercent />", () => {
     );
   });
 
-  it("clicking the X buttom removes label from filters", () => {
+  it("clicking the X button removes label from filters", () => {
     const { container } = renderLabelWithPercent("foo", "bar", 25, 50, 0, true);
     const removeButton = container.querySelector("svg.fa-xmark");
     fireEvent.click(removeButton!);

ui/src/Components/MainModal/Help.tsx

@@ -69,7 +69,7 @@ const FilterExample: FC<{
 const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
   <Accordion>
     <AccordionItem
-      text="Fiter operators"
+      text="Filter operators"
       content={
         <dl>
           <FilterOperatorHelp operator="=" description="Exact match">
@@ -99,7 +99,7 @@ const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
             <code>value</code>.
           </FilterOperatorHelp>
           <FilterOperatorHelp operator="&lt;" description="Less than match">
-            True if compared alert attribue value is less than{" "}
+            True if compared alert attribute value is less than{" "}
             <code>value</code>.
           </FilterOperatorHelp>
         </dl>
@@ -140,7 +140,7 @@ const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
             <FilterExample example="priority>4">
               Match alerts with label <code>priority</code> value{" "}
               <code>&gt;</code> than <code>4</code>. Value will be casted to
-              integer if possible, string comparision will be used as fallback.
+              integer if possible, string comparison will be used as fallback.
             </FilterExample>
           </QueryHelp>
         </dl>

ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<Help /> matches snapshot 1`] = `
           class="accordion-button "
           type="button"
         >
-          Fiter operators
+          Filter operators
         </button>
       </h2>
       <div
@@ -156,7 +156,7 @@ exports[`<Help /> matches snapshot 1`] = `
                 </code>
               </div>
               <div>
-                True if compared alert attribue value is less than 
+                True if compared alert attribute value is less than 
                 <code>
                   value
                 </code>
@@ -365,7 +365,7 @@ exports[`<Help /> matches snapshot 1`] = `
                     <code>
                       4
                     </code>
-                    . Value will be casted to integer if possible, string comparision will be used as fallback.
+                    . Value will be casted to integer if possible, string comparison will be used as fallback.
                   </div>
                 </li>
               </ul>

ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap

@@ -108,7 +108,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
+exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
 <DocumentFragment>
   <div
     class="card my-1 components-managed-silence w-100"

ui/src/Components/ManagedSilence/index.test.tsx

@@ -80,7 +80,7 @@ describe("<ManagedSilence />", () => {
     expect(screen.getByText("Edit")).toBeInTheDocument();
   });
 
-  it("matches snapshot with expaned details", () => {
+  it("matches snapshot with expanded details", () => {
     const { container, asFragment } = renderManagedSilence();
     const toggle = container.querySelector("svg.text-muted.cursor-pointer");
     fireEvent.click(toggle!);

ui/src/Components/SilenceModal/Browser/index.test.tsx

@@ -530,7 +530,7 @@ describe("<SilenceDelete />", () => {
 
     const { container, unmount } = renderBrowser();
 
-    // nothing is selected intially
+    // nothing is selected initially
     const checkboxes = container.querySelectorAll("input.form-check-input");
     expect(checkboxes).toHaveLength(5);
     for (const i of [1, 2, 3, 4]) {

ui/src/Components/Toast/ToastMessages.test.tsx

@@ -40,7 +40,7 @@ describe("<UpgradeToastMessage />", () => {
     expect(button.textContent).toBe("Reload now");
   });
 
-  it("clicking on the reload buton triggers a reload", () => {
+  it("clicking on the reload button triggers a reload", () => {
     render(<UpgradeToastMessage alertStore={alertStore} />);
     const button = screen.getByRole("button");
 

ui/src/Hooks/useWindowSize.ts

@@ -1,19 +1,19 @@
 import { useState, useEffect } from "react";
 
-interface Dimentions {
+interface Dimensions {
   width: number;
   height: number;
 }
 
-function getSize(): Dimentions {
+function getSize(): Dimensions {
   return {
     width: window.innerWidth,
     height: window.innerHeight,
   };
 }
 
-function useWindowSize(): Dimentions {
-  const [windowSize, setWindowSize] = useState<Dimentions>(getSize());
+function useWindowSize(): Dimensions {
+  const [windowSize, setWindowSize] = useState<Dimensions>(getSize());
 
   useEffect(() => {
     const handleResize = () => {

ui/src/Stores/AlertStore.test.ts

@@ -513,7 +513,7 @@ describe("AlertStore.fetch", () => {
     // there should be no filters set on AlertStore instance since we started
     // with 0 and rejected response with 1 filter
     expect(store.filters.values).toHaveLength(0);
-    // console.info should have been called since we emited a log line
+    // console.info should have been called since we emitted a log line
     expect(consoleSpy).toHaveBeenCalledTimes(1);
   });
 

ui/src/Stores/SilenceFormStore.test.ts

@@ -824,7 +824,7 @@ describe("SilenceFormStore.data", () => {
     });
   }
 
-  it("toAlertmanagerPayload constains id when store.data.silenceID is set", () => {
+  it("toAlertmanagerPayload contains id when store.data.silenceID is set", () => {
     store.data.setSilenceID("12345");
     expect(store.data.toAlertmanagerPayload).toMatchObject({
       id: "12345",
@@ -1036,7 +1036,7 @@ describe("SilenceFormStore.data.isValid", () => {
     expect(store.data.isValid).toBe(false);
   });
 
-  it("isValid returns 'false' if matchers list is pupulated when a matcher without any name", () => {
+  it("isValid returns 'false' if matchers list is populated when a matcher without any name", () => {
     store.data.setAlertmanagers([MockAlertmanagerOption()]);
     store.data.setMatchers([
       MockMatcher("", [{ label: "bar", value: "bar", wasCreated: false }]),
@@ -1046,7 +1046,7 @@ describe("SilenceFormStore.data.isValid", () => {
     expect(store.data.isValid).toBe(false);
   });
 
-  it("isValid returns 'false' if matchers list is pupulated when a matcher without any value ([])", () => {
+  it("isValid returns 'false' if matchers list is populated when a matcher without any value ([])", () => {
     store.data.setAlertmanagers([MockAlertmanagerOption()]);
     store.data.setMatchers([MockMatcher("foo", [])]);
     store.data.setAuthor("me@example.com");
@@ -1054,7 +1054,7 @@ describe("SilenceFormStore.data.isValid", () => {
     expect(store.data.isValid).toBe(false);
   });
 
-  it("isValid returns 'false' if matchers list is pupulated when a matcher with empty value ([''])", () => {
+  it("isValid returns 'false' if matchers list is populated when a matcher with empty value ([''])", () => {
     store.data.setAlertmanagers([MockAlertmanagerOption()]);
     store.data.setMatchers([MockMatcher("foo", [])]);
     store.data.setAuthor("me@example.com");
@@ -1082,7 +1082,7 @@ describe("SilenceFormStore.data.isValid", () => {
     expect(store.data.isValid).toBe(false);
   });
 
-  it("isValid returns 'true' if all fileds are set", () => {
+  it("isValid returns 'true' if all fields are set", () => {
     store.data.setAlertmanagers([MockAlertmanagerOption()]);
     store.data.setMatchers([
       MockMatcher("foo", [{ label: "bar", value: "bar", wasCreated: false }]),