Fix to issue #4606 : Links leading outside Studio need to have a pop out icon

contentcuration/contentcuration/frontend/settings/pages/Account/index.vue

@@ -47,11 +47,12 @@
     </h2>
     <p>
       {{ $tr('apiTokenMessage') }}
-      <KExternalLink
+      <ActionLink
+        class="inline-icon"
+        :text="$tr('apiDocumentation')"
         href="https://ricecooker.readthedocs.io/en/latest/index.html"
         target="_blank"
-        :text="$tr('apiDocumentation')"
-        rel="noopener noreferrer"
+        :tabindex="handleclickTab"
       />
     </p>
     <CopyToken
@@ -233,5 +234,9 @@
 .row {
   padding: 8px 0;
 }
+.inline-icon {
+  margin-bottom: 4px !important;
+
+}
 
 </style>

contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue

@@ -40,12 +40,12 @@
     <p>
 
       <span>{{ $tr('requestMoreSpaceMessage') }}</span>
-
-      <KExternalLink
-        style="display: inline;"
+      <ActionLink
+        class="inline-icon"
         :text="$tr('learnMoreAboutImportingContentFromChannels')"
         href="https://kolibri-studio.readthedocs.io/en/latest/add_content.html#import-content-from-other-channels"
         target="_blank"
+        :tabindex="handleclickTab"
       />
 
     </p>
@@ -160,5 +160,9 @@
       height: 8px !important;
     }
   }
+  .inline-icon {
+  margin-bottom: 4px !important;
+}
+
 
 </style>

contentcuration/contentcuration/frontend/settings/pages/UsingStudio/index.vue

@@ -28,11 +28,12 @@
       />
     </p>
     <p>
-      <KExternalLink
+      <ActionLink
+        class="inline-icon"
+        :text="$tr('userDocsLink')"
         href="https://kolibri-studio.readthedocs.io/en/latest/index.html"
         target="_blank"
-        :text="$tr('userDocsLink')"
-        rel="noopener noreferrer"
+        :tabindex="handleclickTab"
       />
     </p>
 
@@ -49,12 +50,14 @@
         <li>{{ $tr('bestPractice3') }}</li>
         <li>{{ $tr('bestPractice5') }}</li>
         <li>
-          <KExternalLink
-            href="https://ricecooker.readthedocs.io/en/latest/video_compression.html"
+          <ActionLink
+            class="inline-icon"
             :text="$tr('bestPractice6')"
+            href="https://ricecooker.readthedocs.io/en/latest/video_compression.html"
             target="_blank"
-            rel="noopener noreferrer"
+            :tabindex="handleclickTab"
           />
+
         </li>
         <li>{{ $tr('bestPractice7') }}</li>
         <li>{{ $tr('bestPractice9') }}</li>
@@ -63,18 +66,20 @@
 
     <!-- Issues -->
     <h2>{{ $tr('notableIssues') }}</h2>
-    <KExternalLink
-      href="https://github.com/learningequality/studio/issues/3992"
+    <ActionLink
+      class="inline-icon"
       :text="$tr('issueLink1')"
+      href="https://github.com/learningequality/studio/issues/3992"
       target="_blank"
-      rel="noopener noreferrer"
+      :tabindex="handleclickTab"
     />
     <p>{{ $tr('issue1') }}</p>
-    <KExternalLink
-      href="https://github.com/learningequality/studio/issues"
+    <ActionLink
+      class="inline-icon"
       :text="$tr('issuesPageLink')"
+      href="https://github.com/learningequality/studio/issues"
       target="_blank"
-      rel="noopener noreferrer"
+      :tabindex="handleclickTab"
     />
   </div>
 
@@ -141,4 +146,9 @@
   h2 {
     margin-top: 32px;
   }
+
+  .inline-icon {
+  margin-bottom: 4px !important;
+}
+
 </style>

docker-compose.yml

@@ -1,33 +1,31 @@
-version: '3.4'
+version: "3.4"
 
-x-studio-environment:
-  &studio-environment
-    MPLBACKEND: ps
-    SHELL: /bin/bash
-    AWS_S3_ENDPOINT_URL: http://minio:9000
-    DATA_DB_HOST: postgres
-    DJANGO_SETTINGS_MODULE: contentcuration.dev_settings
-    RUN_MODE: docker-compose
-    CELERY_TIMEZONE: America/Los_Angeles
-    CELERY_REDIS_DB: 0
-    CELERY_BROKER_ENDPOINT: redis
-    CELERY_RESULT_BACKEND_ENDPOINT: redis
-    CELERY_REDIS_PASSWORD: ""
-    PROBER_STUDIO_BASE_URL: http://studio-app:8080/{path}
+x-studio-environment: &studio-environment
+  MPLBACKEND: ps
+  SHELL: /bin/bash
+  AWS_S3_ENDPOINT_URL: http://minio:9000
+  DATA_DB_HOST: postgres
+  DJANGO_SETTINGS_MODULE: contentcuration.dev_settings
+  RUN_MODE: docker-compose
+  CELERY_TIMEZONE: America/Los_Angeles
+  CELERY_REDIS_DB: 0
+  CELERY_BROKER_ENDPOINT: redis
+  CELERY_RESULT_BACKEND_ENDPOINT: redis
+  CELERY_REDIS_PASSWORD: ""
+  PROBER_STUDIO_BASE_URL: http://studio-app:8080/{path}
 
-x-studio-worker:
-  &studio-worker
-    build:
-      context: .
-      dockerfile: docker/Dockerfile.dev
-    image: learningequality/studio-app-dev
-    depends_on:
-      - minio
-      - postgres
-      - redis
-    volumes:
-      - .:/src
-    environment: *studio-environment
+x-studio-worker: &studio-worker
+  build:
+    context: .
+    dockerfile: docker/Dockerfile.dev
+  image: learningequality/studio-app-dev
+  depends_on:
+    - minio
+    - postgres
+    - redis
+  volumes:
+    - .:/src
+  environment: *studio-environment
 
 services:
   studio-nginx:
@@ -59,7 +57,7 @@ services:
     environment:
       MINIO_ACCESS_KEY: development
       MINIO_SECRET_KEY: development
-      MINIO_API_CORS_ALLOW_ORIGIN: 'http://localhost:8080,http://127.0.0.1:8080'
+      MINIO_API_CORS_ALLOW_ORIGIN: "http://localhost:8080,http://127.0.0.1:8080"
     volumes:
       - .docker/minio:/data
 
@@ -91,7 +89,6 @@ services:
       - studio-app
       - celery-worker
 
-
 volumes:
   minio_data:
   pgdata: