use repo dropdown action

codecrafters-io · May 13, 2024 · 54b76ab · 54b76ab
1 parent 370722b
commit 54b76ab
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/app/components/course-page/repository-dropdown-action.hbs b/app/components/course-page/repository-dropdown-action.hbs
@@ -1,6 +1,10 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div class="px-3 py-2 hover:bg-gray-50 flex items-center justify-between group" role="button" data-test-dropdown-action ...attributes>
+<div
+  class="px-3 py-2 hover:bg-gray-50 flex items-center justify-between group {{if @isDisabled 'text-gray-300'}}"
+  role="button"
+  data-test-dropdown-action
+  ...attributes
+>
   {{yield}}
 
-  {{svg-jar @icon class="w-5 ml-4 text-gray-300 group-hover:text-teal-500"}}
+  {{svg-jar @icon class=(concat "w-5 ml-4 text-gray-300 " (if @isDisabled "" "group-hover:text-teal-500"))}}
 </div>
diff --git a/app/components/course-page/repository-dropdown-action.ts b/app/components/course-page/repository-dropdown-action.ts
@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    icon: string;
+    isDisabled?: boolean;
+  };
+
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class RepositoryDropdownActionComponent extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::RepositoryDropdownAction': typeof RepositoryDropdownActionComponent;
+  }
+}
diff --git a/app/components/course-page/repository-dropdown.hbs b/app/components/course-page/repository-dropdown.hbs
@@ -56,48 +56,31 @@
             </CoursePage::RepositoryDropdownAction>
           {{/if}}
 
-          <div
-            class="px-3 py-2 hover:bg-gray-50 flex items-center justify-between group {{if @activeRepository.isNew 'text-gray-300'}}"
-            role="button"
+          <CoursePage::RepositoryDropdownAction
+            @icon="github"
+            @isDisabled={{@activeRepository.isNew}}
             {{on "click" (fn this.handlePublishToGithubButtonClick dd.actions)}}
-            data-test-dropdown-action
           >
             Publish to GitHub
-            {{svg-jar "github" class="w-5 ml-4 text-gray-300 group-hover:text-teal-500"}}
 
             {{#if @activeRepository.isNew}}
               <EmberTooltip @text="Please select a language first" />
             {{/if}}
-          </div>
+          </CoursePage::RepositoryDropdownAction>
 
-          <CoursePage::RepositoryDropdownAction
-            @icon="beaker"
-            {{on "click" (fn this.handleTryDifferentLanguageActionClick dd.actions)}}
-          >
+          <CoursePage::RepositoryDropdownAction @icon="beaker" {{on "click" (fn this.handleTryDifferentLanguageActionClick dd.actions)}}>
             Try a different language
           </CoursePage::RepositoryDropdownAction>
 
           {{#unless @activeRepository.isNew}}
-            <div
-              class="px-3 py-2 hover:bg-gray-50 flex items-center justify-between group"
-              role="button"
-              {{on "click" (fn this.handleRetryWithSameLanguageActionClick dd.actions)}}
-              data-test-dropdown-action
-            >
+            <CoursePage::RepositoryDropdownAction @icon="refresh" {{on "click" (fn this.handleRetryWithSameLanguageActionClick dd.actions)}}>
               Retry using
               {{@activeRepository.language.name}}
-              {{svg-jar "refresh" class="w-5 ml-4 text-gray-300 group-hover:text-teal-500"}}
-            </div>
+            </CoursePage::RepositoryDropdownAction>
 
-            <div
-              class="px-3 py-2 hover:bg-gray-50 flex items-center justify-between group"
-              role="button"
-              {{on "click" (fn this.handleDeleteRepositoryActionClick dd.actions)}}
-              data-test-dropdown-action
-            >
+            <CoursePage::RepositoryDropdownAction @icon="trash" {{on "click" (fn this.handleDeleteRepositoryActionClick dd.actions)}}>
               Delete Repository
-              {{svg-jar "trash" class="w-5 ml-4 text-gray-300 group-hover:text-teal-500"}}
-            </div>
+            </CoursePage::RepositoryDropdownAction>
           {{/unless}}
         </div>
         {{#if (gt this.nonActiveRepositories.length 0)}}