Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms (#30440)

* Show a blue lock instead of a grey shield for unencrypted rooms

* Update screenshots and snapshot

* Update snapshots and fix e2e test that used to expect the grey shield

* lint and add tests for shield

* Update more screen shots

* finish unit test for left icon

* Remove unneeded check

* Don't bother adding stray props to E2EIcon for data-testid

* Upate snapshots

test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap

@@ -22,6 +22,7 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of a
       >
         <div
           class="mx_E2EIcon mx_E2EIcon_warning"
+          data-testid="e2e-icon"
           style="width: 24px; height: 24px;"
         >
           <div
@@ -100,6 +101,7 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of t
       >
         <div
           class="mx_E2EIcon mx_E2EIcon_warning"
+          data-testid="e2e-icon"
           style="width: 24px; height: 24px;"
         >
           <div

test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx

@@ -24,6 +24,7 @@ import {
 import { setSelection } from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
 import { createMocks } from "./utils";
 import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";
+import { E2EStatus } from "../../../../../../src/utils/ShieldUtils.ts";
 
 jest.mock("../../../../../../src/components/views/rooms/EmojiButton", () => ({
     EmojiButton: ({ addEmoji }: { addEmoji: (emoji: string) => void }) => {
@@ -69,6 +70,7 @@ describe("SendWysiwygComposer", () => {
         disabled = false,
         isRichTextEnabled = true,
         placeholder?: string,
+        e2eStatus?: E2EStatus,
     ) => {
         return render(
             <MatrixClientContext.Provider value={mockClient}>
@@ -80,6 +82,7 @@ describe("SendWysiwygComposer", () => {
                         isRichTextEnabled={isRichTextEnabled}
                         menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })}
                         placeholder={placeholder}
+                        e2eStatus={e2eStatus}
                     />
                 </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
@@ -322,4 +325,23 @@ describe("SendWysiwygComposer", () => {
             });
         },
     );
+
+    describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
+        "Left icon when %s",
+        ({ isRichTextEnabled }) => {
+            it.each([
+                [E2EStatus.Verified, "mx_E2EIcon_verified"],
+                [E2EStatus.Warning, "mx_E2EIcon_warning"],
+                [undefined, undefined],
+            ])("Should render left icon when e2eStatus is %s", async (e2eStatus, expectedClass) => {
+                // When
+                customRender(jest.fn(), jest.fn(), false, isRichTextEnabled, undefined, e2eStatus);
+                await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
+                const leftIcon = screen.getByTestId("e2e-icon");
+                // Then
+                expect(leftIcon).toBeInTheDocument();
+                expect(leftIcon).toHaveClass(expectedClass ? `mx_E2EIcon ${expectedClass}` : `mx_E2EIcon`);
+            });
+        },
+    );
 });