Do not mention annotations in login panel with comments mode

Author: Alejandro Celaya

src/sidebar/components/LoginPromptPanel.tsx

@@ -8,20 +8,26 @@ import {
   RestrictedIcon,
 } from '@hypothesis/frontend-shared';
 
+import type { SidebarSettings } from '../../types/config';
+import { withServices } from '../service-context';
 import { useSidebarStore } from '../store';
 import SidebarPanel from './SidebarPanel';
 
 export type LoginPromptPanelProps = {
   onLogin: () => void;
   onSignUp: () => void;
+
+  // injected
+  settings?: SidebarSettings;
 };
 
 /**
  * A sidebar panel that prompts a user to log in (or sign up) to annotate.
  */
-export default function LoginPromptPanel({
+function LoginPromptPanel({
   onLogin,
   onSignUp,
+  settings,
 }: LoginPromptPanelProps) {
   const store = useSidebarStore();
   const isLoggedIn = store.isLoggedIn();
@@ -36,7 +42,13 @@ export default function LoginPromptPanel({
           <CardTitle>Login needed</CardTitle>
         </CardHeader>
         <CardContent>
-          <p>Please log in to create annotations or highlights.</p>
+          <p data-testid="main-text">
+            Please log in to{' '}
+            {settings?.commentsMode
+              ? 'write a comment'
+              : 'create annotations or highlights'}
+            .
+          </p>
           <CardActions>
             <Button title="Sign up" onClick={onSignUp}>
               Sign up
@@ -50,3 +62,5 @@ export default function LoginPromptPanel({
     </SidebarPanel>
   );
 }
+
+export default withServices(LoginPromptPanel, ['settings']);

src/sidebar/components/test/LoginPromptPanel-test.js

@@ -3,6 +3,7 @@ import {
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
 import { mount } from '@hypothesis/frontend-testing';
+import sinon from 'sinon';
 
 import LoginPromptPanel, { $imports } from '../LoginPromptPanel';
 
@@ -11,12 +12,14 @@ describe('LoginPromptPanel', () => {
   let fakeOnSignUp;
 
   let fakeStore;
+  let fakeSettings;
 
   function createComponent(props) {
     return mount(
       <LoginPromptPanel
         onLogin={fakeOnLogin}
         onSignUp={fakeOnSignUp}
+        settings={fakeSettings}
         {...props}
       />,
     );
@@ -26,6 +29,7 @@ describe('LoginPromptPanel', () => {
     fakeStore = {
       isLoggedIn: sinon.stub().returns(false),
     };
+    fakeSettings = { commentsMode: false };
 
     fakeOnLogin = sinon.stub();
     fakeOnSignUp = sinon.stub();
@@ -54,6 +58,25 @@ describe('LoginPromptPanel', () => {
     assert.isFalse(wrapper.find('SidebarPanel').exists());
   });
 
+  it.each([
+    { commentsMode: true, expectedText: 'Please log in to write a comment.' },
+    {
+      commentsMode: false,
+      expectedText: 'Please log in to create annotations or highlights.',
+    },
+  ])(
+    'shows different text for comments mode',
+    ({ commentsMode, expectedText }) => {
+      fakeSettings.commentsMode = commentsMode;
+      const wrapper = createComponent();
+
+      assert.equal(
+        wrapper.find('[data-testid="main-text"]').text(),
+        expectedText,
+      );
+    },
+  );
+
   it(
     'should pass a11y checks',
     checkAccessibility({