Use proper casing for alert type text

Author: koesie10

extensions/ql-vscode/src/view/common/Alert.tsx

@@ -42,6 +42,15 @@ const getBorderColor = ({ type }: ContainerProps): string => {
   }
 };
 
+const getTypeText = (type: ContainerProps['type']): string => {
+  switch (type) {
+    case 'warning':
+      return 'Warning';
+    case 'error':
+      return 'Error';
+  }
+};
+
 const Container = styled.div<ContainerProps>`
   display: flex;
   flex-direction: column;
@@ -81,7 +90,7 @@ type Props = {
 export const Alert = ({ type, title, message, actions, inverse }: Props) => {
   return (
     <Container type={type} inverse={inverse}>
-      <Title>{type}: {title}</Title>
+      <Title>{getTypeText(type)}: {title}</Title>
       <span>{message}</span>
       {actions && <ActionsContainer>{actions}</ActionsContainer>}
     </Container>

extensions/ql-vscode/src/view/common/__tests__/Alert.spec.tsx

@@ -6,14 +6,14 @@ describe(Alert.name, () => {
   it('renders a warning correctly', () => {
     render(<Alert type="warning" title="Warning title" message="Warning content" />);
 
-    expect(screen.getByText('warning: Warning title')).toBeInTheDocument();
+    expect(screen.getByText('Warning: Warning title')).toBeInTheDocument();
     expect(screen.getByText('Warning content')).toBeInTheDocument();
   });
 
   it('renders an error correctly', () => {
     render(<Alert type="error" title="Error title" message="Error content" />);
 
-    expect(screen.getByText('error: Error title')).toBeInTheDocument();
+    expect(screen.getByText('Error: Error title')).toBeInTheDocument();
     expect(screen.getByText('Error content')).toBeInTheDocument();
   });